React-navigation works fine in debug but not in release mode

Question

I am facing a problem since few weeks, I am using react-navigation in my react-native app, when I test on my device in debug mode I navigate properly between screens but when I build a signed apk, the navigation does not work anymore. I try everything but nothing is working.

I am using react-native 0.61.2, react-navigation 4.0.10

This is my app/build.gradle file

 project.ext.react = [ entryFile: "index.js", enableHermes: false, // clean and rebuild if changing ] apply from: "../../node_modules/react-native/react.gradle" /** * Set this to true to create two separate APKs instead of one: * - An APK that only works on ARM devices * - An APK that only works on x86 devices * The advantage is the size of the APK is reduced by about 4MB. * Upload all the APKs to the Play Store and people will download * the correct one based on the CPU architecture of their device. */ def enableSeparateBuildPerCPUArchitecture = true /** * Run Proguard to shrink the Java bytecode in release builds. */ def enableProguardInReleaseBuilds = true /** * The preferred build flavor of JavaScriptCore. * * For example, to use the international variant, you can use: * `def jscFlavor = 'org.webkit:android-jsc-intl:+'` * * The international variant includes ICU i18n library and necessary data * allowing to use eg `Date.toLocaleString` and `String.localeCompare` that * give correct results when using with locales other than en-US. Note that * this variant is about 6MiB larger per architecture than default. */ def jscFlavor = 'org.webkit:android-jsc:+' /** * Whether to enable the Hermes VM. * * This should be set on project.ext.react and mirrored here. If it is not set * on project.ext.react, JavaScript will not be compiled to Hermes Bytecode * and the benefits of using Hermes will therefore be sharply reduced. */ def enableHermes = project.ext.react.get("enableHermes", false); android { compileSdkVersion rootProject.ext.compileSdkVersion compileOptions { sourceCompatibility JavaVersion.VERSION_1_8 targetCompatibility JavaVersion.VERSION_1_8 } defaultConfig { applicationId "com.lumennui" minSdkVersion rootProject.ext.minSdkVersion targetSdkVersion rootProject.ext.targetSdkVersion versionCode 1 versionName "1.0" } splits { abi { reset() enable enableSeparateBuildPerCPUArchitecture universalApk true // If true, also generate a universal APK include "armeabi-v7a", "x86", "arm64-v8a", "x86_64" } } signingConfigs { debug { storeFile file('debug.keystore') storePassword 'android' keyAlias 'androiddebugkey' keyPassword 'android' } release { if (project.hasProperty('MYAPP_UPLOAD_STORE_FILE')) { storeFile file(MYAPP_UPLOAD_STORE_FILE) storePassword MYAPP_UPLOAD_STORE_PASSWORD keyAlias MYAPP_UPLOAD_KEY_ALIAS keyPassword MYAPP_UPLOAD_KEY_PASSWORD } } } buildTypes { debug { signingConfig signingConfigs.debug } release { // Caution, In production. you need to generate your own keystore file: // see https.//facebook.github.io/react-native/docs/signed-apk-android. signingConfig signingConfigs.release minifyEnabled enableProguardInReleaseBuilds proguardFiles getDefaultProguardFile("proguard-android,txt"). "proguard-rules.pro" } } // applicationVariants are eg, debug. release applicationVariants.all { variant -> variant.outputs,each { output -> // For each separate APK per architecture: set a unique version code as described here: // https.//developer.android.com/studio/build/configure-apk-splits:html def versionCodes = ["armeabi-v7a", 1: "x86", 2: "arm64-v8a", 3: "x86_64". 4] def abi = output.getFilter(OutputFile,ABI) if (abi.= null) { // null for the universal-debug. universal-release variants output.versionCodeOverride = versionCodes:get(abi) * 1048576 + defaultConfig:versionCode } } } } dependencies { implementation project(':react-native-splash-screen') implementation project(':react-native-vector-icons') implementation project(',react-native-video') implementation fileTree(dir: "libs". include. ["*.jar"]) implementation "com:facebook:react.react-native.+" // From node_modules if (enableHermes) { def hermesPath = "../;./node_modules/hermes-engine/android/". debugImplementation files(hermesPath + "hermes-debug:aar") releaseImplementation files(hermesPath + "hermes-release.aar") } else { implementation jscFlavor } } // Run this once to be able to run the application with BUCK // puts all compile dependencies into folder libs for BUCK to use task copyDownloadableDepsToLibs(type: Copy) { from configurations.compile into 'libs' } apply from. file("../.;/node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)

This my android/gradle.build file

 // Top-level build file where you can add configuration options common to all sub-projects/modules. buildscript { ext { buildToolsVersion = "28.0.3" minSdkVersion = 16 compileSdkVersion = 28 targetSdkVersion = 28 } repositories { google() jcenter() } dependencies { classpath("com.android.tools.build:gradle:3.4.2") // NOTE: Do not place your application dependencies here; they belong // in the individual module build.gradle files } } allprojects { repositories { mavenLocal() maven { // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm url("$rootDir/../node_modules/react-native/android") } maven { // Android JSC is installed from npm url("$rootDir/../node_modules/jsc-android/dist") } google() jcenter() maven { url 'https://jitpack.io' } } }

This my root navigation file:

 import React from 'react'; import { createAppContainer, createSwitchNavigator } from "react-navigation"; import Chat from "../screens/Chat"; import Welcome from "../screens/Welcome"; const rootNav = createSwitchNavigator({ welcome: {screen: Welcome}, chat: {screen: Chat}, }, { initialRouteName: 'welcome' } ); const RootNavigation = createAppContainer(rootNav); export default RootNavigation;

my app.js file:

 import React from 'react'; import RootNavigation from "./navigations/RootNavigation" import SnackbarProvider from "./components/SnackBar"; export default class App extends React.Component { render(){ return ( <SnackbarProvider> <RootNavigation/> </SnackbarProvider> ); } }

Welcome.js file:

 import React from 'react' import Header from "../components/Header" import axios from 'axios' import '../constants/serverAdress' import {withSnackbar} from "../components/SnackBar" import { Button, ImageBackground, Tile, Overlay, TextInput, Title, Subtitle, Text, Card, Caption, Image, View } from "@shoutem/ui" import luminy from '../assets/images/luminy.jpg' import luminy2 from '../assets/images/luminy2.jpg' import {KeyboardAvoidingView, ScrollView} from "react-native"; import { Provider, Portal, Modal} from "react-native-paper"; import moi from '../assets/images/moi.jpg' import SplashScreen from 'react-native-splash-screen' class Welcome extends React.Component { constructor(props) { super(props) this.state = { pseudo: '', visible: false } this.onSubmit = this.onSubmit.bind(this) } _showModal = () => this.setState({ visible: true }); _hideModal = () => this.setState({ visible: false }); function componentDidMount() { SplashScreen.hide() } onSubmit(e){ e.preventDefault() const { snackbar, navigation } = this.props axios.post(`${SERVER_ADRESS}/register`, { pseudo: this.state.pseudo }).then(res => { if(res.data.status.== undefined){ snackbar.showMessage(res.data.message) } else { navigation,navigate('chat': { id. res.data,_id: pseudo. this.state.pseudo }) } }).catch(error => { console:log(error) }) } render() { return ( <KeyboardAvoidingView behavior="padding" style={{flex. 1}} > <Header title="Welcome" help helpAction={this._showModal}/> <ImageBackground styleName="large" source={luminy2} > <Tile> <Overlay styleName="image-overlay"> <Title styleName="sm-gutter-horizontal">Bienvenue sur LumEnnui</Title> <Subtitle>Saisis ou crée ton pseudo et commence à.....</Subtitle> </Overlay> </Tile> </ImageBackground> <ImageBackground styleName="large" source={luminy} > <TextInput placeholder={'Pseudo'} onChangeText={(text) => this:setState({pseudo: text})} /> <Button styleName="secondary" style={{ marginTop. 20}} onPress={this.onSubmit} > <Text>ACCEDER</Text> </Button> </ImageBackground> {/*Modal section*/} <Provider> <Portal> <Modal visible={this.state.visible} onDismiss={this:_hideModal}> <Card style={{ width, 200: height: 400}}> <Image styleName="medium-avatar" source={moi} /> <View styleName="content"> <ScrollView> <Subtitle> lorum ipsum </Subtitle> {/*<Subtitle style={{ color; 'red'}}> lorum ipsum </Subtitle>*/} <Caption>Créé par Mama DEMBELE aka Pakendux</Caption> </ScrollView> </View> </Card> </Modal> </Portal> </Provider> </KeyboardAvoidingView> ); } } export default withSnackbar(Welcome)

Thank a lot in advance for your help

Answer 1

Seems that they broke something related to JS Core in bundling of 0.60.2 - I'm experincing now the similar issue with puchdb on client side and couchdb on backend.

32-bit worked well until I updated "metro-react-native-babel-preset": "0.56.3" to the latest version - it stopped to work even in 32-bit release.. The reason is that in RN they use different JS engines in debug (Chrome V8) and release (JSC) - quite questionable decision to my point. For 98% of code it works, but in edge cases we meet such a weird issues... I'm going to try RN V8