jannah
/
unioil-loyalty-rn-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

migrate BottomSheet

This commit is contained in:
nnajah1 2025-04-08 18:02:10 +08:00
parent 87a9b5f248
commit 00540064c1
19 changed files with 4093 additions and 279 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
android/.gradle/7.5.1/executionHistory/executionHistory.bin
View File

Binary file not shown.

BIN
android/.gradle/7.5.1/executionHistory/executionHistory.lock
View File

Binary file not shown.

BIN
android/.gradle/7.5.1/fileHashes/fileHashes.bin
View File

Binary file not shown.

BIN
android/.gradle/7.5.1/fileHashes/fileHashes.lock
View File

Binary file not shown.

BIN
android/.gradle/buildOutputCleanup/buildOutputCleanup.lock
View File

Binary file not shown.

BIN
android/.gradle/file-system.probe
View File

Binary file not shown.

2
app/components/navigationapps/NavigationApps.js
View File

@ -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';

4
app/screens/iqair/index.js
View File

@ -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

28
app/screens/main/promo/promos.js
View File

@ -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 (

93
app/screens/main/station/fragments/bottomsheet.js
View File

@ -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'}}
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>
<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 >
)
}

157
app/screens/main/station/fragments/stationdetailspanel.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import {useState, useEffect, useRef} from 'react';
import { useState, useEffect, useRef } from 'react';
import { connect } from 'react-redux';
import {
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,30 +85,30 @@ 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'}}
style={{ flex: 0, justifyContent: 'center' }}
onPress={() => {
updateFavoriteCall(props.stationId, station, props.onload)
}}
@ -119,7 +119,7 @@ const renderStationPanel = (props) => {
color={station.favorite ? 'red' : Theme.colors.darkGray}
/>
</TouchableOpacity> :
<TouchableOpacity onPress={() => updateFavoriteCall(props.stationId, station, props.onload)} style={{flex: 0, justifyContent: 'center'}}>
<TouchableOpacity onPress={() => updateFavoriteCall(props.stationId, station, props.onload)} style={{ flex: 0, justifyContent: 'center' }}>
<Icon.FontAwesome
name={updateFavoriteVal ? 'heart' : 'heart-o'}
size={28}
@ -128,34 +128,34 @@ const renderStationPanel = (props) => {
</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}}>&#8369; {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 }}>&#8369; {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>
);
}

70
app/screens/main/station/fragments/stationpanel.js
View File

@ -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
ref={bottomSheetRef}
snapPoints={snap}
renderContent={renderContents}
enabledBottomInitialAnimation={true}
enabledInnerScrolling={true}
renderHeader={renderHeaders} />
enablePanDownToClose={true}
index={props.visible ? 1 : -1}
>
{renderHeaders()}
{renderContents()}
</BottomSheet>
</View>
);
}

44
app/screens/main/tab.js
View File

@ -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>
);
}

159
app/screens/payatpump/fragments/stationpanel.js
View File

@ -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
ref={bottomSheetRef}
snapPoints={snap}
renderContent={renderContents}
enabledBottomInitialAnimation={true}
enabledInnerScrolling={true}
initialSnap={0}
renderHeader={renderHeaders}/>
enablePanDownToClose={true}
index={props.visible ? 1 : -1}
>
{renderHeaders()}
{renderContents()}
</BottomSheet>
);
}

5
babel.config.js
View File

@ -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',
],
};

1
package.json
View File

@ -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",

3685
patches/@react-native-community+masked-view+0.1.11.patch Normal file
View File

File diff suppressed because it is too large Load Diff

75
patches/react-native-snap-carousel+3.9.1.patch Normal file
View File

@ -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
View File

@ -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==