Upgrade SDK

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "typescript.tsdk": "node_modules/typescript/lib"
+}

app.json

@@ -4,7 +4,6 @@
     "slug": "IITK-Coin",
     "version": "1.0.0",
     "orientation": "portrait",
-    "entryPoint": "./src/App.tsx",
     "icon": "./src/assets/icon.png",
     "splash": {
       "image": "./src/assets/splash.png",

package.json

@@ -1,5 +1,5 @@
 {
-  "main": "node_modules/expo/AppEntry.js",
+  "main": "src/App.tsx",
   "scripts": {
     "start": "expo start",
     "android": "expo start --android",
@@ -10,35 +10,37 @@
     "lint-fix": "eslint --ext .tsx --ext .ts --ext .js --ext .jsx . --fix"
   },
   "dependencies": {
-    "@expo-google-fonts/merriweather-sans": "^0.2.0",
-    "@expo-google-fonts/open-sans": "^0.2.0",
-    "@expo/ngrok": "^4.1.0",
-    "@expo/vector-icons": "^12.0.5",
-    "@gorhom/bottom-sheet": "^4.1.0",
+    "@expo-google-fonts/merriweather-sans": "^0.2.3",
+    "@expo-google-fonts/open-sans": "^0.2.3",
+    "@expo/ngrok": "^4.1.1",
+    "@expo/vector-icons": "^13.0.0",
+    "@gorhom/bottom-sheet": "^4.5.1",
     "axios": "^0.21.4",
-    "expo": "~42.0.1",
-    "expo-app-loading": "^1.1.2",
-    "expo-linear-gradient": "~9.2.0",
-    "expo-secure-store": "^10.2.0",
-    "expo-status-bar": "~1.0.4",
-    "react": "16.13.1",
-    "react-dom": "16.13.1",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
+    "expo": "~48.0.13",
+    "expo-app-loading": "^1.3.0",
+    "expo-linear-gradient": "~12.1.2",
+    "expo-secure-store": "~12.1.1",
+    "expo-status-bar": "~1.4.4",
+    "react": "^18.2.0",
+    "react-dom": "18.2.0",
+    "react-native": "0.71.8",
     "react-native-animatable": "^1.3.3",
-    "react-native-flash-message": "^0.2.0",
+    "react-native-flash-message": "^0.2.1",
+    "react-native-gesture-handler": "~2.9.0",
     "react-native-material-kit": "^0.6.0-beta.1",
     "react-native-material-ripple": "^0.9.1",
-    "react-native-shimmer-placeholder": "^2.0.8",
-    "react-native-svg": "^12.1.1",
+    "react-native-reanimated": "~2.14.4",
+    "react-native-shimmer-placeholder": "^2.0.9",
+    "react-native-svg": "13.4.0",
     "react-native-svg-transformer": "^0.14.3",
-    "react-native-web": "~0.13.12",
-    "react-redux": "^7.2.5",
+    "react-native-web": "~0.18.10",
+    "react-redux": "^7.2.9",
     "redux": "^4.1.1",
     "redux-thunk": "^2.3.0"
   },
   "devDependencies": {
     "@babel/core": "^7.9.0",
-    "@types/react": "~16.9.35",
+    "@types/react": "~18.0.27",
     "@types/react-native": "~0.63.2",
     "@types/react-native-material-ripple": "^0.9.2",
     "@types/react-redux": "^7.1.18",
@@ -50,7 +52,7 @@
     "eslint-plugin-react": "^7.26.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-plugin-react-native": "^3.11.0",
-    "typescript": "~4.0.0"
+    "typescript": "^4.9.4"
   },
   "private": true
 }

src/App.tsx

@@ -6,6 +6,8 @@ import AppLoading from "expo-app-loading";
 import { useFonts, OpenSans_400Regular, OpenSans_600SemiBold, OpenSans_700Bold } from "@expo-google-fonts/open-sans";
 import { FontAwesome, AntDesign, Ionicons, MaterialIcons } from "@expo/vector-icons";
 import FlashMessage from "react-native-flash-message";
+import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
 
 import { COLORS } from "styles";
 import store from "redux-store";
@@ -29,12 +31,12 @@ function App() {
 
 	const dispatch = useDispatch();
 	const [checkLoggedIn, setCheckLoggedIn] = useState(false);
-	
+
 	useEffect(() => {
 		setCheckLoggedIn(false);
 		dispatch(setCurrentScreen(ScreenType.LOGIN));
 		dispatch(setIsAuthenticated(false));
-		isLoggedIn().then(({Status, RollNo}) => {
+		isLoggedIn().then(({ Status, RollNo }) => {
 			setCheckLoggedIn(true);
 			if (Status) {
 				dispatch(setCurrentScreen(ScreenType.HOME));
@@ -43,7 +45,7 @@ function App() {
 			}
 		});
 	}, [dispatch]);
-	
+
 	return (
 		(fontsLoaded && checkLoggedIn) ? 
 			(
@@ -66,14 +68,19 @@ const styles = StyleSheet.create({
 	flash: {
 		alignItems: "center",
 		borderRadius: 20,
-	}
+	},
 });
 
 const AppWrapper = () => {
 	return (
-		<Provider store={store}>
-			<App />
-		</Provider>
+		// eslint-disable-next-line react-native/no-inline-styles
+		<GestureHandlerRootView style={{ flex: 1 }}>
+			<BottomSheetModalProvider>
+				<Provider store={store}>
+					<App />
+				</Provider>
+			</BottomSheetModalProvider>
+		</GestureHandlerRootView>
 	);
 };
 

src/components/BottomSheet/BottomSheet.tsx

@@ -36,7 +36,7 @@ const MyBottomSheet: React.FC<Props> = ({
 		<View style={styles.container}>
 			{expandedHeader}
 			<BottomSheet
-				ref={bottomSheetRef}
+				// ref={bottomSheetRef}
 				index={0}
 				snapPoints={snapPoints}
 				backdropComponent={CustomBackdrop}

src/components/SVGImage/SVGImage.tsx

@@ -11,6 +11,7 @@ interface Prop {
 }
 
 const SVGImage: React.FC<Prop> = (props) => {
+	return <View />;
 	const { name, size, style } = props;
 
 	let SVG = source.crow;
@@ -33,7 +34,7 @@ const SVGImage: React.FC<Prop> = (props) => {
 
 	if (name === "CoinLogo") {
 		SVG = source.coinLogo;
-		
+
 		if (size == undefined && style != undefined) {
 			return (
 				<SVG style={[styles.default, styles.coinLogo, style]} />