migrate BottomSheet
This commit is contained in:
nnajah1
parent
87a9b5f248
commit
00540064c1
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -9,8 +9,8 @@ import {
|
|||
StyleSheet,
|
||||
Text,
|
||||
} from 'react-native';
|
||||
import { ViewPropTypes } from 'deprecated-react-native-prop-types';
|
||||
import PropTypes from 'prop-types';
|
||||
import { ViewPropTypes } from 'deprecated-react-native-prop-types';
|
||||
import ActionSheet from 'react-native-actionsheet';
|
||||
import {actions, googleMapsTravelModes, mapsTravelModes} from "./NavigationAppsTools";
|
||||
import Assets from '../../components/assets.manager.js';
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import React, { useEffect } from 'react'
|
|||
import CustomSafeArea from '../../components/safeArea.component';
|
||||
import Navigation from './Navigation';
|
||||
|
||||
const index = (props) => {
|
||||
const Index = (props) => {
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -19,4 +19,4 @@ const index = (props) => {
|
|||
)
|
||||
}
|
||||
|
||||
export default index
|
||||
export default Index
|
||||
|
|
@ -41,20 +41,30 @@ export default function Promos(navigation) {
|
|||
|
||||
const renderPromos = () => {
|
||||
return promos.map((data, index) => {
|
||||
return <Elements.shadowView style={{marginBottom: index === promos.length - 1 ? 20 : 0}}>
|
||||
const isLastItem = index === promos.length - 1;
|
||||
|
||||
return (
|
||||
<Elements.shadowView
|
||||
key={`promo-${index}`}
|
||||
style={{ marginBottom: isLastItem ? 20 : 0 }}
|
||||
>
|
||||
<Elements.card
|
||||
key={index}
|
||||
titlealign="left"
|
||||
disabled={1}
|
||||
height={Theme.screen.w * .65}
|
||||
disabled={true}
|
||||
height={Theme.screen.w * 0.65}
|
||||
title={data.title}
|
||||
onPress={() => {
|
||||
navigation.navigation.navigate("PromoDetails", {data: data, onBackPress: () => null});
|
||||
navigation.navigation.navigate("PromoDetails", {
|
||||
data: data,
|
||||
onBackPress: () => null
|
||||
});
|
||||
}}
|
||||
image={{uri: data.image}} />
|
||||
</Elements.shadowView>
|
||||
})
|
||||
}
|
||||
image={{uri: data.image}}
|
||||
/>
|
||||
</Elements.shadowView>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
if(!connected){
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
import React from 'react';
|
||||
import {useState, useEffect} from 'react';
|
||||
import {ScrollView, StyleSheet, Text, View, Dimensions, Button, Image, TextInput, TouchableOpacity, ActivityIndicator, Alert} from 'react-native';
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import { ScrollView, StyleSheet, Text, View, Dimensions, Button, Image, TextInput, TouchableOpacity, ActivityIndicator, Alert } from 'react-native';
|
||||
import Theme from '../../../../components/theme.style.js';
|
||||
import Assets from '../../../../components/assets.manager.js';
|
||||
import Icon from '../../../../components/icons';
|
||||
import DB from '../../../../components/storage';
|
||||
import REQUEST from '../../../../components/api';
|
||||
import {Divider} from 'react-native-elements';
|
||||
import BottomSheet from 'reanimated-bottom-sheet'
|
||||
import { Divider } from 'react-native-elements';
|
||||
import BottomSheet from '@gorhom/bottom-sheet';
|
||||
|
||||
import Geolocation from '@react-native-community/geolocation';
|
||||
import MapView, { PROVIDER_GOOGLE, Marker } from 'react-native-maps';
|
||||
|
|
@ -32,30 +32,30 @@ const styles = {
|
|||
}
|
||||
}
|
||||
|
||||
const {height} = Dimensions.get('window')
|
||||
const { height } = Dimensions.get('window')
|
||||
|
||||
const renderStations = (isGuest, data, onPress, onUpdateFavorite) => {
|
||||
console.log(isGuest)
|
||||
console.log('isGuest:', isGuest);
|
||||
return data.map((station, index) => {
|
||||
let stars = [1,2,3,4,5].map((star, i) => {
|
||||
let stars = [1, 2, 3, 4, 5].map((star, i) => {
|
||||
let name = station.stars >= star ? "star" : "staro"
|
||||
let mgn = index > 0 ? 5 : 0
|
||||
return (
|
||||
<TouchableOpacity key={i}>
|
||||
<Icon.AntDesign name={name} style={{marginLeft: mgn}} color={Theme.colors.yellow} size={20} />
|
||||
<Icon.AntDesign name={name} style={{ marginLeft: mgn }} color={Theme.colors.yellow} size={20} />
|
||||
</TouchableOpacity>)
|
||||
})
|
||||
return (
|
||||
<TouchableOpacity key={index} activeOpacity={1} onPress={() => onPress(station) || null} style={{}}><View style={{flex: 0, padding: 15, flexDirection: 'row'}}>
|
||||
<View style={{flex: 5}}>
|
||||
<Text style={{fontSize: 16, padding: 5, color: Theme.colors.textPrimary}}>{station.name}</Text>
|
||||
<Text style={{color: Theme.colors.textPrimary, padding: 5, width: '90%', fontSize: 13}}>{station.address}</Text>
|
||||
<View style={{flexDirection: 'row', paddingTop: 7}}>
|
||||
<TouchableOpacity key={index} activeOpacity={1} onPress={() => onPress(station) || null} style={{}}><View style={{ flex: 0, padding: 15, flexDirection: 'row' }}>
|
||||
<View style={{ flex: 5 }}>
|
||||
<Text style={{ fontSize: 16, padding: 5, color: Theme.colors.textPrimary }}>{station.name}</Text>
|
||||
<Text style={{ color: Theme.colors.textPrimary, padding: 5, width: '90%', fontSize: 13 }}>{station.address}</Text>
|
||||
<View style={{ flexDirection: 'row', paddingTop: 7 }}>
|
||||
{stars}
|
||||
</View>
|
||||
</View>
|
||||
<TouchableOpacity
|
||||
style={{flex: 0, justifyContent: 'center'}}
|
||||
<TouchableOpacity
|
||||
style={{ flex: 0, justifyContent: 'center' }}
|
||||
onPress={() => {
|
||||
updateFavorite(station, index, onUpdateFavorite)
|
||||
}}
|
||||
|
|
@ -67,7 +67,7 @@ const renderStations = (isGuest, data, onPress, onUpdateFavorite) => {
|
|||
/>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<Divider style={{marginTop: 5, padding: 0, margin:0, width: Theme.screen.w}} /></TouchableOpacity>
|
||||
<Divider style={{ marginTop: 5, padding: 0, margin: 0, width: Theme.screen.w }} /></TouchableOpacity>
|
||||
)
|
||||
})
|
||||
}
|
||||
|
|
@ -81,51 +81,52 @@ const updateFavorite = async (city, index, callback) => {
|
|||
}, {
|
||||
noID: true,
|
||||
value: city.station_uuid
|
||||
}, {}, function(res){
|
||||
}, {}, function (res) {
|
||||
callback(index, city.favorite ? false : true)
|
||||
}, function(err){
|
||||
if(err.message){
|
||||
}, function (err) {
|
||||
if (err.message) {
|
||||
Alert.alert("Information", `\n${err.message}`);
|
||||
}
|
||||
}, "Favorite", city.favorite ? "Delete" : "Update")
|
||||
}
|
||||
|
||||
export default function renderStationPanel(props){
|
||||
export default function renderStationPanel(props) {
|
||||
|
||||
const [panel, setpanel] = useState(null)
|
||||
const [updatedFavorite, setupdatedfavorite] = useState(false)
|
||||
const [updatedFavoriteIndex, setupdatedfavoriteindex] = useState(null)
|
||||
const bottomSheetRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
if(props.visible){
|
||||
panel.show()
|
||||
if (props.visible) {
|
||||
bottomSheetRef.current?.expand();
|
||||
} else {
|
||||
bottomSheetRef.current?.close();
|
||||
}
|
||||
return setpanel(null)
|
||||
}, [props.visible])
|
||||
}, [props.visible]);
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<BottomSheet
|
||||
snapPoints = {[450, 300, 0]}
|
||||
renderContent = {() => renderStations(props.data, props.onClick, props.onUpdateFavorite)}
|
||||
renderHeader = {() => {
|
||||
return (
|
||||
<View style={styles.panelHeader}>
|
||||
<View style={{flexDirection: 'row', justifyContent: 'center', padding: 15}}>
|
||||
<Text style={{flex: 4, padding: 5, color: Theme.colors.textPrimary, fontSize: 15}}>
|
||||
{props.error ? "There was an error" : props.loading || props.data.length == 0 ? "Getting Nearby Stations" : "Unioil Stations found: " + props.data.length}
|
||||
</Text>
|
||||
<View style={{flex: 0, justifyContent: 'center'}}>
|
||||
{props.error ?
|
||||
<TouchableOpacity onPress={props.onError} activeOpacity={1}>
|
||||
<Text style={{color: '#fff'}}>Try Again</Text>
|
||||
</TouchableOpacity> : props.loading || props.data.length == 0 ? <ActivityIndicator color={Theme.colors.primary} size={25} /> : null}
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
<View style={styles.container}>
|
||||
<BottomSheet
|
||||
ref={bottomSheetRef}
|
||||
snapPoints={['50%', '30%', '0%']}
|
||||
enablePanDownToClose={true}
|
||||
index={props.visible ? 1 : -1}
|
||||
>
|
||||
<View style={styles.panelHeader}>
|
||||
<View style={{ flexDirection: 'row', justifyContent: 'center', padding: 15 }}>
|
||||
<Text style={{ flex: 4, padding: 5, color: Theme.colors.textPrimary, fontSize: 15 }}>
|
||||
{props.error ? "There was an error" : props.loading || props.data.length == 0 ? "Getting Nearby Stations" : "Unioil Stations found: " + props.data.length}
|
||||
</Text>
|
||||
<View style={{ flex: 0, justifyContent: 'center' }}>
|
||||
{props.error ?
|
||||
<TouchableOpacity onPress={props.onError} activeOpacity={1}>
|
||||
<Text style={{ color: '#fff' }}>Try Again</Text>
|
||||
</TouchableOpacity> : props.loading || props.data.length == 0 ? <ActivityIndicator color={Theme.colors.primary} size={25} /> : null}
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
{renderStations(props.isGuest, props.data, props.onClick, props.onUpdateFavorite)}
|
||||
</BottomSheet>
|
||||
</View >
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
import React from 'react';
|
||||
import {useState, useEffect, useRef} from 'react';
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import {
|
||||
import {
|
||||
Text,
|
||||
View,
|
||||
TouchableOpacity,
|
||||
Linking,
|
||||
Platform,
|
||||
View,
|
||||
TouchableOpacity,
|
||||
Linking,
|
||||
Platform,
|
||||
Alert
|
||||
} from 'react-native';
|
||||
import {
|
||||
NavigationApps,
|
||||
actions,
|
||||
googleMapsTravelModes,
|
||||
googleMapsTravelModes,
|
||||
mapsTravelModes
|
||||
} from "../../../../components/navigationapps";
|
||||
import { AdjustableText } from '../../../../components/text';
|
||||
|
|
@ -20,7 +20,7 @@ import Theme from '../../../../components/theme.style.js';
|
|||
import Icon from '../../../../components/icons';
|
||||
import DB from '../../../../components/storage';
|
||||
import REQUEST from '../../../../components/api';
|
||||
import BottomSheet from 'reanimated-bottom-sheet';
|
||||
import BottomSheet from '@gorhom/bottom-sheet';
|
||||
|
||||
const styles = {
|
||||
container: {
|
||||
|
|
@ -44,35 +44,35 @@ const styles = {
|
|||
|
||||
const renderStationPanel = (props) => {
|
||||
|
||||
const [panel, setpanel] = useState(null)
|
||||
const [updateFavorite, setUpdateFavorite] = useState(0)
|
||||
const [updateFavoriteVal, setUpdateFavoriteVal] = useState(false)
|
||||
const nvapp = useRef();
|
||||
const bottomSheetRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
if(props.visible){
|
||||
panel.show()
|
||||
if (props.visible) {
|
||||
bottomSheetRef.current?.expand();
|
||||
} else {
|
||||
bottomSheetRef.current?.close();
|
||||
}
|
||||
return setpanel(null)
|
||||
}, [props.visible])
|
||||
}, [props.visible]);
|
||||
|
||||
const renderStationDetails = (station, onPress) => {
|
||||
let stars = [1,2,3,4,5].map((star, i) => {
|
||||
let stars = [1, 2, 3, 4, 5].map((star, i) => {
|
||||
let name = station.stars >= star ? "star" : "staro"
|
||||
let mgn = i > 0 ? 5 : 0
|
||||
return (
|
||||
<Icon.AntDesign name={name} style={{marginLeft: mgn}} color={Theme.colors.yellow} size={20} />
|
||||
<Icon.AntDesign name={name} style={{ marginLeft: mgn }} color={Theme.colors.yellow} size={20} />
|
||||
)
|
||||
})
|
||||
|
||||
return (
|
||||
<TouchableOpacity activeOpacity={1} style={{backgroundColor: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.background : Theme.colors.white }}>
|
||||
<View style={{flex: 0, padding: 15, flexDirection: 'row'}}>
|
||||
<View style={{flex: 5}}>
|
||||
<Text style={{fontFamily: 'arial',color: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.text : Theme.colors.textPrimary, padding: 5, width: '90%', fontSize: 15}}>{station.address}</Text>
|
||||
<View style={{padding: 5, width: '90%', flexDirection: 'row'}}>
|
||||
<Text style={{fontFamily: 'arial', color: '#6887ed', fontSize: 14}}>Contact: </Text>
|
||||
<View style={{fontFamily: 'arial', color: Theme.colors.textPrimary, fontSize: 14}}>
|
||||
<TouchableOpacity activeOpacity={1} style={{ backgroundColor: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.background : Theme.colors.white }}>
|
||||
<View style={{ flex: 0, padding: 15, flexDirection: 'row' }}>
|
||||
<View style={{ flex: 5 }}>
|
||||
<Text style={{ fontFamily: 'arial', color: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.text : Theme.colors.textPrimary, padding: 5, width: '90%', fontSize: 15 }}>{station.address}</Text>
|
||||
<View style={{ padding: 5, width: '90%', flexDirection: 'row' }}>
|
||||
<Text style={{ fontFamily: 'arial', color: '#6887ed', fontSize: 14 }}>Contact: </Text>
|
||||
<View style={{ fontFamily: 'arial', color: Theme.colors.textPrimary, fontSize: 14 }}>
|
||||
{station.contact_numbers.map((num, i) => {
|
||||
return (
|
||||
<TouchableOpacity key={i} onPress={() => {
|
||||
|
|
@ -85,77 +85,77 @@ const renderStationPanel = (props) => {
|
|||
{
|
||||
text: 'Cancel',
|
||||
style: 'cancel',
|
||||
},{
|
||||
}, {
|
||||
text: 'OK', onPress: () => Linking.openURL(`${url}${num}`)
|
||||
}
|
||||
],
|
||||
{cancelable: true})
|
||||
{ cancelable: true })
|
||||
return true
|
||||
}
|
||||
}).catch(err => {
|
||||
console.error('An error occurred', err)
|
||||
})
|
||||
}}>
|
||||
<Text style={{color: "darkblue"}}>{num}</Text>
|
||||
}).catch(err => {
|
||||
console.error('An error occurred', err)
|
||||
})
|
||||
}}>
|
||||
<Text style={{ color: "darkblue" }}>{num}</Text>
|
||||
</TouchableOpacity>)
|
||||
})}
|
||||
</View>
|
||||
</View>
|
||||
<Text style={{fontFamily: 'arial',color: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.text : Theme.colors.textPrimary, padding: 0, width: '90%', fontSize: 13}}></Text>
|
||||
<View style={{flexDirection: 'row', paddingTop: 7}}>
|
||||
<Text style={{ fontFamily: 'arial', color: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.text : Theme.colors.textPrimary, padding: 0, width: '90%', fontSize: 13 }}></Text>
|
||||
<View style={{ flexDirection: 'row', paddingTop: 7 }}>
|
||||
{stars}
|
||||
</View>
|
||||
</View>
|
||||
{updateFavorite == 0 ?
|
||||
<TouchableOpacity
|
||||
style={{flex: 0, justifyContent: 'center'}}
|
||||
{updateFavorite == 0 ?
|
||||
<TouchableOpacity
|
||||
style={{ flex: 0, justifyContent: 'center' }}
|
||||
onPress={() => {
|
||||
updateFavoriteCall(props.stationId, station, props.onload)
|
||||
}}
|
||||
}}
|
||||
>
|
||||
<Icon.FontAwesome
|
||||
name={station.favorite ? 'heart' : 'heart-o'}
|
||||
size={28}
|
||||
color={station.favorite ? 'red' : Theme.colors.darkGray}
|
||||
/>
|
||||
</TouchableOpacity> :
|
||||
<TouchableOpacity onPress={() => updateFavoriteCall(props.stationId, station, props.onload)} style={{flex: 0, justifyContent: 'center'}}>
|
||||
</TouchableOpacity> :
|
||||
<TouchableOpacity onPress={() => updateFavoriteCall(props.stationId, station, props.onload)} style={{ flex: 0, justifyContent: 'center' }}>
|
||||
<Icon.FontAwesome
|
||||
name={updateFavoriteVal ? 'heart' : 'heart-o'}
|
||||
size={28}
|
||||
color={updateFavoriteVal ? 'red' : Theme.colors.darkGray}
|
||||
/>
|
||||
</TouchableOpacity>}
|
||||
</TouchableOpacity>}
|
||||
</View>
|
||||
|
||||
<View style={{backgroundColor: props.app_theme?.theme.dark ? Theme.colors.darkerGray : Theme.colors.lightGray}}>
|
||||
<View style={{flexDirection: 'row', paddingVertical: 15, paddingHorizontal: 15}}>
|
||||
<Text style={{flex: 1, color: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.text : Theme.colors.textPrimary}}>Fuel Prices</Text>
|
||||
<Text style={{flex: 3, alignItems: 'flex-start', color: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.text : Theme.colors.textPrimary, fontStyle: 'italic', fontSize: 12}}>Last Update: {station.latest_update}</Text>
|
||||
<View style={{ backgroundColor: props.app_theme?.theme.dark ? Theme.colors.darkerGray : Theme.colors.lightGray }}>
|
||||
<View style={{ flexDirection: 'row', paddingVertical: 15, paddingHorizontal: 15 }}>
|
||||
<Text style={{ flex: 1, color: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.text : Theme.colors.textPrimary }}>Fuel Prices</Text>
|
||||
<Text style={{ flex: 3, alignItems: 'flex-start', color: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.text : Theme.colors.textPrimary, fontStyle: 'italic', fontSize: 12 }}>Last Update: {station.latest_update}</Text>
|
||||
</View>
|
||||
</View>
|
||||
{
|
||||
station.fuel_prices.map((data, index) => {
|
||||
return (
|
||||
<View key={index} style={{flexDirection: 'row', justifyContent: 'space-between', paddingHorizontal: 15, paddingVertical: 15, borderBottomWidth: .3, borderColor: Theme.colors.searchGray}}>
|
||||
<AdjustableText style={{color: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.text : Theme.colors.textPrimary}}>{data ? data.fuel_name : ''}</AdjustableText>
|
||||
<AdjustableText style={{color: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.text : Theme.colors.textPrimary, color: Theme.colors.primary}}>₱ {data.price}</AdjustableText>
|
||||
<View key={index} style={{ flexDirection: 'row', justifyContent: 'space-between', paddingHorizontal: 15, paddingVertical: 15, borderBottomWidth: .3, borderColor: Theme.colors.searchGray }}>
|
||||
<AdjustableText style={{ color: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.text : Theme.colors.textPrimary }}>{data ? data.fuel_name : ''}</AdjustableText>
|
||||
<AdjustableText style={{ color: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.text : Theme.colors.textPrimary, color: Theme.colors.primary }}>₱ {data.price}</AdjustableText>
|
||||
</View>
|
||||
)
|
||||
})
|
||||
}
|
||||
}
|
||||
</TouchableOpacity>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const updateFavoriteCall = async (id, city, onload) => {
|
||||
let session = await DB.session()
|
||||
let urlTask;
|
||||
let method;
|
||||
if(updateFavorite == 0){
|
||||
if (updateFavorite == 0) {
|
||||
urlTask = city.favorite ? "station_delete_favorite" : "station_add_favorite"
|
||||
method = city.favorite ? "delete" : "get"
|
||||
}else{
|
||||
} else {
|
||||
urlTask = updateFavoriteVal ? "station_delete_favorite" : "station_add_favorite"
|
||||
method = updateFavoriteVal ? "delete" : "get"
|
||||
}
|
||||
|
|
@ -165,63 +165,58 @@ const renderStationPanel = (props) => {
|
|||
}, {
|
||||
noID: true,
|
||||
value: id
|
||||
}, {}, function(res){
|
||||
}, {}, function (res) {
|
||||
setUpdateFavorite(1)
|
||||
onload(false)
|
||||
if(updateFavorite == 0){
|
||||
if (updateFavorite == 0) {
|
||||
setUpdateFavoriteVal(city.favorite ? false : true)
|
||||
}else{
|
||||
} else {
|
||||
setUpdateFavoriteVal(updateFavoriteVal ? false : true)
|
||||
}
|
||||
}, function(err){
|
||||
}, function (err) {
|
||||
Alert.alert("Information", `\n${err.message}`);
|
||||
onload(false)
|
||||
}, "Favorite", city.favorite ? "Delete" : "Update")
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={{flex: 1}}>
|
||||
<View style={{ flex: 1 }}>
|
||||
<BottomSheet
|
||||
snapPoints={['40', '40', '40']}
|
||||
renderContent={() => {
|
||||
return renderStationDetails(props.data, props.onClick)
|
||||
}}
|
||||
enabledBottomInitialAnimation={true}
|
||||
enabledInnerScrolling={true}
|
||||
initialSnap={0}
|
||||
renderHeader={() => {
|
||||
return (
|
||||
<View style={[styles.panelHeader, {backgroundColor: props.app_theme?.theme.dark ? Theme.colors.darkerGray : Theme.colors.lightGray}]}>
|
||||
<View style={{flexDirection: 'row', justifyContent: 'center', padding: 15}}>
|
||||
<Text numberOfLines={1} style={{flex: 1, paddingRight: 40, paddingTop: 17, justifyContent: 'center', color: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.text : Theme.colors.darkGray, fontSize: 16, fontWeight: 'bold'}}>
|
||||
{props.data.name}
|
||||
</Text>
|
||||
<View style={{flex: 0, justifyContent: 'center'}}>
|
||||
<TouchableOpacity onPress={() => {}} activeOpacity={1} style={{top: -25}}>
|
||||
<View style={{width: 60, justifyContent: 'center', alignItems: 'center', height: 60, borderRadius: 30, backgroundColor: Theme.colors.primary, elevation: 5}}>
|
||||
{(props.data && props.data.address != undefined && props.data.address != "") ?
|
||||
<NavigationApps
|
||||
iconSize={30}
|
||||
row
|
||||
modalVisible={true}
|
||||
viewMode="sheet"
|
||||
actionSheetBtnCloseTitle="Cancel"
|
||||
actionSheetBtnOpenTitle={<Icon.FontAwesome name="location-arrow" color="#fff" size={25} />}
|
||||
actionSheetTitle="Choose an application to view the route"
|
||||
address={props.data.address} // address to navigate by for all apps
|
||||
waze={{ address: props.data.address, lat:props.data.latitude, lon:props.data.longitude, action: actions.navigateByLatAndLon}} // specific settings for waze
|
||||
googleMaps={{ address: props.data.address, lat: props.data.latitude, lon: props.data.longitude, action: actions.navigateByAddress, travelMode:googleMapsTravelModes.driving}} // specific settings for google maps
|
||||
maps={{ address: props.data.address, lat: props.data.latitude, lon: props.data.longitude, action: actions.navigateByAddress, travelMode:mapsTravelModes.driving}} // specific settings for maps
|
||||
/> : null}
|
||||
</View>
|
||||
<Text style={{color: Theme.colors.primary, fontSize: 11, alignSelf: 'center', marginTop: 5,}}>Directions</Text>
|
||||
</TouchableOpacity>
|
||||
ref={bottomSheetRef}
|
||||
snapPoints={['70%', '40%', '0%']}
|
||||
enablePanDownToClose={true}
|
||||
enableContentPanningGesture={true}
|
||||
>
|
||||
<View style={[styles.panelHeader, { backgroundColor: props.app_theme?.theme.dark ? Theme.colors.darkerGray : Theme.colors.lightGray }]}>
|
||||
<View style={{ flexDirection: 'row', justifyContent: 'center', padding: 15 }}>
|
||||
<Text numberOfLines={1} style={{ flex: 1, paddingRight: 40, paddingTop: 17, justifyContent: 'center', color: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.text : Theme.colors.darkGray, fontSize: 16, fontWeight: 'bold' }}>
|
||||
{props.data.name}
|
||||
</Text>
|
||||
<View style={{ flex: 0, justifyContent: 'center' }}>
|
||||
<TouchableOpacity onPress={() => { }} activeOpacity={1} style={{ top: -25 }}>
|
||||
<View style={{ width: 60, justifyContent: 'center', alignItems: 'center', height: 60, borderRadius: 30, backgroundColor: Theme.colors.primary, elevation: 5 }}>
|
||||
{(props.data && props.data.address != undefined && props.data.address != "") ?
|
||||
<NavigationApps
|
||||
iconSize={30}
|
||||
row
|
||||
modalVisible={true}
|
||||
viewMode="sheet"
|
||||
actionSheetBtnCloseTitle="Cancel"
|
||||
actionSheetBtnOpenTitle={<Icon.FontAwesome name="location-arrow" color="#fff" size={25} />}
|
||||
actionSheetTitle="Choose an application to view the route"
|
||||
address={props.data.address} // address to navigate by for all apps
|
||||
waze={{ address: props.data.address, lat: props.data.latitude, lon: props.data.longitude, action: actions.navigateByLatAndLon }} // specific settings for waze
|
||||
googleMaps={{ address: props.data.address, lat: props.data.latitude, lon: props.data.longitude, action: actions.navigateByAddress, travelMode: googleMapsTravelModes.driving }} // specific settings for google maps
|
||||
maps={{ address: props.data.address, lat: props.data.latitude, lon: props.data.longitude, action: actions.navigateByAddress, travelMode: mapsTravelModes.driving }} // specific settings for maps
|
||||
/> : null}
|
||||
</View>
|
||||
</View>
|
||||
<Text style={{ color: Theme.colors.primary, fontSize: 11, alignSelf: 'center', marginTop: 5, }}>Directions</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
}/>
|
||||
</View>
|
||||
</View>
|
||||
{renderStationDetails(props.data, props.onClick)}
|
||||
</BottomSheet>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React from 'react';
|
||||
import {useState, useEffect} from 'react';
|
||||
import {useState, useEffect, useRef} from 'react';
|
||||
import {
|
||||
Text,
|
||||
View,
|
||||
|
|
@ -12,12 +12,12 @@ import {
|
|||
} from 'react-native';
|
||||
import { connect } from 'react-redux';
|
||||
import { Divider } from 'react-native-elements';
|
||||
import BottomSheet from 'reanimated-bottom-sheet';
|
||||
import Theme from '../../../../components/theme.style.js';
|
||||
import Icon from '../../../../components/icons';
|
||||
import DB from '../../../../components/storage';
|
||||
import REQUEST from '../../../../components/api';
|
||||
import { navigate } from '../../../../utils/navigation.js';
|
||||
import BottomSheet, { BottomSheetScrollView } from '@gorhom/bottom-sheet';
|
||||
|
||||
const styles = {
|
||||
container: {
|
||||
|
|
@ -148,24 +148,31 @@ const updateFavorite = async (city, index, callback) => {
|
|||
};
|
||||
|
||||
const renderStationPanel = (props) => {
|
||||
const [snap, setSnap] = useState(['10', '10', '3']);
|
||||
const [snap, setSnap] = useState(['10%', '10%', '3%']);
|
||||
const bottomSheetRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
init();
|
||||
if (props.visible) {
|
||||
bottomSheetRef.current?.expand();
|
||||
} else {
|
||||
bottomSheetRef.current?.close();
|
||||
}
|
||||
}, [props.visible, props.data]);
|
||||
|
||||
const init = () => {
|
||||
if (props.data.length === 0) {
|
||||
if(Platform.OS === "android") return setSnap(['14', '14', '3']);
|
||||
|
||||
return setSnap(['14', '14', '14'])
|
||||
if (Platform.OS === 'android') {
|
||||
setSnap(['14%', '14%', '3%']);
|
||||
} else {
|
||||
setSnap(['14%', '14%', '14%']);
|
||||
}
|
||||
} else if (props.data.length === 1) {
|
||||
return setSnap(['22', '22', '22']);
|
||||
}
|
||||
else if (props.data.length > 1) {
|
||||
return setSnap(['35','8','8']);
|
||||
setSnap(['22%', '22%', '22%']);
|
||||
} else if (props.data.length > 1) {
|
||||
setSnap(['35%', '8%', '8%']);
|
||||
} else {
|
||||
return setSnap(props.snapPoints ? props.snapPoints : ['14', '14', '14']);
|
||||
setSnap(props.snapPoints ? props.snapPoints : ['14%', '14%', '14%']);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -177,8 +184,7 @@ const renderStationPanel = (props) => {
|
|||
else return 'Unioil Stations found: ' + (props.data.length > 0 ? props.data.length : 0)
|
||||
}
|
||||
|
||||
const renderHeaders = () => {
|
||||
return (
|
||||
const renderHeaders = () => (
|
||||
<View style={styles.panel}>
|
||||
<View style={[styles.panelHeader, { backgroundColor: props.app_theme?.theme.dark ? Theme.colors.darkerGray : Theme.colors.lightGray }]}>
|
||||
<View
|
||||
|
|
@ -209,24 +215,40 @@ const renderStationPanel = (props) => {
|
|||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const renderContents = () => {
|
||||
return (
|
||||
<SafeAreaView>
|
||||
{props.data.length > 0 ? renderStations(props.isGuest, props.data, props.onClick, props.onUpdateFavorite, props) : <View style={{height: 250, width: '100%', backgroundColor: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.border : Theme.colors.white }}></View>}
|
||||
</SafeAreaView>
|
||||
const renderContents = () => (
|
||||
<BottomSheetScrollView
|
||||
style={{
|
||||
backgroundColor: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.border : Theme.colors.white,
|
||||
}}
|
||||
>
|
||||
<SafeAreaView>
|
||||
{props.data.length > 0 ? (
|
||||
renderStations(props.isGuest, props.data, props.onClick, props.onUpdateFavorite, props)
|
||||
) : (
|
||||
<View
|
||||
style={{
|
||||
height: 250,
|
||||
width: '100%',
|
||||
backgroundColor: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.border : Theme.colors.white,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</SafeAreaView>
|
||||
</BottomSheetScrollView>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={{ flex: 1 }}>
|
||||
<BottomSheet
|
||||
snapPoints={snap}
|
||||
renderContent={renderContents}
|
||||
enabledBottomInitialAnimation={true}
|
||||
enabledInnerScrolling={true}
|
||||
renderHeader={renderHeaders} />
|
||||
ref={bottomSheetRef}
|
||||
snapPoints={snap}
|
||||
enablePanDownToClose={true}
|
||||
index={props.visible ? 1 : -1}
|
||||
>
|
||||
{renderHeaders()}
|
||||
{renderContents()}
|
||||
</BottomSheet>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,26 +20,35 @@ import { closeModal, openModal } from '../../redux/actions/AlertActions.js';
|
|||
const Tab = createBottomTabNavigator();
|
||||
|
||||
const screenOptions = ({ route }) => ({
|
||||
tabBarStyle: [Platform.OS === "android" && {height: 60}],
|
||||
tabBarStyle: [Platform.OS === "android" && {
|
||||
height: 60,
|
||||
borderColor: 'transparent',
|
||||
border: 0,
|
||||
elevation: 0,
|
||||
paddingTop: Platform.OS == 'ios' ? 5 : 5,
|
||||
}],
|
||||
tabBarIcon: ({ focused, color, size }) => {
|
||||
let iconName;
|
||||
if (route.name === 'Home') {
|
||||
if (route.name === 'HomeTab') {
|
||||
iconName = focused ? 'activehome' : 'inactivehome';
|
||||
return <Elements.icon name={iconName} size={size} color={color} />
|
||||
} else if (route.name === 'Promos') {
|
||||
} else if (route.name === 'PromosTab') {
|
||||
iconName = focused ? 'activepromos' : 'inactivepromos';
|
||||
return <Elements.icon name={iconName} size={size} color={color} />
|
||||
} else if(route.name === 'Payatpump') {
|
||||
} else if(route.name === 'PayatpumpTab') {
|
||||
iconName = focused ? 'activepayatpump' : 'activepayatpump';
|
||||
return <Elements.icon name={iconName} size={45} color={color} resizeMode={'contain'} marginBottom={5} />
|
||||
} else if (route.name === 'Stations') {
|
||||
} else if (route.name === 'StationsTab') {
|
||||
iconName = focused ? 'activestation' : 'inactivestation';
|
||||
return <Elements.icon name={iconName} size={size} color={color} />
|
||||
} else if (route.name === 'Rewards') {
|
||||
} else if (route.name === 'RewardsTab') {
|
||||
iconName = focused ? 'activerewards' : 'inactiverewards';
|
||||
return <Elements.icon name={iconName} size={size} color={color} />
|
||||
}
|
||||
},
|
||||
tabBarActiveTintColor: '#E74610',
|
||||
tabBarInactiveTintColor: 'gray',
|
||||
|
||||
});
|
||||
|
||||
const PayatpumpTab = (navigation) => {
|
||||
|
|
@ -132,17 +141,6 @@ const payatpumpOption = (navigation) => {
|
|||
}
|
||||
}
|
||||
|
||||
const tabBarOptions = {
|
||||
activeTintColor: '#E74610',
|
||||
inactiveTintColor: 'gray',
|
||||
style: {
|
||||
borderColor: 'transparent',
|
||||
border: 0,
|
||||
elevation: 0,
|
||||
paddingTop: Platform.OS == 'ios' ? 5 : 5,
|
||||
}
|
||||
}
|
||||
|
||||
const Home = () => {
|
||||
const navigation = useNavigation();
|
||||
const Stack = createStackNavigator();
|
||||
|
|
@ -152,7 +150,7 @@ const Home = () => {
|
|||
})
|
||||
|
||||
return (
|
||||
<Stack.Navigator initialRouteName="Home" >
|
||||
<Stack.Navigator initialRouteName="Home">
|
||||
<Stack.Screen name="Home" key="Home" component={HomeScreen} options={navOptions} />
|
||||
<Stack.Screen name="IQAir" key="IQAir" component={IQAir} initialParams={{navigation: navigation}} options={navOptions} />
|
||||
</Stack.Navigator>
|
||||
|
|
@ -161,12 +159,12 @@ const Home = () => {
|
|||
|
||||
export default function App(navigation) {
|
||||
return (
|
||||
<Tab.Navigator initialRouteName="Home" backBehavior="initialRoute" screenOptions={screenOptions} tabBarOptions={tabBarOptions} >
|
||||
<Tab.Screen name="Home" component={Home} options={{ tabBarLabel: 'Home', headerShown: false, tabBarLabelStyle: {bottom: Platform.OS === "android" ? 5 : 0} }} />
|
||||
<Tab.Screen name="Promos" component={PromosScreen} options={{ tabBarLabel: 'Promos', headerShown: false, tabBarLabelStyle: {bottom: Platform.OS === "android" ? 5 : 0} }} />
|
||||
<Tab.Navigator initialRouteName="Home" backBehavior="initialRoute" screenOptions={screenOptions}>
|
||||
<Tab.Screen name="HomeTab" component={Home} options={{ tabBarLabel: 'Home', headerShown: false, tabBarLabelStyle: {bottom: Platform.OS === "android" ? 5 : 0} }} />
|
||||
<Tab.Screen name="PromosTab" component={PromosScreen} options={{ tabBarLabel: 'Promos', headerShown: false, tabBarLabelStyle: {bottom: Platform.OS === "android" ? 5 : 0} }} />
|
||||
{/* <Tab.Screen name="Payatpump" component={PayatpumpScreen} options={payatpumpOption(navigation)} /> */}
|
||||
<Tab.Screen name="Stations" component={StationsScreen} options={{ tabBarLabel: 'Stations', headerShown: false, tabBarLabelStyle: {bottom: Platform.OS === "android" ? 5 : 0} }} />
|
||||
<Tab.Screen name="Rewards" component={RewardsScreen} options={{ tabBarLabel: 'Rewards', headerShown: false, tabBarLabelStyle: {bottom: Platform.OS === "android" ? 5 : 0} }} />
|
||||
<Tab.Screen name="StationsTab" component={StationsScreen} options={{ tabBarLabel: 'Stations', headerShown: false, tabBarLabelStyle: {bottom: Platform.OS === "android" ? 5 : 0} }} />
|
||||
<Tab.Screen name="RewardsTab" component={RewardsScreen} options={{ tabBarLabel: 'Rewards', headerShown: false, tabBarLabelStyle: {bottom: Platform.OS === "android" ? 5 : 0} }} />
|
||||
</Tab.Navigator>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import React from 'react';
|
||||
import {useState, useEffect} from 'react';
|
||||
import {Divider} from 'react-native-elements';
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import { Divider } from 'react-native-elements';
|
||||
import {
|
||||
Text,
|
||||
View,
|
||||
|
|
@ -11,7 +11,7 @@ import {
|
|||
Alert,
|
||||
} from 'react-native';
|
||||
import { connect } from 'react-redux';
|
||||
import BottomSheet from 'reanimated-bottom-sheet';
|
||||
import BottomSheet, { BottomSheetScrollView } from '@gorhom/bottom-sheet';
|
||||
import Theme from '../../../components/theme.style.js';
|
||||
import Icon from '../../../components/icons';
|
||||
import DB from '../../../components/storage';
|
||||
|
|
@ -40,19 +40,19 @@ const renderStations = (data, onPress, onUpdateFavorite, props) => {
|
|||
return data.map((station, index) => {
|
||||
// filter the value of key pair if it is empty
|
||||
var filteredAddress = Object.entries(station.address).filter(([key, value]) => {
|
||||
if(key === "stateCode") return `${value.replace(/\s/g, '')}`
|
||||
if (key === "stateCode") return `${value.replace(/\s/g, '')}`
|
||||
return `${value}`
|
||||
})
|
||||
.map(([key, value]) => `${value}`)
|
||||
.map(([key, value]) => `${value}`)
|
||||
|
||||
return (
|
||||
<TouchableOpacity
|
||||
key={index}
|
||||
activeOpacity={1}
|
||||
onPress={() => onPress(station) || null}
|
||||
style={{backgroundColor: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.border : Theme.colors.white }}>
|
||||
<View style={{flex: 0, padding: 15, flexDirection: 'row'}}>
|
||||
<View style={{flex: 5}}>
|
||||
style={{ backgroundColor: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.border : Theme.colors.white }}>
|
||||
<View style={{ flex: 0, padding: 15, flexDirection: 'row' }}>
|
||||
<View style={{ flex: 5 }}>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 16,
|
||||
|
|
@ -73,7 +73,7 @@ const renderStations = (data, onPress, onUpdateFavorite, props) => {
|
|||
</View>
|
||||
</View>
|
||||
<Divider
|
||||
style={{marginTop: 5, padding: 0, margin: 0, width: Theme.screen.w}}
|
||||
style={{ marginTop: 5, padding: 0, margin: 0, width: Theme.screen.w }}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
|
|
@ -107,98 +107,107 @@ const renderStationPanel = (props) => {
|
|||
const [updatedFavorite, setupdatedfavorite] = useState(false);
|
||||
const [updatedFavoriteIndex, setupdatedfavoriteindex] = useState(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [snap, setSnap] = useState(['10', '10', '3']);
|
||||
const [initialSnap, setInitialSnap] = useState(0)
|
||||
const [snap, setSnap] = useState(['10%', '10%', '3%']);
|
||||
const bottomSheetRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
init();
|
||||
if (props.visible) {
|
||||
bottomSheetRef.current?.expand();
|
||||
} else {
|
||||
bottomSheetRef.current?.close();
|
||||
}
|
||||
}, [props.visible, props.data.length]);
|
||||
|
||||
const init = () => {
|
||||
if (props.visible == true) {
|
||||
if(props.data.length === 1) {
|
||||
setSnap([Platform.OS === "android" ? '23' : '16', '8', '8']);
|
||||
} else if(props.data.length === 2) {
|
||||
setSnap([Platform.OS === "android" ? '39' : '27', '8', '8']);
|
||||
setInitialSnap(0)
|
||||
if (props.visible == true || props.data.length !== 0) {
|
||||
if (props.data.length === 1) {
|
||||
setSnap([Platform.OS === "android" ? '23%' : '16%', '8%', '8%']);
|
||||
} else if (props.data.length === 2) {
|
||||
setSnap([Platform.OS === "android" ? '39%' : '27%', '8%', '8%']);
|
||||
} else {
|
||||
setSnap(['38', '8', '8']);
|
||||
setInitialSnap(0)
|
||||
}
|
||||
} else if (props.data.length != 0) {
|
||||
if(props.data.length === 1) {
|
||||
setSnap([Platform.OS === "android" ? '23' : '16', '8', '8']);
|
||||
} else if(props.data.length === 2) {
|
||||
setSnap([Platform.OS === "android" ? '39' : '27', '8', '8']);
|
||||
setInitialSnap(0)
|
||||
} else {
|
||||
setSnap(['38', '8', '8']);
|
||||
setInitialSnap(0)
|
||||
setSnap(['38%', '8%', '8%']);
|
||||
}
|
||||
|
||||
} else {
|
||||
setSnap([Platform.select({ios: '14', android: '12'}), '8', '8']);
|
||||
setInitialSnap(2)
|
||||
setSnap([Platform.select({ ios: '14%', android: '12%' }), '8%', '8%']);
|
||||
}
|
||||
};
|
||||
|
||||
const getPanelTitle = () => {
|
||||
if(props.error) return 'There was an error'
|
||||
else if(props.loading && !props.isSearched && props.data.length == 0) return 'Getting Nearby Stations'
|
||||
else if(!props.loading && !props.isSearched && props.data.length == 0) return 'No Nearby Stations Found'
|
||||
else if(props.isSearched) return 'Unioil Stations found: ' + (props.data.length > 0 ? props.data.length : 0)
|
||||
if (props.error) return 'There was an error'
|
||||
else if (props.loading && !props.isSearched && props.data.length == 0) return 'Getting Nearby Stations'
|
||||
else if (!props.loading && !props.isSearched && props.data.length == 0) return 'No Nearby Stations Found'
|
||||
else if (props.isSearched) return 'Unioil Stations found: ' + (props.data.length > 0 ? props.data.length : 0)
|
||||
else return 'Unioil Stations found: ' + (props.data.length > 0 ? props.data.length : 0)
|
||||
}
|
||||
|
||||
const renderHeaders = () => {
|
||||
return (
|
||||
<View style={styles.panel}>
|
||||
<View style={[styles.panelHeader, { backgroundColor: props.app_theme?.theme.dark ? Theme.colors.darkGray : Theme.colors.lightGray }]}>
|
||||
<View
|
||||
const renderHeaders = () => (
|
||||
<View style={styles.panel}>
|
||||
<View style={[styles.panelHeader, { backgroundColor: props.app_theme?.theme.dark ? Theme.colors.darkGray : Theme.colors.lightGray }]}>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
padding: 15,
|
||||
}}>
|
||||
<Text
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
padding: 15,
|
||||
flex: 4,
|
||||
padding: 5,
|
||||
color: props.app_theme?.theme.colors.text,
|
||||
fontSize: 15,
|
||||
}}>
|
||||
<Text
|
||||
style={{
|
||||
flex: 4,
|
||||
padding: 5,
|
||||
color: props.app_theme?.theme.colors.text,
|
||||
fontSize: 15,
|
||||
}}>
|
||||
{getPanelTitle()}
|
||||
</Text>
|
||||
<View style={{flex: 0, justifyContent: 'center'}}>
|
||||
{props.error ? (
|
||||
<TouchableOpacity onPress={props.onError} activeOpacity={1}>
|
||||
<Text style={{color: '#fff'}}>Try Again</Text>
|
||||
</TouchableOpacity>
|
||||
) : props.loading ? (
|
||||
<ActivityIndicator color={Theme.colors.primary} size={25} />
|
||||
) : null}
|
||||
</View>
|
||||
{getPanelTitle()}
|
||||
</Text>
|
||||
<View style={{ flex: 0, justifyContent: 'center' }}>
|
||||
{props.error ? (
|
||||
<TouchableOpacity onPress={props.onError} activeOpacity={1}>
|
||||
<Text style={{ color: '#fff' }}>Try Again</Text>
|
||||
</TouchableOpacity>
|
||||
) : props.loading ? (
|
||||
<ActivityIndicator color={Theme.colors.primary} size={25} />
|
||||
) : null}
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
</View>
|
||||
);
|
||||
|
||||
|
||||
const renderContents = () => (
|
||||
<BottomSheetScrollView
|
||||
style={{
|
||||
backgroundColor: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.border : Theme.colors.white,
|
||||
}}
|
||||
>
|
||||
{props.data.length > 0 ? (
|
||||
renderStations(props.data, props.onClick, props.onUpdateFavorite, props)
|
||||
) : (
|
||||
<View
|
||||
style={{
|
||||
height: 250,
|
||||
width: '100%',
|
||||
backgroundColor: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.border : Theme.colors.white,
|
||||
}}
|
||||
>
|
||||
<View />
|
||||
</View>
|
||||
)}
|
||||
</BottomSheetScrollView>
|
||||
);
|
||||
|
||||
const renderContents = () => {
|
||||
return (
|
||||
<SafeAreaView style={props.data.length < 3 && { height: '100%', backgroundColor: 'white'}}>
|
||||
{props.data.length > 0 ? renderStations(props.data, props.onClick, props.onUpdateFavorite, props) : <View style={{height: 250, width: '100%', backgroundColor: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.border : Theme.colors.white }}><View></View></View>}
|
||||
</SafeAreaView>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<BottomSheet
|
||||
snapPoints={snap}
|
||||
renderContent={renderContents}
|
||||
enabledBottomInitialAnimation={true}
|
||||
enabledInnerScrolling={true}
|
||||
initialSnap={0}
|
||||
renderHeader={renderHeaders}/>
|
||||
ref={bottomSheetRef}
|
||||
snapPoints={snap}
|
||||
enablePanDownToClose={true}
|
||||
index={props.visible ? 1 : -1}
|
||||
>
|
||||
{renderHeaders()}
|
||||
{renderContents()}
|
||||
</BottomSheet>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,10 @@
|
|||
module.exports = {
|
||||
presets: ['module:metro-react-native-babel-preset'],
|
||||
plugins: [
|
||||
'react-native-reanimated/plugin',
|
||||
|
||||
['@babel/plugin-transform-runtime', { useESModules: true }],
|
||||
|
||||
// Reanimated's plugin MUST come last
|
||||
'react-native-reanimated/plugin',
|
||||
],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@
|
|||
"postinstall": "patch-package"
|
||||
},
|
||||
"dependencies": {
|
||||
"@gorhom/bottom-sheet": "^4",
|
||||
"@react-native-async-storage/async-storage": "1.19.3",
|
||||
"@react-native-community/art": "^1.2.0",
|
||||
"@react-native-community/datetimepicker": "7.6.3",
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,75 @@
|
|||
diff --git a/node_modules/react-native-snap-carousel/src/carousel/Carousel.js b/node_modules/react-native-snap-carousel/src/carousel/Carousel.js
|
||||
index dae71a3..00f7960 100644
|
||||
--- a/node_modules/react-native-snap-carousel/src/carousel/Carousel.js
|
||||
+++ b/node_modules/react-native-snap-carousel/src/carousel/Carousel.js
|
||||
@@ -1,7 +1,8 @@
|
||||
import React, { Component } from 'react';
|
||||
-import { Animated, Easing, FlatList, I18nManager, Platform, ScrollView, View, ViewPropTypes } from 'react-native';
|
||||
+import { Animated, Easing, FlatList, I18nManager, Platform, ScrollView, View, } from 'react-native';
|
||||
import PropTypes from 'prop-types';
|
||||
import shallowCompare from 'react-addons-shallow-compare';
|
||||
+import { ViewPropTypes } from 'deprecated-react-native-prop-types';
|
||||
import {
|
||||
defaultScrollInterpolator,
|
||||
stackScrollInterpolator,
|
||||
@@ -43,8 +44,8 @@ export default class Carousel extends Component {
|
||||
autoplayDelay: PropTypes.number,
|
||||
autoplayInterval: PropTypes.number,
|
||||
callbackOffsetMargin: PropTypes.number,
|
||||
- containerCustomStyle: ViewPropTypes ? ViewPropTypes.style : View.propTypes.style,
|
||||
- contentContainerCustomStyle: ViewPropTypes ? ViewPropTypes.style : View.propTypes.style,
|
||||
+ containerCustomStyle: ViewPropTypes.style,
|
||||
+ contentContainerCustomStyle: ViewPropTypes.style,
|
||||
enableMomentum: PropTypes.bool,
|
||||
enableSnap: PropTypes.bool,
|
||||
firstItem: PropTypes.number,
|
||||
@@ -61,7 +62,7 @@ export default class Carousel extends Component {
|
||||
scrollEnabled: PropTypes.bool,
|
||||
scrollInterpolator: PropTypes.func,
|
||||
slideInterpolatedStyle: PropTypes.func,
|
||||
- slideStyle: ViewPropTypes ? ViewPropTypes.style : View.propTypes.style,
|
||||
+ slideStyle: ViewPropTypes.style,
|
||||
shouldOptimizeUpdates: PropTypes.bool,
|
||||
swipeThreshold: PropTypes.number,
|
||||
useScrollView: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
|
||||
diff --git a/node_modules/react-native-snap-carousel/src/pagination/Pagination.js b/node_modules/react-native-snap-carousel/src/pagination/Pagination.js
|
||||
index 5c021cf..b4beca2 100644
|
||||
--- a/node_modules/react-native-snap-carousel/src/pagination/Pagination.js
|
||||
+++ b/node_modules/react-native-snap-carousel/src/pagination/Pagination.js
|
||||
@@ -1,6 +1,7 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
-import { I18nManager, Platform, View, ViewPropTypes } from 'react-native';
|
||||
+import { I18nManager, Platform, View } from 'react-native';
|
||||
import PropTypes from 'prop-types';
|
||||
+import { ViewPropTypes } from 'deprecated-react-native-prop-types';
|
||||
import PaginationDot from './PaginationDot';
|
||||
import styles from './Pagination.style';
|
||||
|
||||
diff --git a/node_modules/react-native-snap-carousel/src/pagination/PaginationDot.js b/node_modules/react-native-snap-carousel/src/pagination/PaginationDot.js
|
||||
index e59d196..acaf956 100644
|
||||
--- a/node_modules/react-native-snap-carousel/src/pagination/PaginationDot.js
|
||||
+++ b/node_modules/react-native-snap-carousel/src/pagination/PaginationDot.js
|
||||
@@ -1,6 +1,7 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
-import { View, Animated, Easing, TouchableOpacity, ViewPropTypes } from 'react-native';
|
||||
+import { View, Animated, Easing, TouchableOpacity} from 'react-native';
|
||||
import PropTypes from 'prop-types';
|
||||
+import { ViewPropTypes } from 'deprecated-react-native-prop-types';
|
||||
import styles from './Pagination.style';
|
||||
|
||||
export default class PaginationDot extends PureComponent {
|
||||
diff --git a/node_modules/react-native-snap-carousel/src/parallaximage/ParallaxImage.js b/node_modules/react-native-snap-carousel/src/parallaximage/ParallaxImage.js
|
||||
index 8bc774a..de0ed79 100644
|
||||
--- a/node_modules/react-native-snap-carousel/src/parallaximage/ParallaxImage.js
|
||||
+++ b/node_modules/react-native-snap-carousel/src/parallaximage/ParallaxImage.js
|
||||
@@ -1,8 +1,9 @@
|
||||
// Parallax effect inspired by https://github.com/oblador/react-native-parallax/
|
||||
|
||||
import React, { Component } from 'react';
|
||||
-import { View, ViewPropTypes, Image, Animated, Easing, ActivityIndicator, findNodeHandle } from 'react-native';
|
||||
+import { View, Image, Animated, Easing, ActivityIndicator, findNodeHandle } from 'react-native';
|
||||
import PropTypes from 'prop-types';
|
||||
+import { ViewPropTypes } from 'deprecated-react-native-prop-types';
|
||||
import styles from './ParallaxImage.style';
|
||||
|
||||
export default class ParallaxImage extends Component {
|
||||
17
yarn.lock
17
yarn.lock
|
|
@ -1209,6 +1209,21 @@
|
|||
dependencies:
|
||||
tslib "^2.8.0"
|
||||
|
||||
"@gorhom/bottom-sheet@^4":
|
||||
version "4.6.4"
|
||||
resolved "https://registry.yarnpkg.com/@gorhom/bottom-sheet/-/bottom-sheet-4.6.4.tgz#387d0f0f21e3470eb8575498cb81ce96f5108e79"
|
||||
integrity sha512-0itLMblLBvepE065w3a60S030c2rNUsGshPC7wbWDm31VyqoaU2xjzh/ojH62YIJOcobBr5QoC30IxBBKDGovQ==
|
||||
dependencies:
|
||||
"@gorhom/portal" "1.0.14"
|
||||
invariant "^2.2.4"
|
||||
|
||||
"@gorhom/portal@1.0.14":
|
||||
version "1.0.14"
|
||||
resolved "https://registry.yarnpkg.com/@gorhom/portal/-/portal-1.0.14.tgz#1953edb76aaba80fb24021dc774550194a18e111"
|
||||
integrity sha512-MXyL4xvCjmgaORr/rtryDNFy3kU4qUbKlwtQqqsygd0xX3mhKjOLn6mQK8wfu0RkoE0pBE0nAasRoHua+/QZ7A==
|
||||
dependencies:
|
||||
nanoid "^3.3.1"
|
||||
|
||||
"@hapi/hoek@^9.0.0", "@hapi/hoek@^9.3.0":
|
||||
version "9.3.0"
|
||||
resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-9.3.0.tgz#8368869dcb735be2e7f5cb7647de78e167a251fb"
|
||||
|
|
@ -7172,7 +7187,7 @@ ms@2.1.3, ms@^2.1.3:
|
|||
resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
|
||||
integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
|
||||
|
||||
nanoid@^3.1.23:
|
||||
nanoid@^3.1.23, nanoid@^3.3.1:
|
||||
version "3.3.11"
|
||||
resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.11.tgz#4f4f112cefbe303202f2199838128936266d185b"
|
||||
integrity sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==
|
||||
|
|
|
|||
Loading…
Reference in New Issue