React-Native: Can't Navigate to the Second Screen

Question

sorry if my question is a bit long but this is my first one here and I'm really desperate to know what's wrong with my code. Thank you in advance

Please I need some help with my React-Native app. So in short, my app is about a login screen (username and password) with a checkbox to save login and a login button. After entering the username and password the second screen should be a simple Welcoming screen: "Welcome {userName}". If the user checks the save login box and presses login, the app will navigate to the second screen and he can't go back (no back button) and the next time the user opens the app it directly takes him/her to the second screen.

So, my problem is that I can't navigate to the second screen and I don't know how to remove the back button. Here is my code:

App.js:

 import React, { Component } from 'react'; import { SafeAreaView,Text,Button } from 'react-native'; import { createStackNavigator } from 'react-navigation-stack'; import { createAppContainer } from "react-navigation"; import FirstScreen from './first'; import SecondScreen from './second'; import myDB from './myDB'; const AppNavigator = createStackNavigator({ Login: FirstScreen, Welcome: SecondScreen }, { initialRouteName: "Login" }) const AppContainer = createAppContainer(AppNavigator) export default class App extends React.Component{ render() { return<AppContainer/>; } }

first.js:

 import React, { Component } from 'react'; import { SafeAreaView, Text, Button, TextInput, CheckBox, StyleSheet } from 'react-native'; import { createAppContainer } from 'react-navigation'; import { createStackNavigator } from 'react-navigation-stack'; import myDB from './myDB'; class FirstScreen extends Component { constructor (props) { super(props); } state = { userName: '', password: '', chkValue: false, }; handleUserName = (text) => { this.setState({ userName: text }); }; handlePasword = (text1) => { this.setState({ password: text1 }); }; openSecondScreen = () => { myDB.getData.userName = this.state.userName; myDB.getData.password = this.state.password; this.props.navigation.navigate('second'); }; chkChange = (text2) => { this.setState({ chkValue: text2 }); }; render() { return ( <SafeAreaView style={{ alignItems: 'center' }}> <Text>Username</Text> <TextInput style={styles.input} value={this.state.userName} placeholderTextColor="white" onChangeText={this.handleUserName} /> <Text>Password</Text> <TextInput style={styles.input} value={this.state.password} placeholderTextColor="white" onChangeText={this.handlePasword} secureTextEntry="true" /> <SafeAreaView style={styles.checkboxContainer}> <CheckBox value={this.state.chkValue} onValueChange={this.chkChange} style={styles.checkbox} /> <Text style={styles.label}>Save Login</Text> </SafeAreaView> <SafeAreaView style={styles.view1}> <Button style={styles.btn1} title="Login" onPress={this.openSecondScreen}></Button> </SafeAreaView> </SafeAreaView> ); } } export default FirstScreen; const styles = StyleSheet.create({ input: { height: 30, backgroundColor: 'white', paddingLeft: 15, paddingRight: 15, margin: 8, }, view1: { flexDirection: 'column', }, checkboxContainer: { flexDirection: 'row', marginBottom: 20, }, checkbox: { alignSelf: 'center', }, label: { margin: 8, }, });

second.js:

 import React, { Component } from 'react'; import { SafeAreaView, Text, Button } from 'react-native'; import myDB from './myDB'; class SecondScreen extends Component { state = { userName: myDB.getData.userName, password: myDB.getData.password }; render() { const { navigation } = this.props; const userName = navigation.getParam('userName', 'No-User'); const password = navigation.getParam('password', 'No-User'); return ( <SafeAreaView style={{ alignItems: 'center' }}> <Text>Welcome {this.state.userName}</Text> </SafeAreaView> ); } } export default SecondScreen;

myDB.js:

 import React, { Component } from 'react'; class myDb extends Component { static myVariable = { userName:'', password:'' }; static getData = (myVariable) => { return myVariable; }; } export default myDb;

I use snack.expo.io to build these apps just in case if it helps.

Answer 1

Have a try with the below small change

this.props.navigation.navigate('second');

to

this.props.navigation.navigate('Welcome');

as we have to use the key we have specified in the navigator to navigate to a specific screen.