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

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 e.g. `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 e.g. 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 :

mport 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

2 Likes

Hello! I was wondering if you were able to fix this issue?

3 Likes

I am facing the same, don’t know how to get it solve. It’s working only when the Debugger is ON.

Hello rsp8055,

The problem was not due to react-navigation but another problem.
I had an axios request to a server , when resolved I navigate to the next screen, it was axios
request not working because the server was not in https.

I Hope it helps you.