Bonjour à tous,

Ça fait maintenant des jours que j'ai un gros problème avec React-native, en effet mon application utilise React-navigation pour la navigation entre les screens.

Elle marche très bien en mode développement mais dès que je builde l'apk et j'installe sur mon téléphone, la navigation ne se fait plus et aussi le Toast n'apparait pas.

J'ai vraiment tout essayé mais rien ne fonctionne.

Voici mon fichier app/build.gradle:

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)

Voici le fichier android/build.gradle :

// 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' }
    }
}

Voici mon fichier RootNavigation.js :

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;

Voici mon fichier App.js : 

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>
		);
	}
}

Et mon fichier Welcome.js :

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)

Merci  infiniment par avance pour votre aide.