chore: upgrade dependencies

Author: satya164

example/package.json

@@ -10,25 +10,25 @@
     "web": "expo start:web"
   },
   "dependencies": {
-    "@expo/vector-icons": "^12.0.4",
-    "@react-native-async-storage/async-storage": "^1.15.1",
-    "expo": "^41.0.0-beta.2",
-    "expo-asset": "~8.3.1",
-    "expo-constants": "~10.1.1",
-    "expo-keep-awake": "~9.1.1",
+    "@expo/vector-icons": "^12.0.0",
+    "@react-native-async-storage/async-storage": "~1.15.0",
+    "expo": "^42.0.0",
+    "expo-asset": "~8.3.3",
+    "expo-constants": "~11.0.1",
+    "expo-keep-awake": "~9.2.0",
     "react": "16.13.1",
     "react-dom": "16.13.1",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
     "react-native-pager-view": "^5.0.12",
     "react-native-safe-area-context": "3.2.0",
-    "react-native-web": "~0.15.5"
+    "react-native-web": "~0.17.1"
   },
   "devDependencies": {
-    "@types/react": "~16.9.35",
-    "@types/react-native": "~0.63.2",
+    "@types/react": "~17.0.15",
+    "@types/react-native": "~0.64.12",
     "babel-plugin-module-resolver": "^4.0.0",
-    "babel-preset-expo": "8.3.0",
-    "expo-cli": "^4.3.4",
-    "typescript": "~4.2.3"
+    "babel-preset-expo": "^8.4.1",
+    "expo-cli": "^4.9.0",
+    "typescript": "^4.3.5"
   }
 }

example/src/App.tsx

@@ -36,7 +36,7 @@ type ExampleComponentType = React.ComponentType<{}> & {
   appbarElevation?: number;
 };
 
-I18nManager.forceRTL(true);
+I18nManager.forceRTL(false);
 
 const PERSISTENCE_KEY = 'index_persistence';
 

example/src/CustomIndicatorExample.tsx

@@ -56,17 +56,7 @@ export default class CustomIndicatorExample extends React.Component<{}, State> {
   ) => {
     const { position, navigationState, getTabWidth } = props;
     const inputRange = [
-      0,
-      0.48,
-      0.49,
-      0.51,
-      0.52,
-      1,
-      1.48,
-      1.49,
-      1.51,
-      1.52,
-      2,
+      0, 0.48, 0.49, 0.51, 0.52, 1, 1.48, 1.49, 1.51, 1.52, 2,
     ];
 
     const scale = position.interpolate({

example/src/CustomTabBarExample.tsx

@@ -49,47 +49,49 @@ export default class CustomTabBarExample extends React.Component<{}, State> {
       index,
     });
 
-  private renderItem = ({
-    navigationState,
-    position,
-  }: {
-    navigationState: State;
-    position: Animated.AnimatedInterpolation;
-  }) => ({ route, index }: { route: Route; index: number }) => {
-    const inputRange = navigationState.routes.map((_, i) => i);
+  private renderItem =
+    ({
+      navigationState,
+      position,
+    }: {
+      navigationState: State;
+      position: Animated.AnimatedInterpolation;
+    }) =>
+    ({ route, index }: { route: Route; index: number }) => {
+      const inputRange = navigationState.routes.map((_, i) => i);
 
-    const activeOpacity = position.interpolate({
-      inputRange,
-      outputRange: inputRange.map((i: number) => (i === index ? 1 : 0)),
-    });
-    const inactiveOpacity = position.interpolate({
-      inputRange,
-      outputRange: inputRange.map((i: number) => (i === index ? 0 : 1)),
-    });
+      const activeOpacity = position.interpolate({
+        inputRange,
+        outputRange: inputRange.map((i: number) => (i === index ? 1 : 0)),
+      });
+      const inactiveOpacity = position.interpolate({
+        inputRange,
+        outputRange: inputRange.map((i: number) => (i === index ? 0 : 1)),
+      });
 
-    return (
-      <View style={styles.tab}>
-        <Animated.View style={[styles.item, { opacity: inactiveOpacity }]}>
-          <Ionicons
-            name={route.icon}
-            size={26}
-            style={[styles.icon, styles.inactive]}
-          />
-          <Text style={[styles.label, styles.inactive]}>{route.title}</Text>
-        </Animated.View>
-        <Animated.View
-          style={[styles.item, styles.activeItem, { opacity: activeOpacity }]}
-        >
-          <Ionicons
-            name={route.icon}
-            size={26}
-            style={[styles.icon, styles.active]}
-          />
-          <Text style={[styles.label, styles.active]}>{route.title}</Text>
-        </Animated.View>
-      </View>
-    );
-  };
+      return (
+        <View style={styles.tab}>
+          <Animated.View style={[styles.item, { opacity: inactiveOpacity }]}>
+            <Ionicons
+              name={route.icon}
+              size={26}
+              style={[styles.icon, styles.inactive]}
+            />
+            <Text style={[styles.label, styles.inactive]}>{route.title}</Text>
+          </Animated.View>
+          <Animated.View
+            style={[styles.item, styles.activeItem, { opacity: activeOpacity }]}
+          >
+            <Ionicons
+              name={route.icon}
+              size={26}
+              style={[styles.icon, styles.active]}
+            />
+            <Text style={[styles.label, styles.active]}>{route.title}</Text>
+          </Animated.View>
+        </View>
+      );
+    };
 
   private renderTabBar = (
     props: SceneRendererProps & { navigationState: State }