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, StyleSheet,
Text, Text,
} from 'react-native'; } from 'react-native';
import { ViewPropTypes } from 'deprecated-react-native-prop-types';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { ViewPropTypes } from 'deprecated-react-native-prop-types';
import ActionSheet from 'react-native-actionsheet'; import ActionSheet from 'react-native-actionsheet';
import {actions, googleMapsTravelModes, mapsTravelModes} from "./NavigationAppsTools"; import {actions, googleMapsTravelModes, mapsTravelModes} from "./NavigationAppsTools";
import Assets from '../../components/assets.manager.js'; 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 CustomSafeArea from '../../components/safeArea.component';
import Navigation from './Navigation'; import Navigation from './Navigation';
const index = (props) => { const Index = (props) => {
useEffect(() => { 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 = () => { const renderPromos = () => {
return promos.map((data, index) => { 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 <Elements.card
key={index}
titlealign="left" titlealign="left"
disabled={1} disabled={true}
height={Theme.screen.w * .65} height={Theme.screen.w * 0.65}
title={data.title} title={data.title}
onPress={() => { onPress={() => {
navigation.navigation.navigate("PromoDetails", {data: data, onBackPress: () => null}); navigation.navigation.navigate("PromoDetails", {
data: data,
onBackPress: () => null
});
}} }}
image={{uri: data.image}} /> image={{uri: data.image}}
</Elements.shadowView> />
}) </Elements.shadowView>
} );
});
};
if(!connected){ if(!connected){
return ( return (

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

@ -1,13 +1,13 @@
import React from 'react'; import React from 'react';
import {useState, useEffect} from 'react'; import { useState, useEffect, useRef } from 'react';
import {ScrollView, StyleSheet, Text, View, Dimensions, Button, Image, TextInput, TouchableOpacity, ActivityIndicator, Alert} from 'react-native'; import { ScrollView, StyleSheet, Text, View, Dimensions, Button, Image, TextInput, TouchableOpacity, ActivityIndicator, Alert } from 'react-native';
import Theme from '../../../../components/theme.style.js'; import Theme from '../../../../components/theme.style.js';
import Assets from '../../../../components/assets.manager.js'; import Assets from '../../../../components/assets.manager.js';
import Icon from '../../../../components/icons'; import Icon from '../../../../components/icons';
import DB from '../../../../components/storage'; import DB from '../../../../components/storage';
import REQUEST from '../../../../components/api'; import REQUEST from '../../../../components/api';
import {Divider} from 'react-native-elements'; import { Divider } from 'react-native-elements';
import BottomSheet from 'reanimated-bottom-sheet' import BottomSheet from '@gorhom/bottom-sheet';
import Geolocation from '@react-native-community/geolocation'; import Geolocation from '@react-native-community/geolocation';
import MapView, { PROVIDER_GOOGLE, Marker } from 'react-native-maps'; 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) => { const renderStations = (isGuest, data, onPress, onUpdateFavorite) => {
console.log(isGuest) console.log('isGuest:', isGuest);
return data.map((station, index) => { 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 name = station.stars >= star ? "star" : "staro"
let mgn = index > 0 ? 5 : 0 let mgn = index > 0 ? 5 : 0
return ( return (
<TouchableOpacity key={i}> <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>) </TouchableOpacity>)
}) })
return ( return (
<TouchableOpacity key={index} activeOpacity={1} onPress={() => onPress(station) || null} style={{}}><View style={{flex: 0, padding: 15, flexDirection: 'row'}}> <TouchableOpacity key={index} activeOpacity={1} onPress={() => onPress(station) || null} style={{}}><View style={{ flex: 0, padding: 15, flexDirection: 'row' }}>
<View style={{flex: 5}}> <View style={{ flex: 5 }}>
<Text style={{fontSize: 16, padding: 5, color: Theme.colors.textPrimary}}>{station.name}</Text> <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> <Text style={{ color: Theme.colors.textPrimary, padding: 5, width: '90%', fontSize: 13 }}>{station.address}</Text>
<View style={{flexDirection: 'row', paddingTop: 7}}> <View style={{ flexDirection: 'row', paddingTop: 7 }}>
{stars} {stars}
</View> </View>
</View> </View>
<TouchableOpacity <TouchableOpacity
style={{flex: 0, justifyContent: 'center'}} style={{ flex: 0, justifyContent: 'center' }}
onPress={() => { onPress={() => {
updateFavorite(station, index, onUpdateFavorite) updateFavorite(station, index, onUpdateFavorite)
}} }}
@ -67,7 +67,7 @@ const renderStations = (isGuest, data, onPress, onUpdateFavorite) => {
/> />
</TouchableOpacity> </TouchableOpacity>
</View> </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, noID: true,
value: city.station_uuid value: city.station_uuid
}, {}, function(res){ }, {}, function (res) {
callback(index, city.favorite ? false : true) callback(index, city.favorite ? false : true)
}, function(err){ }, function (err) {
if(err.message){ if (err.message) {
Alert.alert("Information", `\n${err.message}`); Alert.alert("Information", `\n${err.message}`);
} }
}, "Favorite", city.favorite ? "Delete" : "Update") }, "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 [updatedFavorite, setupdatedfavorite] = useState(false)
const [updatedFavoriteIndex, setupdatedfavoriteindex] = useState(null) const [updatedFavoriteIndex, setupdatedfavoriteindex] = useState(null)
const bottomSheetRef = useRef(null);
useEffect(() => { useEffect(() => {
if(props.visible){ if (props.visible) {
panel.show() bottomSheetRef.current?.expand();
} else {
bottomSheetRef.current?.close();
} }
return setpanel(null) }, [props.visible]);
}, [props.visible])
return ( return (
<View style={styles.container}> <View style={styles.container}>
<BottomSheet <BottomSheet
snapPoints = {[450, 300, 0]} ref={bottomSheetRef}
renderContent = {() => renderStations(props.data, props.onClick, props.onUpdateFavorite)} snapPoints={['50%', '30%', '0%']}
renderHeader = {() => { enablePanDownToClose={true}
return ( index={props.visible ? 1 : -1}
<View style={styles.panelHeader}> >
<View style={{flexDirection: 'row', justifyContent: 'center', padding: 15}}> <View style={styles.panelHeader}>
<Text style={{flex: 4, padding: 5, color: Theme.colors.textPrimary, fontSize: 15}}> <View style={{ flexDirection: 'row', justifyContent: 'center', padding: 15 }}>
{props.error ? "There was an error" : props.loading || props.data.length == 0 ? "Getting Nearby Stations" : "Unioil Stations found: " + props.data.length} <Text style={{ flex: 4, padding: 5, color: Theme.colors.textPrimary, fontSize: 15 }}>
</Text> {props.error ? "There was an error" : props.loading || props.data.length == 0 ? "Getting Nearby Stations" : "Unioil Stations found: " + props.data.length}
<View style={{flex: 0, justifyContent: 'center'}}> </Text>
{props.error ? <View style={{ flex: 0, justifyContent: 'center' }}>
<TouchableOpacity onPress={props.onError} activeOpacity={1}> {props.error ?
<Text style={{color: '#fff'}}>Try Again</Text> <TouchableOpacity onPress={props.onError} activeOpacity={1}>
</TouchableOpacity> : props.loading || props.data.length == 0 ? <ActivityIndicator color={Theme.colors.primary} size={25} /> : null} <Text style={{ color: '#fff' }}>Try Again</Text>
</View> </TouchableOpacity> : props.loading || props.data.length == 0 ? <ActivityIndicator color={Theme.colors.primary} size={25} /> : null}
</View> </View>
</View> </View>
) </View>
}} {renderStations(props.isGuest, props.data, props.onClick, props.onUpdateFavorite)}
/> </BottomSheet>
</View> </View >
) )
} }

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

@ -1,18 +1,18 @@
import React from 'react'; import React from 'react';
import {useState, useEffect, useRef} from 'react'; import { useState, useEffect, useRef } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { import {
Text, Text,
View, View,
TouchableOpacity, TouchableOpacity,
Linking, Linking,
Platform, Platform,
Alert Alert
} from 'react-native'; } from 'react-native';
import { import {
NavigationApps, NavigationApps,
actions, actions,
googleMapsTravelModes, googleMapsTravelModes,
mapsTravelModes mapsTravelModes
} from "../../../../components/navigationapps"; } from "../../../../components/navigationapps";
import { AdjustableText } from '../../../../components/text'; import { AdjustableText } from '../../../../components/text';
@ -20,7 +20,7 @@ import Theme from '../../../../components/theme.style.js';
import Icon from '../../../../components/icons'; import Icon from '../../../../components/icons';
import DB from '../../../../components/storage'; import DB from '../../../../components/storage';
import REQUEST from '../../../../components/api'; import REQUEST from '../../../../components/api';
import BottomSheet from 'reanimated-bottom-sheet'; import BottomSheet from '@gorhom/bottom-sheet';
const styles = { const styles = {
container: { container: {
@ -44,35 +44,35 @@ const styles = {
const renderStationPanel = (props) => { const renderStationPanel = (props) => {
const [panel, setpanel] = useState(null)
const [updateFavorite, setUpdateFavorite] = useState(0) const [updateFavorite, setUpdateFavorite] = useState(0)
const [updateFavoriteVal, setUpdateFavoriteVal] = useState(false) const [updateFavoriteVal, setUpdateFavoriteVal] = useState(false)
const nvapp = useRef(); const bottomSheetRef = useRef(null);
useEffect(() => { useEffect(() => {
if(props.visible){ if (props.visible) {
panel.show() bottomSheetRef.current?.expand();
} else {
bottomSheetRef.current?.close();
} }
return setpanel(null) }, [props.visible]);
}, [props.visible])
const renderStationDetails = (station, onPress) => { 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 name = station.stars >= star ? "star" : "staro"
let mgn = i > 0 ? 5 : 0 let mgn = i > 0 ? 5 : 0
return ( 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 ( return (
<TouchableOpacity activeOpacity={1} style={{backgroundColor: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.background : Theme.colors.white }}> <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: 0, padding: 15, flexDirection: 'row' }}>
<View style={{flex: 5}}> <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> <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'}}> <View style={{ padding: 5, width: '90%', flexDirection: 'row' }}>
<Text style={{fontFamily: 'arial', color: '#6887ed', fontSize: 14}}>Contact: </Text> <Text style={{ fontFamily: 'arial', color: '#6887ed', fontSize: 14 }}>Contact: </Text>
<View style={{fontFamily: 'arial', color: Theme.colors.textPrimary, fontSize: 14}}> <View style={{ fontFamily: 'arial', color: Theme.colors.textPrimary, fontSize: 14 }}>
{station.contact_numbers.map((num, i) => { {station.contact_numbers.map((num, i) => {
return ( return (
<TouchableOpacity key={i} onPress={() => { <TouchableOpacity key={i} onPress={() => {
@ -85,77 +85,77 @@ const renderStationPanel = (props) => {
{ {
text: 'Cancel', text: 'Cancel',
style: 'cancel', style: 'cancel',
},{ }, {
text: 'OK', onPress: () => Linking.openURL(`${url}${num}`) text: 'OK', onPress: () => Linking.openURL(`${url}${num}`)
} }
], ],
{cancelable: true}) { cancelable: true })
return true return true
} }
}).catch(err => { }).catch(err => {
console.error('An error occurred', err) console.error('An error occurred', err)
}) })
}}> }}>
<Text style={{color: "darkblue"}}>{num}</Text> <Text style={{ color: "darkblue" }}>{num}</Text>
</TouchableOpacity>) </TouchableOpacity>)
})} })}
</View> </View>
</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> <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}}> <View style={{ flexDirection: 'row', paddingTop: 7 }}>
{stars} {stars}
</View> </View>
</View> </View>
{updateFavorite == 0 ? {updateFavorite == 0 ?
<TouchableOpacity <TouchableOpacity
style={{flex: 0, justifyContent: 'center'}} style={{ flex: 0, justifyContent: 'center' }}
onPress={() => { onPress={() => {
updateFavoriteCall(props.stationId, station, props.onload) updateFavoriteCall(props.stationId, station, props.onload)
}} }}
> >
<Icon.FontAwesome <Icon.FontAwesome
name={station.favorite ? 'heart' : 'heart-o'} name={station.favorite ? 'heart' : 'heart-o'}
size={28} size={28}
color={station.favorite ? 'red' : Theme.colors.darkGray} color={station.favorite ? 'red' : Theme.colors.darkGray}
/> />
</TouchableOpacity> : </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 <Icon.FontAwesome
name={updateFavoriteVal ? 'heart' : 'heart-o'} name={updateFavoriteVal ? 'heart' : 'heart-o'}
size={28} size={28}
color={updateFavoriteVal ? 'red' : Theme.colors.darkGray} color={updateFavoriteVal ? 'red' : Theme.colors.darkGray}
/> />
</TouchableOpacity>} </TouchableOpacity>}
</View> </View>
<View style={{backgroundColor: props.app_theme?.theme.dark ? Theme.colors.darkerGray : Theme.colors.lightGray}}> <View style={{ backgroundColor: props.app_theme?.theme.dark ? Theme.colors.darkerGray : Theme.colors.lightGray }}>
<View style={{flexDirection: 'row', paddingVertical: 15, paddingHorizontal: 15}}> <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: 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> <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>
</View> </View>
{ {
station.fuel_prices.map((data, index) => { station.fuel_prices.map((data, index) => {
return ( return (
<View key={index} style={{flexDirection: 'row', justifyContent: 'space-between', paddingHorizontal: 15, paddingVertical: 15, borderBottomWidth: .3, borderColor: Theme.colors.searchGray}}> <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 }}>{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> <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> </View>
) )
}) })
} }
</TouchableOpacity> </TouchableOpacity>
) )
} }
const updateFavoriteCall = async (id, city, onload) => { const updateFavoriteCall = async (id, city, onload) => {
let session = await DB.session() let session = await DB.session()
let urlTask; let urlTask;
let method; let method;
if(updateFavorite == 0){ if (updateFavorite == 0) {
urlTask = city.favorite ? "station_delete_favorite" : "station_add_favorite" urlTask = city.favorite ? "station_delete_favorite" : "station_add_favorite"
method = city.favorite ? "delete" : "get" method = city.favorite ? "delete" : "get"
}else{ } else {
urlTask = updateFavoriteVal ? "station_delete_favorite" : "station_add_favorite" urlTask = updateFavoriteVal ? "station_delete_favorite" : "station_add_favorite"
method = updateFavoriteVal ? "delete" : "get" method = updateFavoriteVal ? "delete" : "get"
} }
@ -165,63 +165,58 @@ const renderStationPanel = (props) => {
}, { }, {
noID: true, noID: true,
value: id value: id
}, {}, function(res){ }, {}, function (res) {
setUpdateFavorite(1) setUpdateFavorite(1)
onload(false) onload(false)
if(updateFavorite == 0){ if (updateFavorite == 0) {
setUpdateFavoriteVal(city.favorite ? false : true) setUpdateFavoriteVal(city.favorite ? false : true)
}else{ } else {
setUpdateFavoriteVal(updateFavoriteVal ? false : true) setUpdateFavoriteVal(updateFavoriteVal ? false : true)
} }
}, function(err){ }, function (err) {
Alert.alert("Information", `\n${err.message}`); Alert.alert("Information", `\n${err.message}`);
onload(false) onload(false)
}, "Favorite", city.favorite ? "Delete" : "Update") }, "Favorite", city.favorite ? "Delete" : "Update")
} }
return ( return (
<View style={{flex: 1}}> <View style={{ flex: 1 }}>
<BottomSheet <BottomSheet
snapPoints={['40', '40', '40']} ref={bottomSheetRef}
renderContent={() => { snapPoints={['70%', '40%', '0%']}
return renderStationDetails(props.data, props.onClick) enablePanDownToClose={true}
}} enableContentPanningGesture={true}
enabledBottomInitialAnimation={true} >
enabledInnerScrolling={true} <View style={[styles.panelHeader, { backgroundColor: props.app_theme?.theme.dark ? Theme.colors.darkerGray : Theme.colors.lightGray }]}>
initialSnap={0} <View style={{ flexDirection: 'row', justifyContent: 'center', padding: 15 }}>
renderHeader={() => { <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' }}>
return ( {props.data.name}
<View style={[styles.panelHeader, {backgroundColor: props.app_theme?.theme.dark ? Theme.colors.darkerGray : Theme.colors.lightGray}]}> </Text>
<View style={{flexDirection: 'row', justifyContent: 'center', padding: 15}}> <View style={{ flex: 0, justifyContent: 'center' }}>
<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'}}> <TouchableOpacity onPress={() => { }} activeOpacity={1} style={{ top: -25 }}>
{props.data.name} <View style={{ width: 60, justifyContent: 'center', alignItems: 'center', height: 60, borderRadius: 30, backgroundColor: Theme.colors.primary, elevation: 5 }}>
</Text> {(props.data && props.data.address != undefined && props.data.address != "") ?
<View style={{flex: 0, justifyContent: 'center'}}> <NavigationApps
<TouchableOpacity onPress={() => {}} activeOpacity={1} style={{top: -25}}> iconSize={30}
<View style={{width: 60, justifyContent: 'center', alignItems: 'center', height: 60, borderRadius: 30, backgroundColor: Theme.colors.primary, elevation: 5}}> row
{(props.data && props.data.address != undefined && props.data.address != "") ? modalVisible={true}
<NavigationApps viewMode="sheet"
iconSize={30} actionSheetBtnCloseTitle="Cancel"
row actionSheetBtnOpenTitle={<Icon.FontAwesome name="location-arrow" color="#fff" size={25} />}
modalVisible={true} actionSheetTitle="Choose an application to view the route"
viewMode="sheet" address={props.data.address} // address to navigate by for all apps
actionSheetBtnCloseTitle="Cancel" waze={{ address: props.data.address, lat: props.data.latitude, lon: props.data.longitude, action: actions.navigateByLatAndLon }} // specific settings for waze
actionSheetBtnOpenTitle={<Icon.FontAwesome name="location-arrow" color="#fff" size={25} />} googleMaps={{ address: props.data.address, lat: props.data.latitude, lon: props.data.longitude, action: actions.navigateByAddress, travelMode: googleMapsTravelModes.driving }} // specific settings for google maps
actionSheetTitle="Choose an application to view the route" maps={{ address: props.data.address, lat: props.data.latitude, lon: props.data.longitude, action: actions.navigateByAddress, travelMode: mapsTravelModes.driving }} // specific settings for maps
address={props.data.address} // address to navigate by for all apps /> : null}
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>
</View> </View>
</View> <Text style={{ color: Theme.colors.primary, fontSize: 11, alignSelf: 'center', marginTop: 5, }}>Directions</Text>
</TouchableOpacity>
</View> </View>
) </View>
} </View>
}/> {renderStationDetails(props.data, props.onClick)}
</BottomSheet>
</View> </View>
); );
} }

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

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import {useState, useEffect} from 'react'; import {useState, useEffect, useRef} from 'react';
import { import {
Text, Text,
View, View,
@ -12,12 +12,12 @@ import {
} from 'react-native'; } from 'react-native';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { Divider } from 'react-native-elements'; import { Divider } from 'react-native-elements';
import BottomSheet from 'reanimated-bottom-sheet';
import Theme from '../../../../components/theme.style.js'; import Theme from '../../../../components/theme.style.js';
import Icon from '../../../../components/icons'; import Icon from '../../../../components/icons';
import DB from '../../../../components/storage'; import DB from '../../../../components/storage';
import REQUEST from '../../../../components/api'; import REQUEST from '../../../../components/api';
import { navigate } from '../../../../utils/navigation.js'; import { navigate } from '../../../../utils/navigation.js';
import BottomSheet, { BottomSheetScrollView } from '@gorhom/bottom-sheet';
const styles = { const styles = {
container: { container: {
@ -148,24 +148,31 @@ const updateFavorite = async (city, index, callback) => {
}; };
const renderStationPanel = (props) => { const renderStationPanel = (props) => {
const [snap, setSnap] = useState(['10', '10', '3']); const [snap, setSnap] = useState(['10%', '10%', '3%']);
const bottomSheetRef = useRef(null);
useEffect(() => { useEffect(() => {
init(); init();
if (props.visible) {
bottomSheetRef.current?.expand();
} else {
bottomSheetRef.current?.close();
}
}, [props.visible, props.data]); }, [props.visible, props.data]);
const init = () => { const init = () => {
if (props.data.length === 0) { if (props.data.length === 0) {
if(Platform.OS === "android") return setSnap(['14', '14', '3']); if (Platform.OS === 'android') {
setSnap(['14%', '14%', '3%']);
return setSnap(['14', '14', '14']) } else {
setSnap(['14%', '14%', '14%']);
}
} else if (props.data.length === 1) { } else if (props.data.length === 1) {
return setSnap(['22', '22', '22']); setSnap(['22%', '22%', '22%']);
} } else if (props.data.length > 1) {
else if (props.data.length > 1) { setSnap(['35%', '8%', '8%']);
return setSnap(['35','8','8']);
} else { } 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) else return 'Unioil Stations found: ' + (props.data.length > 0 ? props.data.length : 0)
} }
const renderHeaders = () => { const renderHeaders = () => (
return (
<View style={styles.panel}> <View style={styles.panel}>
<View style={[styles.panelHeader, { backgroundColor: props.app_theme?.theme.dark ? Theme.colors.darkerGray : Theme.colors.lightGray }]}> <View style={[styles.panelHeader, { backgroundColor: props.app_theme?.theme.dark ? Theme.colors.darkerGray : Theme.colors.lightGray }]}>
<View <View
@ -209,24 +215,40 @@ const renderStationPanel = (props) => {
</View> </View>
</View> </View>
); );
};
const renderContents = () => { const renderContents = () => (
return ( <BottomSheetScrollView
<SafeAreaView> style={{
{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>} backgroundColor: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.border : Theme.colors.white,
</SafeAreaView> }}
>
<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 ( return (
<View style={{ flex: 1 }}> <View style={{ flex: 1 }}>
<BottomSheet <BottomSheet
snapPoints={snap} ref={bottomSheetRef}
renderContent={renderContents} snapPoints={snap}
enabledBottomInitialAnimation={true} enablePanDownToClose={true}
enabledInnerScrolling={true} index={props.visible ? 1 : -1}
renderHeader={renderHeaders} /> >
{renderHeaders()}
{renderContents()}
</BottomSheet>
</View> </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 Tab = createBottomTabNavigator();
const screenOptions = ({ route }) => ({ 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 }) => { tabBarIcon: ({ focused, color, size }) => {
let iconName; let iconName;
if (route.name === 'Home') { if (route.name === 'HomeTab') {
iconName = focused ? 'activehome' : 'inactivehome'; iconName = focused ? 'activehome' : 'inactivehome';
return <Elements.icon name={iconName} size={size} color={color} /> return <Elements.icon name={iconName} size={size} color={color} />
} else if (route.name === 'Promos') { } else if (route.name === 'PromosTab') {
iconName = focused ? 'activepromos' : 'inactivepromos'; iconName = focused ? 'activepromos' : 'inactivepromos';
return <Elements.icon name={iconName} size={size} color={color} /> return <Elements.icon name={iconName} size={size} color={color} />
} else if(route.name === 'Payatpump') { } else if(route.name === 'PayatpumpTab') {
iconName = focused ? 'activepayatpump' : 'activepayatpump'; iconName = focused ? 'activepayatpump' : 'activepayatpump';
return <Elements.icon name={iconName} size={45} color={color} resizeMode={'contain'} marginBottom={5} /> 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'; iconName = focused ? 'activestation' : 'inactivestation';
return <Elements.icon name={iconName} size={size} color={color} /> return <Elements.icon name={iconName} size={size} color={color} />
} else if (route.name === 'Rewards') { } else if (route.name === 'RewardsTab') {
iconName = focused ? 'activerewards' : 'inactiverewards'; iconName = focused ? 'activerewards' : 'inactiverewards';
return <Elements.icon name={iconName} size={size} color={color} /> return <Elements.icon name={iconName} size={size} color={color} />
} }
}, },
tabBarActiveTintColor: '#E74610',
tabBarInactiveTintColor: 'gray',
}); });
const PayatpumpTab = (navigation) => { 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 Home = () => {
const navigation = useNavigation(); const navigation = useNavigation();
const Stack = createStackNavigator(); const Stack = createStackNavigator();
@ -152,7 +150,7 @@ const Home = () => {
}) })
return ( return (
<Stack.Navigator initialRouteName="Home" > <Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" key="Home" component={HomeScreen} options={navOptions} /> <Stack.Screen name="Home" key="Home" component={HomeScreen} options={navOptions} />
<Stack.Screen name="IQAir" key="IQAir" component={IQAir} initialParams={{navigation: navigation}} options={navOptions} /> <Stack.Screen name="IQAir" key="IQAir" component={IQAir} initialParams={{navigation: navigation}} options={navOptions} />
</Stack.Navigator> </Stack.Navigator>
@ -161,12 +159,12 @@ const Home = () => {
export default function App(navigation) { export default function App(navigation) {
return ( return (
<Tab.Navigator initialRouteName="Home" backBehavior="initialRoute" screenOptions={screenOptions} tabBarOptions={tabBarOptions} > <Tab.Navigator initialRouteName="Home" backBehavior="initialRoute" screenOptions={screenOptions}>
<Tab.Screen name="Home" component={Home} options={{ tabBarLabel: 'Home', headerShown: false, tabBarLabelStyle: {bottom: Platform.OS === "android" ? 5 : 0} }} /> <Tab.Screen name="HomeTab" 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.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="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="StationsTab" 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="RewardsTab" component={RewardsScreen} options={{ tabBarLabel: 'Rewards', headerShown: false, tabBarLabelStyle: {bottom: Platform.OS === "android" ? 5 : 0} }} />
</Tab.Navigator> </Tab.Navigator>
); );
} }

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

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import {useState, useEffect} from 'react'; import { useState, useEffect, useRef } from 'react';
import {Divider} from 'react-native-elements'; import { Divider } from 'react-native-elements';
import { import {
Text, Text,
View, View,
@ -11,7 +11,7 @@ import {
Alert, Alert,
} from 'react-native'; } from 'react-native';
import { connect } from 'react-redux'; 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 Theme from '../../../components/theme.style.js';
import Icon from '../../../components/icons'; import Icon from '../../../components/icons';
import DB from '../../../components/storage'; import DB from '../../../components/storage';
@ -40,19 +40,19 @@ const renderStations = (data, onPress, onUpdateFavorite, props) => {
return data.map((station, index) => { return data.map((station, index) => {
// filter the value of key pair if it is empty // filter the value of key pair if it is empty
var filteredAddress = Object.entries(station.address).filter(([key, value]) => { 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}` return `${value}`
}) })
.map(([key, value]) => `${value}`) .map(([key, value]) => `${value}`)
return ( return (
<TouchableOpacity <TouchableOpacity
key={index} key={index}
activeOpacity={1} activeOpacity={1}
onPress={() => onPress(station) || null} onPress={() => onPress(station) || null}
style={{backgroundColor: props.app_theme?.theme.dark ? props.app_theme?.theme.colors.border : Theme.colors.white }}> 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: 0, padding: 15, flexDirection: 'row' }}>
<View style={{flex: 5}}> <View style={{ flex: 5 }}>
<Text <Text
style={{ style={{
fontSize: 16, fontSize: 16,
@ -73,7 +73,7 @@ const renderStations = (data, onPress, onUpdateFavorite, props) => {
</View> </View>
</View> </View>
<Divider <Divider
style={{marginTop: 5, padding: 0, margin: 0, width: Theme.screen.w}} style={{ marginTop: 5, padding: 0, margin: 0, width: Theme.screen.w }}
/> />
</TouchableOpacity> </TouchableOpacity>
); );
@ -107,98 +107,107 @@ const renderStationPanel = (props) => {
const [updatedFavorite, setupdatedfavorite] = useState(false); const [updatedFavorite, setupdatedfavorite] = useState(false);
const [updatedFavoriteIndex, setupdatedfavoriteindex] = useState(null); const [updatedFavoriteIndex, setupdatedfavoriteindex] = useState(null);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [snap, setSnap] = useState(['10', '10', '3']); const [snap, setSnap] = useState(['10%', '10%', '3%']);
const [initialSnap, setInitialSnap] = useState(0) const bottomSheetRef = useRef(null);
useEffect(() => { useEffect(() => {
init(); init();
if (props.visible) {
bottomSheetRef.current?.expand();
} else {
bottomSheetRef.current?.close();
}
}, [props.visible, props.data.length]); }, [props.visible, props.data.length]);
const init = () => { const init = () => {
if (props.visible == true) { if (props.visible == true || props.data.length !== 0) {
if(props.data.length === 1) { if (props.data.length === 1) {
setSnap([Platform.OS === "android" ? '23' : '16', '8', '8']); setSnap([Platform.OS === "android" ? '23%' : '16%', '8%', '8%']);
} else if(props.data.length === 2) { } else if (props.data.length === 2) {
setSnap([Platform.OS === "android" ? '39' : '27', '8', '8']); setSnap([Platform.OS === "android" ? '39%' : '27%', '8%', '8%']);
setInitialSnap(0)
} else { } else {
setSnap(['38', '8', '8']); 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)
} }
} else { } else {
setSnap([Platform.select({ios: '14', android: '12'}), '8', '8']); setSnap([Platform.select({ ios: '14%', android: '12%' }), '8%', '8%']);
setInitialSnap(2)
} }
}; };
const getPanelTitle = () => { const getPanelTitle = () => {
if(props.error) return 'There was an error' 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 'Getting Nearby Stations'
else if(!props.loading && !props.isSearched && props.data.length == 0) return 'No Nearby Stations Found' 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 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) else return 'Unioil Stations found: ' + (props.data.length > 0 ? props.data.length : 0)
} }
const renderHeaders = () => { const renderHeaders = () => (
return ( <View style={styles.panel}>
<View style={styles.panel}> <View style={[styles.panelHeader, { backgroundColor: props.app_theme?.theme.dark ? Theme.colors.darkGray : Theme.colors.lightGray }]}>
<View style={[styles.panelHeader, { backgroundColor: props.app_theme?.theme.dark ? Theme.colors.darkGray : Theme.colors.lightGray }]}> <View
<View style={{
flexDirection: 'row',
justifyContent: 'center',
padding: 15,
}}>
<Text
style={{ style={{
flexDirection: 'row', flex: 4,
justifyContent: 'center', padding: 5,
padding: 15, color: props.app_theme?.theme.colors.text,
fontSize: 15,
}}> }}>
<Text {getPanelTitle()}
style={{ </Text>
flex: 4, <View style={{ flex: 0, justifyContent: 'center' }}>
padding: 5, {props.error ? (
color: props.app_theme?.theme.colors.text, <TouchableOpacity onPress={props.onError} activeOpacity={1}>
fontSize: 15, <Text style={{ color: '#fff' }}>Try Again</Text>
}}> </TouchableOpacity>
{getPanelTitle()} ) : props.loading ? (
</Text> <ActivityIndicator color={Theme.colors.primary} size={25} />
<View style={{flex: 0, justifyContent: 'center'}}> ) : null}
{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> </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 ( return (
<BottomSheet <BottomSheet
snapPoints={snap} ref={bottomSheetRef}
renderContent={renderContents} snapPoints={snap}
enabledBottomInitialAnimation={true} enablePanDownToClose={true}
enabledInnerScrolling={true} index={props.visible ? 1 : -1}
initialSnap={0} >
renderHeader={renderHeaders}/> {renderHeaders()}
{renderContents()}
</BottomSheet>
); );
} }

5
babel.config.js
View File

@ -1,7 +1,10 @@
module.exports = { module.exports = {
presets: ['module:metro-react-native-babel-preset'], presets: ['module:metro-react-native-babel-preset'],
plugins: [ plugins: [
'react-native-reanimated/plugin',
['@babel/plugin-transform-runtime', { useESModules: true }], ['@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" "postinstall": "patch-package"
}, },
"dependencies": { "dependencies": {
"@gorhom/bottom-sheet": "^4",
"@react-native-async-storage/async-storage": "1.19.3", "@react-native-async-storage/async-storage": "1.19.3",
"@react-native-community/art": "^1.2.0", "@react-native-community/art": "^1.2.0",
"@react-native-community/datetimepicker": "7.6.3", "@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: dependencies:
tslib "^2.8.0" 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": "@hapi/hoek@^9.0.0", "@hapi/hoek@^9.3.0":
version "9.3.0" version "9.3.0"
resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-9.3.0.tgz#8368869dcb735be2e7f5cb7647de78e167a251fb" 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" resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA== integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
nanoid@^3.1.23: nanoid@^3.1.23, nanoid@^3.3.1:
version "3.3.11" version "3.3.11"
resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.11.tgz#4f4f112cefbe303202f2199838128936266d185b" resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.11.tgz#4f4f112cefbe303202f2199838128936266d185b"
integrity sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w== integrity sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==