When I click on Sign Up button I want to navigate to Sign up page but it did not work. I have imported the screens and navigated screen also to app.js file. I am getting an ReferenceError : Can’t find variable: navigation. Also I am unable to insert background image? Below is the Sign Up page.
import React from 'react'; import { StyleSheet,ImageBackground,Text, View, TextInput, TouchableOpacity } from 'react-native'; let bgImage='../../resources/images/bg2.png' export default class LoginScreen extends React.Component { state={ email:"", password:"", } render(){ return ( <View style={styles.container}> <Text style={styles.logo}>Trollo</Text> <View style={styles.box}> <View style={styles.inputView} > <TextInput style={styles.inputText} placeholder="Email" placeholderTextColor="#808080" onChangeText={text => this.setState({email:text})}/> </View> <View style={styles.inputView} > <TextInput secureTextEntry style={styles.inputText} placeholder="Password" placeholderTextColor="#808080" onChangeText={text => this.setState({password:text})}/> </View> <TouchableOpacity style={styles.loginBtn}> <Text style={styles.loginText}>SIGN IN</Text> </TouchableOpacity> <TouchableOpacity> <Text style={styles.forgot}>Forgot Password?</Text> </TouchableOpacity> </View> <Text style={styles.text1}>New Here?</Text> <TouchableOpacity style={styles.signupBtn} onPress = {(navigation) => navigation.navigate('Sign Up')}> <Text style={styles.loginText}>SIGN UP</Text> </TouchableOpacity> <Text style={styles.logoText}>Trollo</Text> </View> ); } } });
Advertisement
Answer
onPress
handler does not getting called with navigation
as the first parameter. That is undefined
. navigation
is a prop to your class component which is provided by stack navigator setup.
Instead of
onPress = {(navigation) => navigation.navigate('Sign Up')}
use
onPress = {() => this.props.navigation.navigate('Sign Up')}