migrate BottomSheet

app/components/navigationapps/NavigationApps.js

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

app/screens/iqair/index.js

@@ -2,7 +2,7 @@ import React, { useEffect } from 'react'
 import CustomSafeArea from '../../components/safeArea.component';
 import Navigation from './Navigation';
 
-const index = (props) => {
+const Index = (props) => {
   
   
   useEffect(() => {
@@ -19,4 +19,4 @@ const index = (props) => {
   )
 }
 
-export default index
+export default Index

app/screens/main/promo/promos.js

@@ -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}
+            disabled={true}
-            height={Theme.screen.w * .65} 
+            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}} />
+            image={{uri: data.image}} 
+          />
         </Elements.shadowView>
-    })
+      );
-  }
+    });
+  };
 
   if(!connected){
     return (

app/screens/main/station/fragments/bottomsheet.js

@@ -1,5 +1,5 @@
 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 Theme from '../../../../components/theme.style.js';
 import Assets from '../../../../components/assets.manager.js';
@@ -7,7 +7,7 @@ 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 BottomSheet from '@gorhom/bottom-sheet';
 
 import Geolocation from '@react-native-community/geolocation';
 import MapView, { PROVIDER_GOOGLE, Marker } from 'react-native-maps';
@@ -35,7 +35,7 @@ const styles = {
 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 name = station.stars >= star ? "star" : "staro"
@@ -92,24 +92,26 @@ const updateFavorite = async (city, index, callback) => {
 
 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()
+      bottomSheetRef.current?.expand();
+    } else {
+      bottomSheetRef.current?.close(); 
     }
-    return setpanel(null)
+  }, [props.visible]);
-  }, [props.visible])
 
   return (
     <View style={styles.container}>
       <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 }}>
             <Text style={{ flex: 4, padding: 5, color: Theme.colors.textPrimary, fontSize: 15 }}>
@@ -123,9 +125,8 @@ export default function renderStationPanel(props){
             </View>
           </View>
         </View>
-            )
+        {renderStations(props.isGuest, props.data, props.onClick, props.onUpdateFavorite)}
-          }}
+      </BottomSheet>
-        />
     </View >
   )
 }

app/screens/main/station/fragments/stationdetailspanel.js

@@ -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,17 +44,17 @@ 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()
+      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) => {
@@ -182,15 +182,11 @@ const renderStationPanel = (props) => {
   return (
     <View style={{ flex: 1 }}>
       <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}
-        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' }}>
@@ -219,9 +215,8 @@ const renderStationPanel = (props) => {
             </View>
           </View>
         </View>
-          )
+        {renderStationDetails(props.data, props.onClick)}
-        }
+      </BottomSheet>
-      }/>
     </View>
   );
 }

app/screens/main/station/fragments/stationpanel.js

@@ -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']);
+      if (Platform.OS === 'android') {
-
+        setSnap(['14%', '14%', '3%']);
-      return 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']);
       } else {
-      return setSnap(props.snapPoints ? props.snapPoints : ['14', '14', '14']);
+        setSnap(['14%', '14%', '14%']);
+      }
+    } else if (props.data.length === 1) {
+      setSnap(['22%', '22%', '22%']);
+    } else if (props.data.length > 1) {
+      setSnap(['35%', '8%', '8%']);
+    } else {
+      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 = () => {
+  const renderHeaders = () => (
-    return (
       <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 = () => {
+    const renderContents = () => (
-    return (
+      <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 }}></View>}
+          {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}
+        enablePanDownToClose={true}
-        enabledBottomInitialAnimation={true}
+        index={props.visible ? 1 : -1}
-        enabledInnerScrolling={true}
+      >
-        renderHeader={renderHeaders} />
+        {renderHeaders()}
+        {renderContents()}
+      </BottomSheet>
     </View>
   );
 }

app/screens/main/tab.js

@@ -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();
@@ -161,12 +159,12 @@ const Home = () => {
 
 export default function App(navigation) {
   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="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>
   );
 }

app/screens/payatpump/fragments/stationpanel.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import {useState, useEffect} from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { Divider } from 'react-native-elements';
 import {
   Text,
@@ -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';
@@ -107,37 +107,30 @@ 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 [snap, setSnap] = useState(['10%', '10%', '3%']); 
-  const [initialSnap, setInitialSnap] = useState(0)
+  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.visible == true || props.data.length !== 0) {
       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) {
-        setSnap([Platform.OS === "android" ?  '39' : '27', '8', '8']);
+        setSnap([Platform.OS === "android" ? '39%' : '27%', '8%', '8%']);
-        setInitialSnap(0)
       } 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']);
+      setSnap([Platform.select({ ios: '14%', android: '12%' }), '8%', '8%']);
-        setInitialSnap(0)
-      }
-    } else {
-      setSnap([Platform.select({ios: '14', android: '12'}), '8', '8']);
-      setInitialSnap(2)
     }
   };
 
@@ -149,8 +142,7 @@ const renderStationPanel = (props) => {
     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.panelHeader, { backgroundColor: props.app_theme?.theme.dark ? Theme.colors.darkGray : Theme.colors.lightGray }]}>
         <View
@@ -181,24 +173,41 @@ const renderStationPanel = (props) => {
       </View>
     </View>
   );
-  };
 
-  const renderContents = () => {
+
-    return (
+  const renderContents = () => (
-      <SafeAreaView style={props.data.length < 3 && { height: '100%', backgroundColor: 'white'}}>
+    <BottomSheetScrollView 
-        {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>}
+      style={{
-      </SafeAreaView>
+        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>
   );
-  };
+
 
   return (
     <BottomSheet
+      ref={bottomSheetRef}
       snapPoints={snap} 
-      renderContent={renderContents} 
+      enablePanDownToClose={true} 
-      enabledBottomInitialAnimation={true}
+      index={props.visible ? 1 : -1} 
-      enabledInnerScrolling={true}
+    >
-      initialSnap={0}
+      {renderHeaders()}
-      renderHeader={renderHeaders}/>
+      {renderContents()}
+    </BottomSheet>
   );
 }
 

babel.config.js

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

package.json

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

patches/react-native-snap-carousel+3.9.1.patch

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

yarn.lock

@@ -1209,6 +1209,21 @@
   dependencies:
     tslib "^2.8.0"
 
+"@gorhom/bottom-sheet@^4":
+  version "4.6.4"
+  resolved "https://registry.yarnpkg.com/@gorhom/bottom-sheet/-/bottom-sheet-4.6.4.tgz#387d0f0f21e3470eb8575498cb81ce96f5108e79"
+  integrity sha512-0itLMblLBvepE065w3a60S030c2rNUsGshPC7wbWDm31VyqoaU2xjzh/ojH62YIJOcobBr5QoC30IxBBKDGovQ==
+  dependencies:
+    "@gorhom/portal" "1.0.14"
+    invariant "^2.2.4"
+
+"@gorhom/portal@1.0.14":
+  version "1.0.14"
+  resolved "https://registry.yarnpkg.com/@gorhom/portal/-/portal-1.0.14.tgz#1953edb76aaba80fb24021dc774550194a18e111"
+  integrity sha512-MXyL4xvCjmgaORr/rtryDNFy3kU4qUbKlwtQqqsygd0xX3mhKjOLn6mQK8wfu0RkoE0pBE0nAasRoHua+/QZ7A==
+  dependencies:
+    nanoid "^3.3.1"
+
 "@hapi/hoek@^9.0.0", "@hapi/hoek@^9.3.0":
   version "9.3.0"
   resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-9.3.0.tgz#8368869dcb735be2e7f5cb7647de78e167a251fb"
@@ -7172,7 +7187,7 @@ ms@2.1.3, ms@^2.1.3:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
 
-nanoid@^3.1.23:
+nanoid@^3.1.23, nanoid@^3.3.1:
   version "3.3.11"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.11.tgz#4f4f112cefbe303202f2199838128936266d185b"
   integrity sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==