javascript - React Native: Unable to navigate to the' Login.js' screen

Question

I have created 3 files and places the navigation container in the app.js file. i am unable to navigate through the screens. I don't understand where the mistake lies.

App.js

import 'react-native-gesture-handler';
import React, { useState } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import Login from './Login.js';
import {createStackNavigator} from '@react-navigation/stack';
import InitialScreen from './InitialScreen.js';

const Stack = createStackNavigator();

function Nav() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="InitialScreen">
        <Stack.Screen name="Login" component={Login} />
        <Stack.Screen name="InitialScreen" component={InitialScreen} />

      </Stack.Navigator>
    </NavigationContainer>
  );
}
 export default Nav;

InitialScreen.js

import 'react-native-gesture-handler';
import React, { useState } from 'react';
import {Button, Text, TextInput, View, StyleSheet ,TouchableOpacity,Image} from 'react-native';
import Icon  from 'react-native-vector-icons/Feather';
import { NavigationContainer } from '@react-navigation/native';
import Login from './Login.js';


function InitialScreen({navigation}){
 const pressHandler=()=>{
       navigation.navigate('Login');
     }


  return (
  <>
  <View style={styles.container}>
    <View style={styles.Container0}>

     <TouchableOpacity>
        <Text style={{backgroundColor:'white',
                            fontSize:30,
                            borderWidth:2,
                            borderRadius:4,
                            marginTop: 5,
                            marginLeft:10,
                            marginRight:10,
                            fontWeight:'bold',
                             textAlign:'center',
                             padding:2,

                            }} onPress={pressHandler}
                                    >Login</Text>
        <Text style={{marginLeft:10,
                        fontSize:15,}}> Do not have an account?</Text>
         <Text style={{backgroundColor:'white',
                         fontSize:30,
                         borderWidth:2,
                         borderRadius:4,
                          marginTop: 5,
                          marginLeft:10,
                          marginRight:10,
                         fontWeight:'bold',
                          textAlign:'center',
                          padding:2,
                          }}>SignUp</Text>
     </TouchableOpacity>

    </View>

    <View style={styles.Container1}>
         <Image source={{uri: 'http://i.pinimg.com/originals/d1/9b/4d/d19b4d524b8f95b3c640228c28373696.jpg'}}
                     style={{width:'100%',
                     height:'100%',
                      marginTop:5,

                      flexDirection: 'column',
                      justifyContent: 'center',
                      alignSelf: 'center',}}/>
    </View>



    <View style={styles.Container3}>
             <Text style={{fontSize:25,fontWeight:'bold',
                            color:'white',
                            textAlign:'center',
                            }}>I am going to be so productive!!!!!!</Text>
    </View>
  </View>

  <View style={styles.icons}>
      <Icon
       name='download-cloud'
       size={30}
       />

       <Icon
              name='mail'
           size={30}
              />
       <Icon
              name='instagram'
            size={30}
              />
       <Icon
              name='link'
            size={30}
              />
  </View>
  </>
  );
}
const styles=StyleSheet.create({
container:
{ flex:0.9,
  marginLeft:5,
  marginRight:5,
  marginTop:5,
  marginBottom:5,
  backgroundColor:'black',
},
Container0:
{ flex:0.25,
flexDirection:'column',
backgroundColor:'#ffa07a',
},
Container1:
{
flex:0.6,
backgroundColor:'white',

},
Container3:
{flex:0.1,
 justifyContent:"center",
 alignItems:'center',
 marginTop:10,
},
icons:
{
flex:0.1,
flexDirection: 'row',
justifyContent:'space-around',
marginTop:10,
},
  }
 );

export default InitialScreen;

Login.js

import 'react-native-gesture-handler';
import React, { useState } from 'react';
import { Text, TextInput, View, StyleSheet ,TouchableOpacity,Image} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';



function Login() {
 const [text,onChangeText]= React.useState('Enter your email');
 const [Value,setValue]= React.useState('Enter your password');
return(
 <View style={styles.container}>
    <Text style={{marginTop:40,fontWeight:'bold',fontSize:40,textAlign:'center',}}>Login</Text>
    <TextInput
          style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
          onChangeText={text => onChangeText(text)}
          value={value}
        />
    <TextInput
            style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
            setValue={Value => setValue(Value)}
            value={value}
        />
 </View>

);
}
const styles=StyleSheet.create({
container:
{
flexDirection:'column',
}


});

export default Login;

I don't understand why the "onPress" isn't working here . I am unable to even click on it . it is just like a text with no response or change in opacity too . The navigation isn't working either.

question from:https://stackoverflow.com/questions/65833367/react-native-unable-to-navigate-to-the-login-js-screen

Answer 1

@nandita you are using onPress on Text tag. onPress event only works on TouchableOpacity or TouchableHightlight

try doing this.

      <TouchableOpacity onPress={pressHandler}>
          <Text style={{backgroundColor:'white',
                        fontSize:30,
                        borderWidth:2,
                        borderRadius:4,
                        marginTop: 5,
                        marginLeft:10,
                        marginRight:10,
                        fontWeight:'bold',
                         textAlign:'center',
                         padding:2,

                        }} 
                                >Login</Text>
         <TouchableOpacity>