I created a basic SplashScreen.tsx that just has some text on it. Then, I created this LoginCreateAccountScreen.tsx, which has a Login button and Create Account button. I want my app to show the SplashScreen.tsx for a few seconds before it automatically navigates to LoginCreateAccountScreen.tsx. Also, pressing the buttons should redirect the user to other screens, but that also does not work. I don't know how to do this and have had a lot of difficulties figuring out exactly how to accomplish this.
I used this React Native Navigation Article as well as This Tutorial to get to where I am right now, along with various StackOverflow posts. But to be honest, I am pretty lost as there is just so much going on with regards to frontend navigation.
I don't understand how AppNavigator.js and App.js (the entry point for my app) work in conjunction to let me be able to navigate to another screen from my current screen. Right now, I can't get any kind of navigation working. I have to manually change the screen by setting it in App.js.
My App.js, which renders the SplashScreen. But won't transition to the LoginCreateAccountScreen.
import React, { Component } from 'react';
import EmojiDict from './screens/EmojiDict';
import SplashScreen from './screens/SplashScreen';
import LoginCreateAccountScreen from './screens/LoginCreateAccountScreen'
export default class App extends Component {
render() {
return <SplashScreen />;
}
}
My AppNavigator.js:
import { createAppContainer, createSwitchNavigator } from "react-navigation";
import { createStackNavigator } from "react-navigation";
import MainTabNavigator from "./MainTabNavigator";
import { Platform } from "react-native";
// Importing my screens here.
import LoginCreateAccountScreen from "../screens/LoginCreateAccountScreen";
import CreateAccountScreen from "../screens/CreateAccountScreen";
import LoginScreen from "../screens/Login/LoginScreen";
import SplashScreen from "../screens/SplashScreen";
const MainNavigator = createStackNavigator({
SplashScreen: {screen: SplashScreen},
LoginCreateAccountScreen: {screen: LoginCreateAccountScreen},
LoginScreen: {screen: LoginScreen},
CreateAccountScreen: {screen: CreateAccountScreen},
});
const App = createAppContainer(MainNavigator);
export default App;
My SplashScreen.tsx:
import React, { Component } from 'react';
import { View, Text, StyleSheet, FlatList } from 'react-native';
class SplashScreen extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.title}>
The Good App
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
title: {
fontSize: 45,
textAlign: 'center',
fontWeight: 'bold'
}
});
export default SplashScreen;
My LoginCreateAccountScreen.tsx:
import React, { Component } from 'react';
import {
StyleSheet,
Button,
View,
SafeAreaView,
Text,
Alert,
TouchableOpacity
} from 'react-native';
import Constants from 'expo-constants';
function Separator() {
return <View style={styles.separator} />;
}
class CreateAccountOrLogin extends Component {
handleLogInButton = () => {
Alert.alert('Log In pressed')
this.props.navigation.navigate("LoginScreen");
};
handleCreateAccountButton = () => {
Alert.alert('Create Account pressed')
this.props.navigation.navigate("CreateAccountScreen");
};
render() {
return (
<View style={styles.container}>
<TouchableOpacity
style={styles.customButtonBackground}
onPress={() => this.handleLogInButton()}>
<Text style={styles.customButtonText}>Login</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.customButtonBackground}
onPress={() => this.handleCreateAccountButton()}>
<Text style={styles.customButtonText}>Create Account</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
/* Here, style the text of your button */
customButtonText: {
fontSize: 35,
fontWeight: '400',
color: "#fff",
textAlign: 'center'
},
/* Here, style the background of your button */
customButtonBackground: {
backgroundColor: "#007aff",
paddingHorizontal: 30,
paddingVertical: 5,
borderRadius: 30,
width: "70%",
aspectRatio: 5 / 1,
}
});
export default CreateAccountOrLogin;
I get the following error when I press on the Login or Create Account button, which is the same for both:
