I hope you don't mind the length of my query, as this happens to be my debut here and I am really eager to unravel the mysteries surrounding my code conundrum. Your assistance in this matter would be greatly appreciated.
Could someone please lend me a helping hand with my React-Native application? To put it succinctly, my app centers around a login screen that includes fields for entering a username and password, along with a checkbox option to save the login information, and a login button. Upon entering the username and password, the next screen should simply display a welcoming message: "Welcome {userName}". If the user decides to check the save login box and clicks on login, the app should navigate to the second screen which is not equipped with a back button. Moreover, the subsequent time the app is launched, it should directly steer the user to the second screen.
The crux of my dilemma lies in being unable to switch to the second screen and grappling with removing the back button feature.
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(...) {...}
export default FirstScreen;
const styles = StyleSheet.create({...})second.js:
import React, { Component } from 'react';
import { SafeAreaView, Text, Button } from 'react-native';
import myDB from './myDB';
class SecondScreen extends Component {...}
export default SecondScreen;myDB.js:
import React, { Component } from 'react';
class myDb extends Component {...}
export default myDb;I undertook the development of these apps through snack.expo.io, just thought this detail might aid in troubleshooting.