Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

upgrade to expo 49 #43

Merged
merged 12 commits into from
Dec 7, 2023
17 changes: 11 additions & 6 deletions App.tsx
Original file line number Diff line number Diff line change
@@ -1,21 +1,26 @@
import React from "react";
import React, { useEffect } from "react";
import Main from "./src/Main";
import * as SplashScreen from "expo-splash-screen";
import AppLoading from "expo-app-loading";

import useCachedResources from "./src/hooks/useCachedResources";
import { useOverTheAirUpdate } from "./src/hooks/useOverTheAirUpdate";

// Ensure Splash isn't automatically hidden
SplashScreen.preventAutoHideAsync().catch(console.warn);
SplashScreen.preventAutoHideAsync();

const App = () => {
const isLoadingComplete = useCachedResources();
// Check and apply OTA updates
const isUpdated = useOverTheAirUpdate();
useOverTheAirUpdate();

if (!isLoadingComplete || !isUpdated) {
return <AppLoading />;
useEffect(() => {
if (isLoadingComplete) {
SplashScreen.hideAsync();
}
}, [isLoadingComplete]);

if (!isLoadingComplete) {
return null;
}

return <Main />;
4 changes: 4 additions & 0 deletions index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
import { registerRootComponent } from 'expo';
import App from "./App"

registerRootComponent(App);
6 changes: 6 additions & 0 deletions metro.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
const { getDefaultConfig } = require('@expo/metro-config');

const defaultConfig = getDefaultConfig(__dirname);
defaultConfig.resolver.sourceExts.push('cjs');

module.exports = defaultConfig;
86 changes: 45 additions & 41 deletions package.json
Original file line number Diff line number Diff line change
@@ -2,15 +2,15 @@
"name": "@prototypsthlm/marine-plastic-app",
"version": "1.0.14",
"private": true,
"main": "node_modules/expo/AppEntry.js",
"main": "./index.tsx",
"engines": {
"node": ">=16.0.0"
},
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"debug-ios": "open \"rndebugger://set-debugger-loc?host=localhost&port=19000\" && yarn run ios",
"debug-ios": "open \"rndebugger://set-debugger-loc?host=localhost&port=8081\" && yarn run ios",
"web": "expo start --web",
"eject": "expo eject",
"test": "jest --watchAll"
@@ -19,66 +19,70 @@
"preset": "jest-expo"
},
"dependencies": {
"@expo/vector-icons": "^12.0.0",
"@react-native-async-storage/async-storage": "~1.15.0",
"@react-native-community/datetimepicker": "4.0.0",
"@expo/config-plugins": "~7.2.2",
"@expo/metro-config": "~0.10.0",
"@expo/prebuild-config": "~6.2.4",
"@expo/vector-icons": "^13.0.0",
"@react-native-async-storage/async-storage": "1.18.2",
"@react-native-community/datetimepicker": "7.2.0",
"@react-native-community/masked-view": "0.1.10",
"@react-native-community/netinfo": "9.0.0",
"@react-native-picker/picker": "2.2.1",
"@react-navigation/bottom-tabs": "5.11.2",
"@react-navigation/native": "~5.8.10",
"@react-native-community/netinfo": "9.3.10",
"@react-native-picker/picker": "2.4.10",
"@react-navigation/bottom-tabs": "6.5.11",
"@react-navigation/elements": "^1.3.21",
"@react-navigation/native": "^6.1.9",
"@react-navigation/stack": "~5.12.8",
"@reduxjs/toolkit": "^1.5.0",
"@turf/convex": "^6.3.0",
"@turf/helpers": "^6.3.0",
"@turf/rewind": "^6.3.0",
"apisauce": "^2.0.1",
"expo": "^44.0.0",
"expo-app-loading": "~1.3.0",
"expo-asset": "~8.4.6",
"expo-constants": "~13.0.1",
"expo-font": "~10.0.4",
"expo-image-manipulator": "~10.2.0",
"expo-image-picker": "~12.0.1",
"expo-linking": "~3.0.0",
"expo-location": "~14.0.1",
"expo-splash-screen": "~0.14.1",
"expo-sqlite": "~10.1.0",
"expo-status-bar": "~1.2.0",
"expo-updates": "~0.11.7",
"expo-web-browser": "~10.1.0",
"firebase": "8.2.3",
"eas-cli": "^5.9.1",
"expo": "^49.0.0",
"expo-asset": "~8.10.1",
"expo-constants": "~14.4.2",
"expo-font": "~11.4.0",
"expo-image-manipulator": "~11.3.0",
"expo-image-picker": "~14.3.2",
"expo-linking": "~5.0.2",
"expo-location": "~16.1.0",
"expo-splash-screen": "~0.20.5",
"expo-sqlite": "~11.3.3",
"expo-status-bar": "~1.6.0",
"expo-updates": "~0.18.17",
"expo-web-browser": "~12.3.2",
"firebase": "^10.6.0",
"formik": "^2.2.6",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-native": "0.64.3",
"react-native-gesture-handler": "~2.1.0",
"react-native-get-random-values": "~1.7.0",
"react-native-maps": "0.29.4",
"react": "18.2.0",
"react-native": "0.72.6",
"react-native-gesture-handler": "~2.12.0",
"react-native-get-random-values": "~1.9.0",
"react-native-maps": "1.7.1",
"react-native-picker-select": "^8.0.4",
"react-native-safe-area-context": "3.3.2",
"react-native-screens": "~3.10.1",
"react-native-web": "0.17.1",
"react-native-webview": "11.15.0",
"react-navigation-header-buttons": "^6.2.1",
"react-native-safe-area-context": "4.6.3",
"react-native-screens": "~3.22.0",
"react-native-webview": "13.2.2",
"react-navigation-header-buttons": "^11.1.1",
"react-redux": "^7.2.2",
"styled-components": "^5.2.1",
"uuid": "^8.3.2",
"yup": "^0.32.8"
},
"devDependencies": {
"@babel/core": "^7.12.9",
"@types/react": "~17.0.21",
"@types/react-native": "~0.64.12",
"@babel/core": "^7.20.0",
"@types/react": "~18.2.14",
"@types/react-redux": "^7.1.16",
"@types/styled-components": "^5.1.7",
"@types/styled-components-react-native": "^5.1.0",
"@types/uuid": "^8.3.0",
"@types/yup": "^0.29.11",
"babel-plugin-dotenv-import": "^2.1.0",
"expo-cli": "^5.4.3",
"jest-expo": "^44.0.0",
"jest-expo": "~49.0.0",
"metro-react-native-babel-preset": "^0.77.0",
"react-devtools": "^4.22.0",
"typescript": "~4.3.5"
"typescript": "^5.1.3"
},
"resolutions": {
"@types/react": "^18.0.0"
}
}
7 changes: 1 addition & 6 deletions src/Main.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
/// <reference path="global.d.ts"/>
import { StatusBar } from "expo-status-bar";
import React from "react";
import {
SafeAreaProvider,
@@ -11,17 +10,13 @@ import { Provider } from "react-redux";
import store from "./store/store";

import Navigation from "./navigation";
import { OverflowMenuProvider } from "react-navigation-header-buttons";

export default function Main() {
return (
<Provider store={store}>
<SafeAreaProvider initialMetrics={initialWindowMetrics}>
<ThemeProvider theme={theme}>
<OverflowMenuProvider>
<Navigation />
</OverflowMenuProvider>
<StatusBar />
<Navigation />
</ThemeProvider>
</SafeAreaProvider>
</Provider>
1 change: 1 addition & 0 deletions src/components/SettingsHelperButton.tsx
Original file line number Diff line number Diff line change
@@ -21,6 +21,7 @@ export default function SettingsHelperButton() {
iconName="ios-settings-sharp"
color={theme.color.palette.cyan}
onPress={onPress}
style={{paddingLeft: 12}}
/>
</BasicHeaderButtons>)
}
11 changes: 6 additions & 5 deletions src/navigation/BottomTabNavigator.tsx
Original file line number Diff line number Diff line change
@@ -20,11 +20,12 @@ export default function BottomTabNavigator() {
return (
<BottomTab.Navigator
initialRouteName="observationList"
tabBarOptions={{
activeTintColor: theme.color.palette.cyan,
inactiveTintColor: theme.color.palette.white,
activeBackgroundColor: theme.color.palette.gray,
labelStyle: styles.bottomTabLabel
screenOptions={{
tabBarActiveTintColor: theme.color.palette.cyan,
tabBarInactiveTintColor: theme.color.palette.white,
tabBarActiveBackgroundColor: theme.color.palette.gray,
tabBarLabelStyle: styles.bottomTabLabel,
headerShown: false
}}
>
<BottomTab.Screen
13 changes: 9 additions & 4 deletions src/navigation/index.tsx
Original file line number Diff line number Diff line change
@@ -5,6 +5,8 @@ import { useEffect } from "react";
import { AppState, AppStateStatus } from "react-native";
import { useSelector } from "react-redux";
import { firebaseAuth } from "../services/firebaseAuth";
import { StatusBar } from "expo-status-bar";
import { HeaderButtonsProvider } from "react-navigation-header-buttons";

import { navigationRef } from "../services/navigation";
import { setUserWithNewToken } from "../store/slices/session";
@@ -37,7 +39,10 @@ const OceanScanTheme = {
export default function Navigation() {
return (
<NavigationContainer ref={navigationRef} theme={OceanScanTheme}>
<RootNavigator />
<StatusBar />
<HeaderButtonsProvider stackType="js">
<RootNavigator />
</HeaderButtonsProvider>
</NavigationContainer>
);
}
@@ -111,14 +116,14 @@ function RootNavigator() {
);
}
};
AppState.addEventListener("change", appStateListener);
const appStateSubscription = AppState.addEventListener("change", appStateListener);

const unsubscribePeriodicNetworkCheck = setUpPeriodicNetworkCheck(isOnline);

return () => {
unsubscribeFirebaseAuth();
unsubscribeNetInfo();
AppState.removeEventListener("change", appStateListener);
appStateSubscription.remove();
unsubscribePeriodicNetworkCheck.then((fn) => fn());
};
}, [isActive, isOnline]);
@@ -129,7 +134,7 @@ function RootNavigator() {
if (isLoggedOut) return <LoggedOutStackNavigator />;

return (
<Stack.Navigator screenOptions={{ headerShown: false }}>
<Stack.Navigator screenOptions={{ headerShown: false }} >
<Stack.Screen name="Root" component={BottomTabNavigator} />
</Stack.Navigator>
);
2 changes: 1 addition & 1 deletion src/screens/LoggedOut/EmailPasswordLoginScreen.tsx
Original file line number Diff line number Diff line change
@@ -30,7 +30,7 @@ export const EmailPasswordLoginScreen = () => {
const isAuthPending = authStatus === "PENDING";
const dispatch = useThunkDispatch();

const onSubmit = useCallback((values) => {
const onSubmit = useCallback((values: InitialFormValues) => {
dispatch(loginWithEmailAndPassword(values));
}, []);

18 changes: 12 additions & 6 deletions src/services/firebaseAuth.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import firebase from "firebase";
import { initializeApp } from "firebase/app";
import { initializeAuth, getAuth, getReactNativePersistence } from 'firebase/auth';
import ReactNativeAsyncStorage from '@react-native-async-storage/async-storage';
import {
API_KEY,
AUTH_DOMAIN,
@@ -9,22 +11,26 @@ import {
APP_ID,
} from "@env";

const initAuth = () => {
firebase.initializeApp({
const firebaseConfig = {
apiKey: API_KEY,
authDomain: AUTH_DOMAIN,
databaseURL: DATABASE_URL,
projectId: PROJECT_ID,
storageBucket: STORAGE_BUCKET,
messagingSenderId: MESSAGE_SENDER_ID,
appId: APP_ID,
});
}

return firebase.auth();
const initAuth = () => {
const app = initializeApp(firebaseConfig);
const auth = initializeAuth(app, {
persistence: getReactNativePersistence(ReactNativeAsyncStorage)
});
return auth;
};

export const authSignOut = () => {
return firebase.auth().signOut();
return getAuth().signOut();
}

export const firebaseAuth = initAuth();
5 changes: 4 additions & 1 deletion src/store/slices/account/actions.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
import { ApiOkResponse } from "apisauce";
import { User } from "../../../models";
import { UserResponse } from "../../../services/api/types";
import { ActionError } from "../../errors/ActionError";
import { Thunk } from "../../store";
import { setUser } from "./slice";
import { GenericApiProblem } from "../../../services/api/genericTypes";

export const setUserInfoOffline: Thunk =
() =>
@@ -20,7 +23,7 @@ export const setUserInfo: Thunk =
const userEmail = firebaseAuth.currentUser?.email;

if (user === null || user.email !== userEmail) {
const result = await api.getUserMe();
const result = await api.getUserMe() as ApiOkResponse<UserResponse> | GenericApiProblem;

if (!result.ok || !result.data?.result)
throw new ActionError(
3 changes: 2 additions & 1 deletion src/store/slices/session/actions.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { signInWithEmailAndPassword } from "firebase/auth";
import {
addTokenToRequestPayloads,
clearTokenFromRequestPayloads,
@@ -24,7 +25,7 @@ export const loginWithEmailAndPassword: Thunk<
async (dispatch, _, { firebaseAuth }) => {
try {
dispatch(waitingForAuthentication());
await firebaseAuth.signInWithEmailAndPassword(email, password);
await signInWithEmailAndPassword(firebaseAuth, email, password);
dispatch(setUserWithNewToken());
return true;
} catch (error: any) {
5 changes: 4 additions & 1 deletion tsconfig.json
Original file line number Diff line number Diff line change
@@ -32,7 +32,10 @@
"noEmit": true,
"skipLibCheck": true,
"resolveJsonModule": true,
"strict": true
"strict": true,
"paths": {
"@firebase/auth": ["./node_modules/@firebase/auth/dist/index.rn.d.ts"]
}
},
"extends": "expo/tsconfig.base"
}
Loading