When clicking the button in my react-native application, I am unable to move from one screen to the next. I have set up a Stack Navigation and have checked that my pages are correctly configured based on my research. If you notice any issues, please let me know.
Root Stack
import React from 'react'
import {createSwitchNavigator} from 'react-navigation'
import AuthNavigator from './stacks/AuthNavigator'
/**
* This file manages the switch navigators for different stacks within the application
*/
const RootStack = createSwitchNavigator(
{
Auth: AuthNavigator
},
{
initialRouteName: 'Auth'
}
)
export default RootStack
AuthNavigator.JS
import React from 'react'
import {createStackNavigator} from 'react-navigation-stack'
import LoginSignUpView from '../../../src/page/account/LoginSignUpView'
import SignUpView from '../../../src/page/account/SignUpView'
const AuthNavigator = createStackNavigator(
{
"LoginSignUpView": LoginSignUpView,
"SignUpView": SignUpView,
}
, {
initialRouteName: "LoginSignUpView"
}
);
LoginSignupView (Button Issue)
import React, {Component} from 'react'
import {View, ScrollView, Text, Image} from 'react-native'
import LaunchOptions from '../../components/applaunch/LaunchOptions'
import LaunchButtonStyle from '/Users/Documents/Mobile Applications/src/styles/Launch/LaunchButtonsStyle.styles.js'
import LaunchButton from '../../components/applaunch/LaunchButton'
import ImageStylesStyles from '../../styles/common/ImageStyles.styles'
/**
* This page allows a user to have the option to login or sign up to the application
* This page is the main controller of the Login/SignUp View ... All components should be placed here.
* User will look at this view
*/
class LoginSignUpView extends Component {
// CHANGE NAVIGATION BAR COLOR -- SEE HOW BOOKIT DOES THIS
static navigationOptions = {
title: 'The Plug ',
headerStyle: {backgroundColor: 'black'},
headerTitleStyle: {color: 'white', fontFamily: 'Impact', fontSize: 30} ,
};
render(){
return(
<ScrollView style= {{backgroundColor: 'black'}}>
<View>
<Image
source = {require('../../Images/FontSearch.png')}
style = {ImageStylesStyles.logoDefaultStyle}
/>
<LaunchOptions
text={'Create Account'}
//-----------------------BUTTON ISSUE HERE VVVVV
onPress={() => this.props.navigation.navigate("SignUpView")}
buttonStyle={LaunchButtonStyle.largeRoundBtn}
textStyle={LaunchButtonStyle.textStyle}
/>
</View>
<View style={{
borderBottomColor: 'white',
borderBottomWidth: 1,marginTop: 40
}}
/>
<View>
<LaunchButton
text={"Already have an account? Login"}
OnPress={"props.OnPress"}
textStyle={LaunchButtonStyle.smallLgnSignupBtnTextStyle}
/>
</View>
</ScrollView>
)
}
}
export default LoginSignUpView
LaunchOptions:
import React from 'react'
import {View, Text, ScrollView} from 'react-native'
import launchTextStyle from '/Users/Documents/Mobile Applications/ThePlugNetwork/src/styles/loginSignUpTextStyle.styles.js'
import Button from '/Users/Documents/Mobile Applications/src/components/common/Button.js'
/**
* Application Launch View for user to select to login or signup
*
* @param {*} props
*/
const LaunchOptions = (props) => {
return(
<ScrollView>
<View>
<Text style={launchTextStyle.bigTextTop}>Stay</Text>
<Text style={launchTextStyle.bigText}>Connected</Text>
<Text style={launchTextStyle.mediumText}>With The Latest</Text>
<Text style={launchTextStyle.smallText}>Government Updates</Text>
</View>
<View>
<Button
OnPress={props.OnPress}
buttonStyle={props.buttonStyle}
textStyle={props.textStyle}
>
{props.text}
</Button>
</View>
</ScrollView>
)
}
export default LaunchOptions