Please provide the following:
- SDK Version: 41.0.0
- Platforms(Android/iOS/web/all): Android & iOS but only able to test on a real device with Android (Android 9)
Hello everyone,
I upgraded my Expo SDK two days ago, from 39 to 41, and everything seems to work well on dev/prod modes with expo.
However, after making a new build (since I updated my Expo SDK) with
expo build:android --release-channel production -t app-bundle
and expo build:ios --release-channel production
, and after launching the app once it’s available on the PlayStore, the app crash on certain screens. Once it has crashed for one screen, I’m not able to launch the app again, so I have to uninstall it and install it again.
Here’s my app.json if it helps:
{
"expo": {
"name": "MyAppName",
"description": "MyDescription",
"slug": "appname",
"privacy": "public",
"platforms": [
"ios",
"android"
],
"version": "7.5.8",
"orientation": "portrait",
"icon": "./src/assets/images/myIcon.png",
"splash": {
"image": "./src/assets/images/myLogo.png",
"resizeMode": "contain"
},
"updates": {
"fallbackToCacheTimeout": 30000
},
"assetBundlePatterns": [
"./src/assets/**/*"
],
"scheme": "appname",
"ios": {
"supportsTablet": true,
"appStoreUrl": "appStoreUrl",
"config": {
"usesNonExemptEncryption": false,
"branch": {
"apiKey": "myAPIkey"
}
},
"bundleIdentifier": "my.app.name",
"googleServicesFile": "./GoogleService-Info.plist",
"infoPlist": {
"NSCameraUsageDescription": "Cette application utilise la caméra pour scanner les code-barres des produits."
},
"usesAppleSignIn": true
},
"web": {
"config": {
"firebase": {
"appId": "myAppId",
"apiKey": "myAPIKey",
"measurementId": "MyMeasurementId"
}
}
},
"android": {
"package": "my.app.name",
"icon": "./src/assets/images/myLogo.png",
"versionCode": 23,
"playStoreUrl": "myPlayStoreURL",
"permissions": [
"CAMERA"
],
"googleServicesFile": "./google-services.json",
"config": {
"branch": {
"apiKey": "myAPIkey"
}
},
"useNextNotificationsApi": true
},
"hooks": {
"postPublish": [
{
"file": "sentry-expo/upload-sourcemaps",
"config": {
"organization": "myappname",
"project": "mobile",
"authToken": "myAuthToken"
}
}
]
},
"notification": {
"icon": "./src/assets/images/myLogo.png",
"color": "#1E1E1E"
},
"facebookAppId": "FbId",
"facebookDisplayName": "MyAppName",
"facebookScheme": "FbScheme"
}
}
and my package.json:
{
"name": "my-new-project",
"main": "node_modules/expo/AppEntry.js",
"private": true,
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"eject": "expo eject",
"test": "node ./node_modules/jest/bin/jest.js --watchAll",
"prettier": "prettier --write \"**/*.js\"",
"check-formatting": "prettier \"**/*.js\" --check",
"re:watch": "yarn bsb -clean-world -make-world -w",
"re:build": "yarn bsb -clean-world -make-world"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"@expo-google-fonts/didact-gothic": "^0.1.0",
"@expo/vector-icons": "^12.0.0",
"@react-native-async-storage/async-storage": "^1.13.0",
"@react-native-community/masked-view": "0.1.10",
"@react-native-community/netinfo": "6.0.0",
"@react-native-community/toolbar-android": "^0.1.0-rc.2",
"@react-native-community/viewpager": "5.0.11",
"@react-navigation/bottom-tabs": "^5.11.3",
"@react-navigation/drawer": "^5.11.5",
"@react-navigation/material-bottom-tabs": "^5.3.11",
"@react-navigation/material-top-tabs": "^5.3.11",
"@react-navigation/native": "^5.9.4",
"@react-navigation/stack": "^5.14.4",
"base-64": "^0.1.0",
"bodybuilder": "^2.3.0",
"eslint": "^5.7.0",
"expo": "^41.0.0",
"expo-analytics": "^1.0.16",
"expo-analytics-segment": "~10.1.1",
"expo-app-loading": "^1.0.3",
"expo-apple-authentication": "~3.1.0",
"expo-asset": "~8.3.1",
"expo-barcode-scanner": "~10.1.2",
"expo-branch": "~4.1.0",
"expo-camera": "~11.0.2",
"expo-constants": "~10.1.3",
"expo-facebook": "~11.0.5",
"expo-firebase-analytics": "~4.0.2",
"expo-firebase-core": "~3.0.0",
"expo-font": "~9.1.0",
"expo-image-manipulator": "~9.1.0",
"expo-linking": "~2.2.3",
"expo-notifications": "~0.11.6",
"expo-permissions": "~12.0.1",
"expo-store-review": "~4.0.2",
"expo-web-browser": "~9.1.0",
"joi": "^17.3.0",
"lodash": "^4.17.20",
"move-file": "2.0.0",
"react": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz",
"react-native-collapsible": "^1.5.3",
"react-native-elements": "1.2.1",
"react-native-expandable-listview": "^1.3.1",
"react-native-flash-message": "^0.1.21",
"react-native-gesture-handler": "~1.10.2",
"react-native-htmlview": "^0.15.0",
"react-native-in-app-notification": "^3.1.0",
"react-native-keyboard-aware-scroll-view": "^0.8.0",
"react-native-loading-spinner-overlay": "^1.1.0",
"react-native-markdown-renderer": "^3.2.8",
"react-native-popover-view": "^1.0.14",
"react-native-reanimated": "~2.1.0",
"react-native-safe-area-context": "3.2.0",
"react-native-screens": "~3.0.0",
"react-native-swiper": "^1.6.0",
"react-native-swiper-flatlist": "^2.0.7",
"react-native-typography": "^1.4.1",
"react-native-vector-icons": "^6.7.0",
"react-native-viewpager": "^0.2.13",
"react-native-webview": "11.2.3",
"react-navigation": "^4.4.3",
"react-test-renderer": "^16.14.0",
"readable-stream": "^3.6.0",
"reason-react": "^0.7.1",
"reason-react-native": "^0.60.0",
"sentry-expo": "^3.1.0"
},
"devDependencies": {
"babel-preset-expo": "8.3.0",
"bs-platform": "^5.2.1",
"prettier": "1.17.1"
}
}
I’m still not sure if it’s about my navigation, here’s how it’s built:
- Those are the main tabs of my app, appearing at the bottom of the screen
from App.js:
const Stack = createNativeStackNavigator();
function MainStack() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name={'FindAlternatives'}
component={FindAlternatives}
options={{ headerShown: false, title: null }}
/>
<Stack.Screen
name={'FindInfo'}
component={FindInformation}
options={{ headerShown: false, title: null }}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
- Each tab is a screen/a stack with subscreens
from MainTabNavigator.js:
export function HomeTabs() {
return (
<Tab.Navigator
initialRouteName={'Home'}
tabBarOptions={{
activeTintColor: selectedColor,
inactiveTintColor: Colors.tabIconDefault,
keyboardHidesTabBar: !(Platform.OS === 'ios'),
labelStyle: styles.labelText
}}
>
<Tab.Screen
name={'FindInfo'}
component={renderFindInfoScreen}
options={{
tabBarLabel: 'FINDINFO',
tabBarIcon: ({ focused }) => (
<SimpleLineIcons
name={'magnifier'}
size={25}
style={{ marginBottom: -3 }}
color={focused ? selectedColor : Colors.tabIconDefault}
/>
)
}}
/>
<Tab.Screen
name={'FindAlternatives'}
component={renderFindAltScreen}
options={{
tabBarLabel: 'FINDALTERNATIVES',
tabBarIcon: ({ focused }) => (
<SimpleLineIcons
name={'target'}
size={25}
style={{ marginBottom: -3 }}
color={focused ? selectedColor : Colors.tabIconDefault}
/>
)
}}
/>
</Tab.Navigator>
);
}
const FindAlternativesStack = createNativeStackNavigator();
export function FindAlternatives() {
return (
<FindAlternativesStack.Navigator
initialRouteName={'FindAlternatives'}
screenOptions={{
headerTitleStyle: STYLES.headerWithBorderStyleText,
headerStyle: STYLES.headerWithBorderStyle
}}
>
<FindAlternativesStack.Screen
name={'FindAlternatives'}
component={HomeTabs}
options={{ headerShown: false, title: null }}
/>
<FindAlternativesStack.Screen
name={'Suggestions'}
component={RenderProductScreen}
options={{
headerStyle: STYLES.headerWithoutBorderStyle,
title: null,
headerTopInsetEnabled: false,
headerHideShadow: true,
headerTintColor: DARK_COLOR
}}
/>
</FindAlternativesStack.Navigator>
);
}
const FindInformationStack = createNativeStackNavigator();
export function FindInformation() {
return (
<FindInformationStack.Navigator
initialRouteName={'FindInfo'}
screenOptions={{
headerTitleStyle: STYLES.headerWithBorderStyleText,
headerStyle: STYLES.headerWithBorderStyle
}}
>
<FindInformationStack.Screen
name={'FindInfo'}
component={HomeTabs}
options={{ headerShown: false, title: null }}
/>
<FindInformationStack.Screen
name={'Products'}
component={RenderProductScreen}
options={{
headerStyle: STYLES.headerWithoutBorderStyle,
title: null,
headerTopInsetEnabled: false,
headerHideShadow: true,
headerTintColor: DARK_COLOR
}}
/>
</FindInformationStack.Navigator>
);
}
- Each screen contains TouchableOpacity components that brings you to RenderProductScreen. And each RenderProductScreen contains TouchableOpacity components that brings you again to RenderProductScreen.
3.1 So if I want to go to a RenderProductScreen from renderFindAltScreen, I use
this.props.navigation.push('FindAlternatives', {
screen: 'Suggestions',
params: {
product: product_1
}
});
And it crashes there.
3.2 When I want to go to a RenderProductScreen from renderfindInfoScreen, I use:
this.props.navigation.push('FindInfo', {
screen: 'Products',
params: {
product: product_1
}
});
and it works.
Then, if I want to click again on a component that brings me to another product, I use:
this.props.navigation.push('Products', {
product: product_2
});
and it crashes there.
The system is the same weither I’m from ‘FindAlternatives’ or ‘FindInfo’, and it works well on dev/prod mode with expo.
I’m wondering what’s happening here, hoping some of you have answers
Also, once it’s fixed, will the OVA update expo publish --release-channel production
work?
Thank you for your time,
Lola