Upgrade expo to 51.0.11

generators/react-native/generator.mjs

@@ -163,6 +163,9 @@ export default class extends BaseApplicationGenerator {
 
   get [BaseApplicationGenerator.PREPARING]() {
     return this.asPreparingTaskGroup({
+      dependencies({ application }) {
+        this.loadNodeDependenciesFromPackageJson(application.nodeDependencies, this.templatePath('../resources/expo/package.json'));
+      },
       preparingPatchInFile() {
         this.patchInFile = patchInFile.bind(this);
       },

generators/react-native/resources/expo/package.json

@@ -7,35 +7,36 @@
     "update-dependencies": "npm install && npx expo install --fix && rm -rf package-lock.json node_modules"
   },
   "dependencies": {
-    "@expo/vector-icons": "^13.0.0",
-    "@react-native-async-storage/async-storage": "1.18.2",
-    "@react-native-community/datetimepicker": "7.2.0",
-    "@react-native-masked-view/masked-view": "0.2.9",
-    "@react-native-picker/picker": "2.4.10",
+    "@expo/metro-runtime": "~3.2.1",
+    "@expo/vector-icons": "^14.0.2",
+    "@react-native-async-storage/async-storage": "1.23.1",
+    "@react-native-community/datetimepicker": "8.0.1",
+    "@react-native-masked-view/masked-view": "0.3.1",
+    "@react-native-picker/picker": "2.7.5",
     "@react-navigation/devtools": "6.0.26",
-    "expo": "49.0.21",
-    "expo-auth-session": "~5.0.2",
-    "expo-constants": "~14.4.2",
-    "expo-image-picker": "~14.3.2",
-    "expo-linking": "~5.0.2",
-    "expo-random": "~13.2.0",
-    "expo-splash-screen": "~0.20.5",
-    "expo-status-bar": "~1.6.0",
-    "expo-web-browser": "~12.3.2",
+    "expo": "51.0.11",
+    "expo-auth-session": "~5.5.2",
+    "expo-constants": "~16.0.2",
+    "expo-image-picker": "~15.0.5",
+    "expo-linking": "~6.3.1",
+    "expo-random": "~14.0.1",
+    "expo-splash-screen": "~0.27.5",
+    "expo-status-bar": "~1.12.1",
+    "expo-web-browser": "~13.0.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "0.72.10",
-    "react-native-gesture-handler": "~2.12.0",
-    "react-native-reanimated": "~3.3.0",
-    "react-native-safe-area-context": "4.6.3",
-    "react-native-screens": "~3.22.0",
+    "react-native": "0.74.2",
+    "react-native-gesture-handler": "~2.16.2",
+    "react-native-reanimated": "~3.10.1",
+    "react-native-safe-area-context": "4.10.1",
+    "react-native-screens": "3.31.1",
     "react-native-web": "~0.19.12"
   },
   "devDependencies": {
     "@babel/core": "^7.24.7",
     "@react-native-community/cli-server-api": "13.6.9",
-    "@types/react": "~18.2.65",
-    "jest-expo": "^49.0.0",
-    "typescript": "^5.4.5"
+    "@types/react": "~18.2.79",
+    "jest-expo": "~51.0.2",
+    "typescript": "~5.3.3"
   }
 }

generators/react-native/templates/App.js.ejs

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { Provider } from 'react-redux';
 import createStore from './app/shared/reducers';
 import * as SplashScreen from 'expo-splash-screen';
+import 'setimmediate';
 
 import NavContainer from './app/navigation/nav-container';
 

generators/react-native/templates/app/modules/entities/_entityFolder_/_entityFile_-screen.js.ejs

@@ -18,6 +18,9 @@ function <%= entityNameCapitalized %>Screen(props) {
   <%_ } _%>
 
   const { <%= entityInstance %>, <%= entityInstance %>List, getAll<%= entityNamePlural %>, fetching } = props;
+  const fetch<%= entityNamePlural %> = React.useCallback(() => {
+    getAll<%= entityNamePlural %>({ page: page - 1, sort, size });
+  }, [getAll<%= entityNamePlural %>, page, sort, size]);
 
   useFocusEffect(
     React.useCallback(() => {
@@ -69,10 +72,6 @@ function <%= entityNameCapitalized %>Screen(props) {
     props.performSearch(query)
   }
   <%_ } _%>
-  const fetch<%= entityNamePlural %> = React.useCallback(() => {
-    getAll<%= entityNamePlural %>({ page: page - 1, sort, size });
-  }, [getAll<%= entityNamePlural %>, page, sort, size]);
-
 
   const handleLoadMore = () => {
     <%_ if (pagination === 'no') { _%>

generators/react-native/templates/app/modules/home/home-screen.js.ejs

@@ -20,13 +20,13 @@ function HomeScreen(props) {
         {account && account.login ? (
           <View style={[styles.authContainer, styles.authContainerTrue]} testID="authDisplayTrue">
             <Text style={styles.authText}>
-              <Ionicons name="md-checkmark-circle" size={22} color={'white'} /> You are signed in as {account.login}
+              <Ionicons name="checkmark-circle" size={22} color={'white'} style={{ position: 'absolute', marginLeft: -20 }} /> You are signed in as {account.login}
             </Text>
           </View>
         ) : (
           <View style={[styles.authContainer, styles.authContainerFalse]} testID="authDisplayFalse">
             <Text style={styles.authText}>
-              <Ionicons name="md-information-circle" size={22} color={'white'} /> You are not signed in.
+              <Ionicons name="information-circle" size={22} color={'white'} style={{ position: 'absolute', marginLeft: -20 }} /> You are not signed in.
             </Text>
           </View>
         )}

generators/react-native/templates/app/navigation/modal-screen.js.ejs

@@ -18,9 +18,9 @@ export function ModalScreen({ route, navigation, isError = false }) {
           <View style={styles.flex}>
             <Text style={styles.titleFont}>
               {isError ? (
-                <Ionicons name="md-close-circle-outline" style={styles.errorIcon} size={32} />
+                <Ionicons name="close-circle-outline" style={styles.errorIcon} size={32} />
               ) : (
-                <Ionicons name="md-checkmark-circle-outline" style={styles.successIcon} size={32} />
+                <Ionicons name="checkmark-circle-outline" style={styles.successIcon} size={32} />
               )}{' '}
               {route.params.title || ''}
             </Text>

generators/react-native/templates/app/navigation/nav-container.js.ejs

@@ -108,7 +108,7 @@ export const getDrawerRoutes = () => {
 };
 
 const linking = {
-  prefixes: ['rnapp://', Linking.makeUrl('/')],
+  prefixes: ['rnapp://', Linking.createURL('/')],
   config: {
     initialRouteName: 'Home',
     screens: {
@@ -169,8 +169,8 @@ function NavContainer(props) {
         getAccount();
       }
     };
-    AppState.addEventListener('change', handleChange);
-    return () => AppState.removeEventListener('change', handleChange);
+    const sub = AppState.addEventListener('change', handleChange);
+    return () => sub.remove();
   }, [getAccount]);
 
   useReduxDevToolsExtension(navigationRef);

generators/react-native/templates/app/shared/components/search-bar/search-bar.js.ejs

@@ -15,7 +15,7 @@ export default function SearchBar(props) {
   const dimensions = useWindowDimensions();
   return (
     <View style={[styles.container, { width: dimensions.width - Metrics.baseMargin }]}>
-      <Ionicons name="md-search" size={Metrics.icons.tiny} style={styles.searchIcon} />
+      <Ionicons name="search" size={Metrics.icons.tiny} style={styles.searchIcon} />
       <TextInput
         placeholder="Search"
         placeholderTextColor={Colors.white}

generators/react-native/templates/e2e/scripts/download-expo.sh.ejs

@@ -17,7 +17,7 @@ if [ ! -d $APP_PATH ]; then
   mkdir $APP_PATH
 
   # query expo.io to find most recent ipaUrl
-  IPA_URL=$(curl --silent --show-error https://expo.io/--/api/v2/versions | jq -r '.sdkVersions."49.0.0".iosClientUrl')
+  IPA_URL=$(curl --silent --show-error https://expo.io/--/api/v2/versions | jq -r '.sdkVersions."51.0.0".iosClientUrl')
 
   # download tar.gz
   TMP_PATH=./exponent.tar.gz

generators/react-native/templates/package.json

@@ -29,11 +29,12 @@
     "seamless-immutable": "7.1.4",
     "sockjs-client": "1.6.1",
     "webstomp-client": "1.2.6",
+    "setimmediate": "1.0.5",
     "yup": "1.4.0"
   },
   "devDependencies": {
     "@babel/runtime": "7.24.7",
-    "@config-plugins/detox": "6.0.0",
+    "@config-plugins/detox": "8.0.0",
     "@react-native-community/eslint-config": "3.2.0",
     "@redux-devtools/extension": "3.3.0",
     "@storybook/addons": "7.6.17",

generators/react-native/templates/package.json.ejs

@@ -21,12 +21,12 @@
     "precommit": "lint-staged",
 <%_ } _%>
     "postinstall": "patch-package",
-    "prettier": "prettier --write \"{,.,**/,.jhipster/**/}*.{md,json,yml,js,ts,tsx}\"",
     "start": "expo start",
     "web": "expo start --web"
   },
   "dependencies": {
     "@expo/vector-icons": "EXPO_REPLACE_WITH_VERSION",
+    "@expo/metro-runtime": "EXPO_REPLACE_WITH_VERSION",
     "@react-native-async-storage/async-storage": "EXPO_REPLACE_WITH_VERSION",
     "@react-native-community/datetimepicker": "EXPO_REPLACE_WITH_VERSION",
     "@react-native-masked-view/masked-view": "EXPO_REPLACE_WITH_VERSION",

lib/patch-navigation.js

@@ -20,7 +20,7 @@ function patchNavigationForEntity(entity) {
   });
 
   // import entity screens to navigation
-  const navigationDeclaration = `{ name: '${entity.entityNameCapitalized}', route: '${entity.entityFileName}', component: ${entity.entityNameCapitalized}Screen, options: { title: '${entity.entityNamePlural}', headerLeft: () => <HeaderBackButton onPress={() => navigate('Entities')} />, headerRight: () => <HeaderBackButton label=" New " onPress={() => navigate('${entity.entityNameCapitalized}Edit', { id: undefined })} backImage={(props) => <Ionicons name="md-add-circle-outline" size={32} color={props.tintColor} />} /> },},`;
+  const navigationDeclaration = `{ name: '${entity.entityNameCapitalized}', route: '${entity.entityFileName}', component: ${entity.entityNameCapitalized}Screen, options: { title: '${entity.entityNamePlural}', headerLeft: () => <HeaderBackButton onPress={() => navigate('Entities')} />, headerRight: () => <HeaderBackButton label=" New " onPress={() => navigate('${entity.entityNameCapitalized}Edit', { id: undefined })} backImage={(props) => <Ionicons name="add-circle-outline" size={32} color={props.tintColor} />} /> },},`;
   this.patchInFile(entityStackPath, {
     before: 'jhipster-react-native-navigation-declaration-needle',
     insert: navigationDeclaration,