Drawer, loading and home action create

App.js

@@ -4,20 +4,19 @@ import {Provider} from 'react-redux';
 import store from './src/store/store';
 import Routes from './src/Routes/Routes';
 import SplashScreen from 'react-native-splash-screen';
-import { NativeBaseProvider } from 'native-base';
-
+import {NativeBaseProvider} from 'native-base';
+import {SafeAreaProvider} from 'react-native-safe-area-context';
 
 const App = () => {
   useEffect(() => {
-    // setTimeout(() => {
-    // }, 2000);
     SplashScreen.hide();
-    // SplashScreen.hide();
   }, []);
   return (
     <Provider store={store}>
-    <NativeBaseProvider>
-      <Routes />
+      <NativeBaseProvider>
+        <SafeAreaProvider>
+          <Routes />
+        </SafeAreaProvider>
       </NativeBaseProvider>
     </Provider>
   );

babel.config.js

 module.exports = {
   presets: ['module:metro-react-native-babel-preset'],
+  plugins: ['react-native-reanimated/plugin'],
 };

index.js

 /**
  * @format
  */
-
+import 'react-native-gesture-handler';
 import {AppRegistry} from 'react-native';
 import App from './App';
 import {name as appName} from './app.json';

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@react-native-async-storage/async-storage": "^1.17.5",
+    "@react-navigation/drawer": "^6.4.1",
     "@react-navigation/native": "^6.0.10",
     "@react-navigation/native-stack": "^6.6.2",
     "@reduxjs/toolkit": "^1.8.1",
@@ -20,7 +21,9 @@
     "react": "17.0.2",
     "react-i18next": "^11.16.9",
     "react-native": "0.68.2",
+    "react-native-gesture-handler": "^2.4.2",
     "react-native-keyboard-aware-scroll-view": "^0.9.5",
+    "react-native-reanimated": "^2.8.0",
     "react-native-restart": "^0.0.24",
     "react-native-safe-area-context": "^4.2.5",
     "react-native-screens": "^3.13.1",

src/Components/CustomDrawer/CustomDrawer.js

+import {
+  View,
+  Text,
+  ImageBackground,
+  Image,
+  TouchableOpacity,
+} from 'react-native';
+import React from 'react';
+import {
+  DrawerContentScrollView,
+  DrawerItemList,
+} from '@react-navigation/drawer';
+
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
+import {useDispatch} from 'react-redux';
+import {logout} from '../../store/Reducers/authReducer';
+
+const CustomDrawer = props => {
+  const dispatch = useDispatch();
+  return (
+    <View style={{flex: 1}}>
+      <DrawerContentScrollView
+        {...props}
+        contentContainerStyle={{backgroundColor: '#8200d6'}}>
+        <ImageBackground
+          source={require('../../Assets/images/menu-bg.jpeg')}
+          style={{padding: 30}}>
+          <Image
+            source={require('../../Assets/images/user-profile.jpeg')}
+            style={{height: 80, width: 80, borderRadius: 40, marginBottom: 10}}
+          />
+          <Text
+            style={{
+              color: '#fff',
+              fontSize: 18,
+              fontFamily: 'Roboto-Medium',
+              marginBottom: 5,
+            }}>
+            John Doe
+          </Text>
+          <View style={{flexDirection: 'row'}}>
+            <Text
+              style={{
+                color: '#fff',
+                fontFamily: 'Roboto-Regular',
+                marginRight: 5,
+              }}>
+              280 Coins
+            </Text>
+            <FontAwesome5 name="coins" size={14} color="#fff" />
+          </View>
+        </ImageBackground>
+        <View style={{flex: 1, backgroundColor: '#fff', paddingTop: 10}}>
+          <DrawerItemList {...props} />
+        </View>
+      </DrawerContentScrollView>
+      <View style={{padding: 20, borderTopWidth: 1, borderTopColor: '#ccc'}}>
+        <TouchableOpacity onPress={() => {}} style={{paddingVertical: 15}}>
+          <View style={{flexDirection: 'row', alignItems: 'center'}}>
+            <Ionicons name="share-social-outline" size={22} />
+            <Text
+              style={{
+                fontSize: 15,
+                fontFamily: 'Roboto-Medium',
+                marginLeft: 5,
+              }}>
+              Tell a Friend
+            </Text>
+          </View>
+        </TouchableOpacity>
+        <TouchableOpacity
+          onPress={() => {
+            dispatch(logout());
+          }}
+          style={{paddingVertical: 15}}>
+          <View style={{flexDirection: 'row', alignItems: 'center'}}>
+            <Ionicons name="exit-outline" size={22} />
+            <Text
+              style={{
+                fontSize: 15,
+                fontFamily: 'Roboto-Medium',
+                marginLeft: 5,
+              }}>
+              Sign Out
+            </Text>
+          </View>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};
+
+export default CustomDrawer;

src/Components/Loading/Loading.js

+import {View, Text} from 'react-native';
+import React from 'react';
+import LottieView from 'lottie-react-native';
+
+const Loading = ({style}) => {
+  return (
+    <LottieView
+      style={style}
+      source={require('../../Assets/loading.json')}
+      autoPlay
+      loop
+      // width={180}
+      // height={300}
+      // stop={true}
+      // speed={1.5}
+    />
+  );
+};
+
+export default Loading;

src/Routes/Routes.js

@@ -4,25 +4,38 @@ import {NavigationContainer} from '@react-navigation/native';
 import {createNativeStackNavigator} from '@react-navigation/native-stack';
 import SplashScreenComp from '../Components/SplashScreen/SplashScreen';
 import Login from '../Screens/Login/Login';
+import {createDrawerNavigator} from '@react-navigation/drawer';
+import Home from '../Screens/Home/Home';
+import {useSelector, useDispatch} from 'react-redux';
+import CustomDrawer from '../Components/CustomDrawer/CustomDrawer';
 
 const Stack = createNativeStackNavigator();
+const Drawer = createDrawerNavigator();
 
 const Routes = () => {
+  const {loading, user, isLogin} = useSelector(state => state.authentication);
+  console.log(isLogin, 'isLogin');
   return (
-    <NavigationContainer>
-      <Stack.Navigator>
-        {/* <Stack.Screen
-          name="Home"
-          component={SplashScreenComp}
-          options={{headerShown: false}}
-        /> */}
-        <Stack.Screen
-          name="Login"
-          component={Login}
-          options={{headerShown: false}}
-        />
-      </Stack.Navigator>
-    </NavigationContainer>
+    <>
+      <NavigationContainer>
+        {!isLogin ? (
+          <Stack.Navigator>
+            <Stack.Screen
+              name="Login"
+              component={Login}
+              options={{headerShown: false}}
+            />
+          </Stack.Navigator>
+        ) : (
+          <Drawer.Navigator
+            drawerContent={props => <CustomDrawer {...props} />}>
+            {/* <Drawer.Screen name="Login" component={Login} /> */}
+            <Drawer.Screen name="Home" component={Home} />
+            <Drawer.Screen name="Login" component={Login} />
+          </Drawer.Navigator>
+        )}
+      </NavigationContainer>
+    </>
   );
 };
 

src/Screens/Home/Home.js

+import {View, Text} from 'react-native';
+import React from 'react';
+
+const Home = () => {
+  return (
+    <View>
+      <Text>Home</Text>
+    </View>
+  );
+};
+
+export default Home;

src/Screens/Login/Login.js

@@ -7,6 +7,7 @@ import {
   I18nManager,
   Button,
   TouchableOpacity,
+  ToastAndroid,
 } from 'react-native';
 import React, {useEffect} from 'react';
 import styles from './style';
@@ -19,11 +20,21 @@ import RNRestart from 'react-native-restart';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import {default as AntDesignIcon} from 'react-native-vector-icons/AntDesign';
 import LottieView from 'lottie-react-native';
+import {useDispatch, useSelector} from 'react-redux';
+import {login} from '../../store/Reducers/authReducer';
+import Loading from '../../Components/Loading/Loading';
 
 const Login = () => {
+  const dispatch = useDispatch();
+  const {loading, user, isLogin} = useSelector(state => state.authentication);
   const [text, setText] = useState();
   const [animation, setAnimation] = useState(true);
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
   const {t, i18n} = useTranslation();
+
+  // Multi Language Function
+
   useEffect(() => {
     setTimeout(() => {
       setAnimation(false);
@@ -32,7 +43,6 @@ const Login = () => {
     const getData = async () => {
       try {
         const value = await AsyncStorage.getItem('language');
-        console.log(value, 'This is get value');
         if (value !== null) {
           if (value === 'en') {
             I18nManager.forceRTL(false);
@@ -74,17 +84,39 @@ const Login = () => {
       console.log(e);
     }
   };
+  //  Multi Language Function End ==================
+
+  // Toast Function Start
+
+  const showToastWithGravityAndOffset = message => {
+    ToastAndroid.showWithGravityAndOffset(
+      `${message}`,
+      ToastAndroid.LONG,
+      ToastAndroid.BOTTOM,
+      15,
+      10,
+    );
+  };
+  //  Toast Function End ==================
+
+  const handleLogin = () => {
+    let data = {
+      email: email,
+      password: password,
+    };
+    dispatch(login({data, showToastWithGravityAndOffset}));
+  };
 
   return (
     // <KeyboardAwareScrollView>
-
-      // {/* <Button onPress={() => english()} title="English" color="#841584" />
-      // <Button
-      //   style={{marginTop: 210}}
-      //   onPress={() => urdu()}
-      //   title="URDU"
-      //   color="#000"
-      // /> */}
+    <>
+      {/* <Button onPress={() => english()} title="English" color="#841584" />
+      <Button
+        style={{marginTop: 210}}
+        onPress={() => urdu()}
+        title="URDU"
+        color="#000"
+      /> */}
       <View style={styles.container}>
         <View style={styles.imgContainer}>
           <Image
@@ -105,25 +137,29 @@ const Login = () => {
           <View style={styles.passwordInput}>
             <TextInput
               style={styles.input}
-              onChangeText={() => setText()}
-              value={text}
+              value={email}
               placeholder={t('username')}
+              onChangeText={setEmail}
             />
           </View>
           <View style={styles.passwordInput}>
             <TextInput
               style={[styles.input, I18nManager.isRTL ? 'right' : 'left']}
-              onChangeText={() => setText()}
+              onChangeText={setPassword}
               value={text}
               placeholder={t('password')}
               // secureTextEntry={true}
             />
           </View>
         </View>
-        <TouchableOpacity style={styles.buttonContainer}>
+        <TouchableOpacity style={styles.buttonContainer} onPress={handleLogin}>
           <AntDesignIcon name="right" style={styles.buttonIcon} />
         </TouchableOpacity>
+        {!loading && (
+          <Loading style={styles.loading} />
+        )}
       </View>
+    </>
     // </KeyboardAwareScrollView>
   );
 };

src/Screens/Login/style.js

+import { width } from 'cli-color';
 import {StyleSheet} from 'react-native';
 
 const styles = StyleSheet.create({
@@ -6,6 +7,7 @@ const styles = StyleSheet.create({
     paddingLeft: 30,
     paddingRight: 30,
     justifyContent: 'center',
+    position: "relative"
     // alignItems: 'center',
   },
   imgContainer: {
@@ -54,6 +56,15 @@ const styles = StyleSheet.create({
     fontSize: 26,
     color: 'white',
   },
+  loadingContainer: {
+    // flex: 1,
+    // position: "absolute",
+    // width: 200,
+    // backgroundColor: rgba(255, 255, 255, 0.4),
+  },
+  loading: {
+    position: "absolute",
+  }
 });
 
 export default styles;

src/store/Reducers/authReducer.js

+import {createSlice} from '@reduxjs/toolkit';
+import {Button, useToast, Box, Center, NativeBaseProvider} from 'native-base';
+import React from 'react';
+
+export const authSlice = createSlice({
+  name: 'authentication',
+  initialState: {
+    loading: false,
+    isLogin: true,
+    user: {},
+  },
+  reducers: {
+    login(state, action) {
+      state.loading = true;
+      const {email, password} = action.payload.data;
+
+      if (email.length > 1) {
+        if (email === 'ameen' && password === '123') {
+          state.isLogin = true;
+        } else {
+          console.log('fail email test');
+          state.loading = false;
+          state.isLogin = false;
+          action.payload.showToastWithGravityAndOffset(
+            'Invalid Email or Password',
+          );
+        }
+      } else {
+        action.payload.showToastWithGravityAndOffset(
+          'Enter email and pasword to continue',
+        );
+        state.loading = false;
+      }
+    },
+    logout(state, action) {
+      console.log("Logout")
+      state.isLogin = false;
+    },
+  },
+});
+// each case under reducers becomes an action
+export const {login, logout} = authSlice.actions;
+export default authSlice.reducer;

src/store/store.js

-import { configureStore, applyMiddleware } from "@reduxjs/toolkit";
-import thunk from "redux-thunk";
-import counterSlice from "./Reducers/counterReducer";
-import cartSlice from "./Reducers/cartReducer";
+import {configureStore, applyMiddleware} from '@reduxjs/toolkit';
+import thunk from 'redux-thunk';
+import counterSlice from './Reducers/counterReducer';
+import cartSlice from './Reducers/cartReducer';
+import authSlice from './Reducers/authReducer';
 
 const store = configureStore({
   reducer: {
     counter: counterSlice,
     cart: cartSlice,
+    authentication: authSlice,
   }, //add reducers here
+  middleware: getDefaultMiddleware =>
+    getDefaultMiddleware({
+      serializableCheck: false,
+    }),
 });
 
 export default store;

yarn.lock

@@ -557,7 +557,7 @@
     "@babel/helper-simple-access" "^7.17.7"
     "babel-plugin-dynamic-import-node" "^2.3.3"
 
-"@babel/plugin-transform-object-assign@^7.0.0":
+"@babel/plugin-transform-object-assign@^7.0.0", "@babel/plugin-transform-object-assign@^7.16.7":
   "integrity" "sha512-R8mawvm3x0COTJtveuoqZIjNypn2FjfvXZr4pSQ8VhEFBuQGBz4XhHasZtHXjgXU4XptZ4HtGof3NoYc93ZH9Q=="
   "resolved" "https://registry.npmjs.org/@babel/plugin-transform-object-assign/-/plugin-transform-object-assign-7.16.7.tgz"
   "version" "7.16.7"
@@ -693,7 +693,7 @@
     "@babel/helper-validator-option" "^7.16.7"
     "@babel/plugin-transform-flow-strip-types" "^7.17.12"
 
-"@babel/preset-typescript@^7.13.0":
+"@babel/preset-typescript@^7.13.0", "@babel/preset-typescript@^7.16.7":
   "integrity" "sha512-S1ViF8W2QwAKUGJXxP9NAfNaqGDdEBJKpYkxHf5Yy2C4NPPzXGeR3Lhk7G8xJaaLcFTRfNjVbtbVtm8Gb0mqvg=="
   "resolved" "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.17.12.tgz"
   "version" "7.17.12"
@@ -766,6 +766,13 @@
     "exec-sh" "^0.3.2"
     "minimist" "^1.2.0"
 
+"@egjs/hammerjs@^2.0.17":
+  "integrity" "sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A=="
+  "resolved" "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz"
+  "version" "2.0.17"
+  dependencies:
+    "@types/hammerjs" "^2.0.36"
+
 "@eslint/eslintrc@^0.4.3":
   "integrity" "sha512-J6KFFz5QCYUJq3pf0mjEcCJVERbzv71PUIDczuh9JkwGEzced6CO5ADLHB1rbf/+oPBtoPfMYNOpGDzCANlbXw=="
   "resolved" "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.3.tgz"
@@ -1722,6 +1729,15 @@
     "query-string" "^7.0.0"
     "react-is" "^16.13.0"
 
+"@react-navigation/drawer@^6.4.1":
+  "integrity" "sha512-CTVkiyhytUr4hUvWH8mEEGZ2BLcbFfWCHhanKisMBdq6qXMOIXoMX7AzOvjP8ojI1pvJZenvs8fopembGwUNUA=="
+  "resolved" "https://registry.npmjs.org/@react-navigation/drawer/-/drawer-6.4.1.tgz"
+  "version" "6.4.1"
+  dependencies:
+    "@react-navigation/elements" "^1.3.3"
+    "color" "^3.1.3"
+    "warn-once" "^0.1.0"
+
 "@react-navigation/elements@^1.3.3":
   "integrity" "sha512-Lv2lR7si5gNME8dRsqz57d54m4FJtrwHRjNQLOyQO546ZxO+g864cSvoLC6hQedQU0+IJnPTsZiEI2hHqfpEpw=="
   "resolved" "https://registry.npmjs.org/@react-navigation/elements/-/elements-1.3.3.tgz"
@@ -2157,6 +2173,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/hammerjs@^2.0.36":
+  "integrity" "sha512-ewXv/ceBaJprikMcxCmWU1FKyMAQ2X7a9Gtmzw8fcg2kIePI1crERDM818W+XYrxqdBBOdlf2rm137bU+BltCA=="
+  "resolved" "https://registry.npmjs.org/@types/hammerjs/-/hammerjs-2.0.41.tgz"
+  "version" "2.0.41"
+
 "@types/hoist-non-react-statics@^3.3.1":
   "integrity" "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA=="
   "resolved" "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz"
@@ -2165,6 +2186,11 @@
     "@types/react" "*"
     "hoist-non-react-statics" "^3.3.0"
 
+"@types/invariant@^2.2.35":
+  "integrity" "sha512-DxX1V9P8zdJPYQat1gHyY0xj3efl8gnMVjiM9iCY6y27lj+PoQWkgjt8jDqmovPqULkKVpKRg8J36iQiA+EtEg=="
+  "resolved" "https://registry.npmjs.org/@types/invariant/-/invariant-2.2.35.tgz"
+  "version" "2.2.35"
+
 "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1":
   "integrity" "sha512-z/QT1XN4K4KYuslS23k62yDIDLwLFkzxOuMplDtObz0+y7VqJCaO2o+SPwHCvLFZh7xazvvoor2tA/hPz9ee7g=="
   "resolved" "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz"
@@ -3091,6 +3117,13 @@
   dependencies:
     "color-name" "1.1.3"
 
+"color-convert@^1.9.3":
+  "integrity" "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg=="
+  "resolved" "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz"
+  "version" "1.9.3"
+  dependencies:
+    "color-name" "1.1.3"
+
 "color-convert@^2.0.1":
   "integrity" "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ=="
   "resolved" "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz"
@@ -3098,7 +3131,7 @@
   dependencies:
     "color-name" "~1.1.4"
 
-"color-name@~1.1.4":
+"color-name@^1.0.0", "color-name@~1.1.4":
   "integrity" "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
   "resolved" "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz"
   "version" "1.1.4"
@@ -3108,6 +3141,22 @@
   "resolved" "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz"
   "version" "1.1.3"
 
+"color-string@^1.6.0":
+  "integrity" "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg=="
+  "resolved" "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz"
+  "version" "1.9.1"
+  dependencies:
+    "color-name" "^1.0.0"
+    "simple-swizzle" "^0.2.2"
+
+"color@^3.1.3":
+  "integrity" "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA=="
+  "resolved" "https://registry.npmjs.org/color/-/color-3.2.1.tgz"
+  "version" "3.2.1"
+  dependencies:
+    "color-convert" "^1.9.3"
+    "color-string" "^1.6.0"
+
 "colorette@^1.0.7":
   "integrity" "sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g=="
   "resolved" "https://registry.npmjs.org/colorette/-/colorette-1.4.0.tgz"
@@ -4539,6 +4588,11 @@
   "resolved" "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz"
   "version" "0.2.1"
 
+"is-arrayish@^0.3.1":
+  "integrity" "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
+  "resolved" "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz"
+  "version" "0.3.2"
+
 "is-bigint@^1.0.1":
   "integrity" "sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg=="
   "resolved" "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz"
@@ -5606,7 +5660,7 @@
   "resolved" "https://registry.npmjs.org/lodash.truncate/-/lodash.truncate-4.4.2.tgz"
   "version" "4.4.2"
 
-"lodash@^4.17.10", "lodash@^4.17.14", "lodash@^4.17.15", "lodash@^4.7.0":
+"lodash@^4.17.10", "lodash@^4.17.14", "lodash@^4.17.15", "lodash@^4.17.21", "lodash@^4.7.0":
   "integrity" "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
   "resolved" "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz"
   "version" "4.17.21"
@@ -6786,6 +6840,17 @@
     "jscodeshift" "^0.13.1"
     "nullthrows" "^1.1.1"
 
+"react-native-gesture-handler@^2.4.2", "react-native-gesture-handler@>= 1.0.0":
+  "integrity" "sha512-K3oMiQV7NOVB5RvNlxkyJxU1Gn6m1cYu53MoFA542FVDSTR491d1eQkWDdqy4lW52rfF7IK7eE1LCi+kTJx7jw=="
+  "resolved" "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.4.2.tgz"
+  "version" "2.4.2"
+  dependencies:
+    "@egjs/hammerjs" "^2.0.17"
+    "hoist-non-react-statics" "^3.3.0"
+    "invariant" "^2.2.4"
+    "lodash" "^4.17.21"
+    "prop-types" "^15.7.2"
+
 "react-native-gradle-plugin@^0.0.6":
   "integrity" "sha512-eIlgtsmDp1jLC24dRn43hB3kEcZVqx6DUQbR0N1ABXGnMEafm9I3V3dUUeD1vh+Dy5WqijSoEwLNUPLgu5zDMg=="
   "resolved" "https://registry.npmjs.org/react-native-gradle-plugin/-/react-native-gradle-plugin-0.0.6.tgz"
@@ -6804,6 +6869,19 @@
     "prop-types" "^15.6.2"
     "react-native-iphone-x-helper" "^1.0.3"
 
+"react-native-reanimated@^2.8.0", "react-native-reanimated@>= 1.0.0":
+  "integrity" "sha512-kJvf/UWLBMaGCs9X66MKq5zdFMgwx8D0nHnolbHR7s8ZnbLdb7TlQ/yuzIXqn/9wABfnwtNRI3CyaP1aHWMmZg=="
+  "resolved" "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-2.8.0.tgz"
+  "version" "2.8.0"
+  dependencies:
+    "@babel/plugin-transform-object-assign" "^7.16.7"
+    "@babel/preset-typescript" "^7.16.7"
+    "@types/invariant" "^2.2.35"
+    "invariant" "^2.2.4"
+    "lodash.isequal" "^4.5.0"
+    "setimmediate" "^1.0.5"
+    "string-hash-64" "^1.0.3"
+
 "react-native-restart@^0.0.24":
   "integrity" "sha512-pvJNU3NwQk6bCG2gOWcQpZ4IxhtELB0K9gzmtixfsaTFbW1UXXHkJNjk1kHazcbH5hrD7QbUkR63fsAVh8X4VQ=="
   "resolved" "https://registry.npmjs.org/react-native-restart/-/react-native-restart-0.0.24.tgz"
@@ -7360,6 +7438,11 @@
     "is-plain-object" "^2.0.3"
     "split-string" "^3.0.1"
 
+"setimmediate@^1.0.5":
+  "integrity" "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU="
+  "resolved" "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz"
+  "version" "1.0.5"
+
 "setprototypeof@1.2.0":
   "integrity" "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
   "resolved" "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz"
@@ -7439,6 +7522,13 @@
     "bplist-parser" "0.3.1"
     "plist" "^3.0.5"
 
+"simple-swizzle@^0.2.2":
+  "integrity" "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo="
+  "resolved" "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz"
+  "version" "0.2.2"
+  dependencies:
+    "is-arrayish" "^0.3.1"
+
 "sisteransi@^1.0.5":
   "integrity" "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg=="
   "resolved" "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz"
@@ -7645,6 +7735,11 @@
   dependencies:
     "safe-buffer" "~5.1.0"
 
+"string-hash-64@^1.0.3":
+  "integrity" "sha512-D5OKWKvDhyVWWn2x5Y9b+37NUllks34q1dCDhk/vYcso9fmhs+Tl3KR/gE4v5UNj2UA35cnX4KdVVGkG1deKqw=="
+  "resolved" "https://registry.npmjs.org/string-hash-64/-/string-hash-64-1.0.3.tgz"
+  "version" "1.0.3"
+
 "string-length@^4.0.1":
   "integrity" "sha512-+l6rNN5fYHNhZZy41RXsYptCjA2Igmq4EG7kZAYFQI1E1VTXarr6ZPXBg6eq7Y6eK4FEhY6AJlyuFIb/v/S0VQ=="
   "resolved" "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz"