Merge pull request #84 from expo-community/aman/upgrade-to-sdk50

Upgrade to Expo SDK 50

.gitignore

@@ -39,4 +39,7 @@ Temporary Items
 .apdisk
 
 # Project related
-.env
+.env
+.expo
+.expo-shared
+.vscode

App.js

@@ -1,8 +1,8 @@
-import React from 'react';
-import { SafeAreaProvider } from 'react-native-safe-area-context';
+import React from "react";
+import { SafeAreaProvider } from "react-native-safe-area-context";
 
-import { RootNavigator } from './navigation/RootNavigator';
-import { AuthenticatedUserProvider } from './providers';
+import { RootNavigator } from "./navigation/RootNavigator";
+import { AuthenticatedUserProvider } from "./providers";
 
 const App = () => {
   return (

README.md

@@ -6,17 +6,17 @@
 
 Is a quicker way to start with Expo + Firebase (using JS SDK) projects. It includes:
 
-- based on Expo SDK `46`
+- based on Expo SDK `50`
 - navigation using `react-navigation` 6.x.x
 - Firebase JS SDK v9
 - Firebase as the backend for email auth
 - custom and reusable components
 - custom hook to toggle password field visibility on a TextInput
 - handles server errors using Formik
 - Login, Signup & Password Reset form built using Formik & yup
-- show/hide Password Field's visibility 👁
+- show/hide the Password Field's visibility 👁
 - uses a custom Provider using Context API & Firebase's `onAuthStateChanged` handler to check the user's auth state with
-- handles Forgot Password Reset using Firebase email method
+- handles Forgot Password Reset using the Firebase email method
 - uses [Expo Vector Icons](https://icons.expo.fyi/)
 - uses [KeyboardAwareScrollView](https://github.com/APSL/react-native-keyboard-aware-scroll-view) package to handle keyboard appearance and automatically scrolls to focused TextInput
 - uses `dotenv` and `expo-constants` packages to manage environment variables (so that they are not exposed on public repositories)
@@ -44,10 +44,25 @@ MESSAGING_SENDER_ID=XXXX
 APP_ID=XXXX
 ```
 
-4. Start the project:
+## Run project
 
-- `yarn ios` -- open on iOS
-- `yarn android` -- open on Android
+To start the development server and run your project:
+
+```
+npx expo start
+```
+
+Alternate to using Expo Go, if you are building more than a hobby project or a prototype, make sure you [create a development build](https://docs.expo.dev/develop/development-builds/introduction/). You can either [locally compile your project](https://docs.expo.dev/guides/local-app-development/#local-builds-with-expo-dev-client) or [use EAS](https://docs.expo.dev/develop/development-builds/create-a-build/).
+
+To locally compile your app, run:
+
+```
+# Build native Android project
+npx expo run:android
+
+# Build native iOS project
+npx expo run:ios
+```
 
 ## File Structure
 
@@ -93,17 +108,17 @@ Main screens:
 - Forgot password
 - Home (Bare Minimum) with a logout button
 
-![Login screen with validation](https://i.imgur.com/cydaOYN.png)
+<img src="./screenshots/img1.png" height="420" alt="Login screen with validation>
 
-![Successful Signup](https://i.imgur.com/62kcirI.png)
+<img src="./screenshots/img2.png" height="420" alt="Successful sign up attempt">
 
-![Forgot Password](https://i.imgur.com/9J9a4Nl.png)
+<img src="./screenshots/img3.png" height="420" alt="Forgot password screen">
 
-![Validation on Signup screens](https://i.imgur.com/DG0wTjG.png)
+<img src="./screenshots/img3.png" height="420" alt="Validation on Signup screens">
 
 ## Development builds and React Native Firebase library
 
-This project uses Firebase JS SDK which doesn't support all services (such as Crashlytics, Dynamic Links, and Analytics). However, you can use `react-native-firebase` library in an Expo project by [creating a development build](https://docs.expo.dev/develop/development-builds/introduction/).
+This project uses Firebase JS SDK which doesn't support all services (such as Crashlytics, Dynamic Links, and Analytics). However, you can use the `react-native-firebase` library in an Expo project by [creating a development build](https://docs.expo.dev/develop/development-builds/introduction/).
 
 Both of these libraries can satisfy different project requirements. To learn about the differences between using Firebase JS SDK and React Native Firebase library when building your app with Expo, see the following sections from Expo's official documentation:
 

app.config.js

@@ -1,33 +1,33 @@
-import 'dotenv/config';
+import "dotenv/config";
 
 export default {
   expo: {
-    name: 'Expo Firebase Starter',
-    slug: 'expo-firebase',
-    privacy: 'public',
-    platforms: ['ios', 'android'],
-    version: '0.15.0',
-    orientation: 'portrait',
-    icon: './assets/flame.png',
+    name: "Expo Firebase Starter",
+    slug: "expo-firebase",
+    privacy: "public",
+    platforms: ["ios", "android"],
+    version: "0.15.0",
+    orientation: "portrait",
+    icon: "./assets/flame.png",
     splash: {
-      image: './assets/splash.png',
-      resizeMode: 'cover',
-      backgroundColor: '#F57C00'
+      image: "./assets/splash.png",
+      resizeMode: "cover",
+      backgroundColor: "#F57C00",
     },
     updates: {
-      fallbackToCacheTimeout: 0
+      fallbackToCacheTimeout: 0,
     },
-    assetBundlePatterns: ['**/*'],
+    assetBundlePatterns: ["**/*"],
     ios: {
-      supportsTablet: true
+      supportsTablet: true,
     },
     extra: {
       apiKey: process.env.API_KEY,
       authDomain: process.env.AUTH_DOMAIN,
       projectId: process.env.PROJECT_ID,
       storageBucket: process.env.STORAGE_BUCKET,
       messagingSenderId: process.env.MESSAGING_SENDER_ID,
-      appId: process.env.APP_ID
-    }
-  }
+      appId: process.env.APP_ID,
+    },
+  },
 };

babel.config.js

@@ -2,6 +2,5 @@ module.exports = function (api) {
   api.cache(true);
   return {
     presets: ["babel-preset-expo"],
-    plugins: ["react-native-reanimated/plugin"],
   };
 };

config/firebase.js

@@ -1,8 +1,7 @@
 import { initializeApp } from "firebase/app";
-// import { initializeAuth, getReactNativePersistence } from "firebase/auth";
-import { initializeAuth } from "firebase/auth";
+import { initializeAuth, getReactNativePersistence } from "firebase/auth";
 import Constants from "expo-constants";
-// import AsyncStorage from "@react-native-async-storage/async-storage";
+import AsyncStorage from "@react-native-async-storage/async-storage";
 
 // add firebase config
 const firebaseConfig = {
@@ -17,15 +16,9 @@ const firebaseConfig = {
 // initialize firebase
 const app = initializeApp(firebaseConfig);
 
-//
-// Need to upgrade to Expo with typescrip inorder getReactNativePersistence to work.
-//
-
-//initialize auth
-// const auth = initializeAuth(app, {
-//   persistence: getReactNativePersistence(AsyncStorage),
-// });
-
-const auth = initializeAuth(app);
+// initialize auth
+const auth = initializeAuth(app, {
+  persistence: getReactNativePersistence(AsyncStorage),
+});
 
 export { auth };

config/images.js

@@ -1,3 +1,3 @@
 export const Images = {
-  logo: require('../assets/flame.png')
+  logo: require("../assets/flame.png"),
 };

config/index.js

@@ -1,5 +1,5 @@
-import { Images } from './images';
-import { Colors } from './theme';
-import { auth } from './firebase';
+import { Images } from "./images";
+import { Colors } from "./theme";
+import { auth } from "./firebase";
 
 export { Images, Colors, auth };

config/theme.js

@@ -1,8 +1,8 @@
 export const Colors = {
-  orange: '#f57c00',
-  blue: '#039be5',
-  black: '#222222',
-  white: '#ffffff',
-  mediumGray: '#6e6869',
-  red: '#fc5c65'
+  orange: "#f57c00",
+  blue: "#039be5",
+  black: "#222222",
+  white: "#ffffff",
+  mediumGray: "#6e6869",
+  red: "#fc5c65",
 };

metro.config.js

@@ -1,10 +1,7 @@
-// Learn more https://docs.expo.dev/guides/customizing-metro/
-const { getDefaultConfig } = require("expo/metro-config");
+// Learn more at https://docs.expo.dev/guides/using-firebase/#configure-metro
+const { getDefaultConfig } = require("@expo/metro-config");
 
-/** @type {import('expo/metro-config').MetroConfig} */
 const defaultConfig = getDefaultConfig(__dirname);
 defaultConfig.resolver.sourceExts.push("cjs");
 
-defaultConfig.resolver.mainFields = ["react-native", "browser", "main"];
-
 module.exports = defaultConfig;

navigation/AppStack.js

@@ -1,14 +1,14 @@
-import * as React from 'react';
-import { createStackNavigator } from '@react-navigation/stack';
+import * as React from "react";
+import { createStackNavigator } from "@react-navigation/stack";
 
-import { HomeScreen } from '../screens';
+import { HomeScreen } from "../screens";
 
 const Stack = createStackNavigator();
 
 export const AppStack = () => {
   return (
     <Stack.Navigator>
-      <Stack.Screen name='Home' component={HomeScreen} />
+      <Stack.Screen name="Home" component={HomeScreen} />
     </Stack.Navigator>
   );
 };

navigation/AuthStack.js

@@ -1,19 +1,19 @@
-import * as React from 'react';
-import { createStackNavigator } from '@react-navigation/stack';
+import * as React from "react";
+import { createStackNavigator } from "@react-navigation/stack";
 
-import { LoginScreen, SignupScreen, ForgotPasswordScreen } from '../screens';
+import { LoginScreen, SignupScreen, ForgotPasswordScreen } from "../screens";
 
 const Stack = createStackNavigator();
 
 export const AuthStack = () => {
   return (
     <Stack.Navigator
-      initialRouteName='Login'
+      initialRouteName="Login"
       screenOptions={{ headerShown: false }}
     >
-      <Stack.Screen name='Login' component={LoginScreen} />
-      <Stack.Screen name='Signup' component={SignupScreen} />
-      <Stack.Screen name='ForgotPassword' component={ForgotPasswordScreen} />
+      <Stack.Screen name="Login" component={LoginScreen} />
+      <Stack.Screen name="Signup" component={SignupScreen} />
+      <Stack.Screen name="ForgotPassword" component={ForgotPasswordScreen} />
     </Stack.Navigator>
   );
 };

navigation/RootNavigator.js

@@ -1,12 +1,12 @@
-import React, { useState, useContext, useEffect } from 'react';
-import { NavigationContainer } from '@react-navigation/native';
-import { onAuthStateChanged } from 'firebase/auth';
+import React, { useState, useContext, useEffect } from "react";
+import { NavigationContainer } from "@react-navigation/native";
+import { onAuthStateChanged } from "firebase/auth";
 
-import { AuthStack } from './AuthStack';
-import { AppStack } from './AppStack';
-import { AuthenticatedUserContext } from '../providers';
-import { LoadingIndicator } from '../components';
-import { auth } from '../config';
+import { AuthStack } from "./AuthStack";
+import { AppStack } from "./AppStack";
+import { AuthenticatedUserContext } from "../providers";
+import { LoadingIndicator } from "../components";
+import { auth } from "../config";
 
 export const RootNavigator = () => {
   const { user, setUser } = useContext(AuthenticatedUserContext);
@@ -16,7 +16,7 @@ export const RootNavigator = () => {
     // onAuthStateChanged returns an unsubscriber
     const unsubscribeAuthStateChanged = onAuthStateChanged(
       auth,
-      authenticatedUser => {
+      (authenticatedUser) => {
         authenticatedUser ? setUser(authenticatedUser) : setUser(null);
         setIsLoading(false);
       }

navigation/index.js

@@ -1,3 +1,3 @@
-import { RootNavigator } from './RootNavigator';
+import { RootNavigator } from "./RootNavigator";
 
 export { RootNavigator };

package.json

@@ -4,35 +4,34 @@
     "start": "expo start",
     "android": "expo start --android",
     "ios": "expo start --ios",
-    "web": "expo start --web",
-    "eject": "expo eject"
+    "web": "expo start --web"
   },
   "dependencies": {
     "@expo/webpack-config": "^19.0.0",
-    "@react-native-async-storage/async-storage": "1.18.2",
-    "@react-native-masked-view/masked-view": "^0.2.7",
+    "@react-native-async-storage/async-storage": "1.21.0",
+    "@react-native-masked-view/masked-view": "0.3.0",
     "@react-navigation/native": "^6.1.16",
     "@react-navigation/stack": "^6.3.28",
     "dotenv": "^10.0.0",
-    "expo": "^49.0.15",
-    "expo-constants": "~14.4.2",
+    "expo": "^50.0.0",
+    "expo-constants": "~15.4.5",
     "firebase": "^10.5.2",
     "formik": "2.1.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "0.72.10",
-    "react-native-gesture-handler": "2.12.0",
+    "react-native": "0.73.6",
+    "react-native-gesture-handler": "~2.14.0",
     "react-native-keyboard-aware-scroll-view": "^0.9.4",
-    "react-native-reanimated": "3.3.0",
-    "react-native-safe-area-context": "4.6.3",
-    "react-native-screens": "3.22.0",
+    "react-native-reanimated": "~3.6.2",
+    "react-native-safe-area-context": "4.8.2",
+    "react-native-screens": "~3.29.0",
     "react-native-web": "0.19.10",
     "yup": "^0.27.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
     "@babel/runtime": "^7.9.0",
-    "babel-preset-expo": "^9.5.0",
+    "babel-preset-expo": "^10.0.0"
   },
   "private": true
 }