React-navigation not working in release apk

Question

I have problem with react navigation in build apk. It's not working. In virtual device is okay but when I build the apk it stop working.

Here is my code:

class LoginScreen extends Component {

  constructor(){
           super();
           this.state = {
            email: '',
            password: '',
            result: false,
           }
       }

    _userLogin() {
      
         let email = this.state.email;
         let password = this.state.password;
         
         if (email && password) { 
           fetch("https://URL/api/login", {
             method: "POST",
             headers: {
               'Content-Type': 'application/json'
             },
             body: JSON.stringify({
               email: email,
               password: password,
             })
           })
           .then(async(response) => {
            let data = await response.json()
            if(response.status !== 200) {
              console.log(data.message)
            }
            return data})
           .then((responseData) => {
             this.renderResults(responseData)
             console.log(responseData)
           })
           .then(() => this.props.navigation.navigate(IntroScreen))
           .catch((err) => console.log(err.message))
           
         }
       }

       renderResults = (responseData) => {
           if(responseData){
                this.setState({
                    result: true
                })
           }
       }

       handleEmail = (text) => {
             this.setState({ email: text })
       }


       handlePassword = (text) => {
             this.setState({ password: text })
       }

  render() {

    return (
      <Container style={styles.container}>
        <StatusBar translucent backgroundColor="transparent"/>
        <Content>
        <View style={styles.imageContainer}>
          <Image style={styles.imageWave} source={require("./pictures/Group723.png")}/>
          <Text style={styles.headerTextContainer}>
              <Text style={styles.boldHeaderText}>Hotel </Text> 
              <Text style={styles.thinHeaderText}>Maids</Text>
          </Text>
        </View>
          <Text style={styles.loginThinText}>Log In</Text>      
        <CardView
          cardElevation={3}
          cardMaxElevation={4}
          cornerRadius={15}
           style={{
            marginTop: 1,
            width: 322,
            height: 104,
            alignSelf: 'center',
          }}>
        
          <TextInput  
          keyboardType="email-address" 
          style={styles.textAreaEmail} 
          placeholderTextColor="#C8C8C8" 
          placeholder="Username-HK"
          onChangeText={(text) => this.handleEmail(text)}
          />
          
          <TextInput 
          secureTextEntry={true} 
          style={styles.textAreaPassword} 
          placeholderTextColor="#C8C8C8" 
          placeholder="Password-HK"
          onChangeText={(text) => this.handlePassword(text)}
          />
        </CardView>

        <Button 
        ViewComponent={LinearGradient}
        linearGradientProps={{
          start: {x: 0, y: 0},
          end: {x: 1, y: 0},
          colors: ['#36C2CF', '#0093E9']
        }}
        type="clear" 
        title="SIGN IN"
        buttonStyle={styles.buttonLoginContainer}
        titleStyle={styles.loginBtnText}
        onPress={() => this._userLogin()}
        />
        </Content>
      </Container>
    );
  }
}

export default LoginScreen;

Even if I change onPress function down on the button only with "() => this.props.navigation.navigate(IntroScreen)". It doesn't work. I thought it was something in the request function. But then I try only with navigation and it didn't work.

Answer 1

don't use async and await in your .then().

Assuming that the name of your intro component is the string 'IntroScreen', you need to put that in quotes.

Also, don't put the navigation in its own .then().

.then((response) => {
            if(response.status !== 200) {
              console.log(data.message)
              return response.json();
            }
            })
           .then((responseData) => {
             this.renderResults(responseData)
             console.log(responseData)
             this.props.navigation.navigate('IntroScreen');
           })
           .catch((err) => console.log(err.message))