How to go to another screen in top tab navigation in react native

Issue

I want to go out of top tab navigation but it unable to navigate. It's giving error The action 'NAVIGATE' with payload {"name":"LoginPage"} was not handled by any navigator.

Do you have a screen named 'LoginPage'?

If you're trying to navigate to a screen in a nested navigator, see https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator

I use nesting navigation also but not work. My Screens are below

Top tab navigation screen

import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen';
import ProfileData from './profiledata';
import ProfileLikeData from './profilelikedata';
import Fontisto from 'react-native-vector-icons/Fontisto';


const Tab = createMaterialTopTabNavigator();

export default function App() {
 return (
   <NavigationContainer>
     <Tab.Navigator
      screenOptions={({ route }) => ({
       tabBarIcon: ({ focused, color }) => {
         let iconName;
         let size;

         if (route.name === 'Data') {
           iconName = focused
             ? 'nav-icon-grid'
             : 'nav-icon-grid';
           size = focused
           ? 25
           : 25; 
         } else if (route.name === 'Like') {
           iconName = focused ? 'heart' : 'heart';
           size = focused
           ? 20
           : 20; 
         }
         return <Fontisto name={iconName} size={size} color={color} />;
       },
     })}
       tabBarOptions={{
         activeTintColor: '#d40786',
         inactiveTintColor: 'white',
         showIcon:true,
         showLabel:false,
         indicatorStyle: {
           width: 0, height: 0, elevation: 0,      
         },
         tabStyle: { width: wp('52%'),borderRightWidth:1,borderColor:'white' },
         style: { backgroundColor:'trasparent',borderTopWidth:0.5,borderColor:'white',paddingBottom:5 },
       }}
     >
       <Tab.Screen name="Data" component={ProfileData} />
       <Tab.Screen name="Like" component={ProfileLikeData} />
     </Tab.Navigator>
   </NavigationContainer>
 );
}

profiledata.js

import React from 'react';
import { View, StyleSheet, Text,ImageBackground,TouchableOpacity,Image } from 'react-native';
import { FlatGrid } from 'react-native-super-grid';
import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen';
import { RFPercentage, RFValue } from "react-native-responsive-fontsize";
import Toast from 'react-native-simple-toast';

export default class ProfileData extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
          videos:[],
          loginid:'',
          paused:true,
        };
      }

    static navigationOptions = {
      headerShown: false,
    };

   

 
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View style={styles.container}>
        <FlatGrid
          data={this.state.videos}
          spacing={0}
          renderItem={({ item }) => (
            <TouchableOpacity onPress={()=>navigate('LoginPage')} style={{flex:1}}>
            // some data
            </TouchableOpacity>
      )}
    />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex:1,
    // paddingHorizontal:wp('2%'),
    backgroundColor:'black',
    height: hp('100%'),
  },
});

Solution

You should create another stack that has your login screen or add the login screen in the tab navigator. for the first do something like this in your app.js

import { createStackNavigator } from '@react-navigation/stack';
import LoginScreen from './LoginScreen';  //Just import the login screen

const AuthStack = createStackNavigator();
const AuthStackScreen = () => (
  <AuthStack.Navigator>
    <AuthStack.Screen
      name="LoginPage"
      component={LoginScreen}
    />
  </AuthStack.Navigator>
);

//Then in your profiledata.js;

<TouchableOpacity onPress={()=>navigate('LoginPage')} style={{flex:1}}>
            // some data
</TouchableOpacity>

And for the second option just add the login screen in your tab navigator;

<Tab.Screen name="Data" component={ProfileData} />
<Tab.Screen name="Like" component={ProfileLikeData} />
<Tab.Screen name="LoginPage" component={LoginScreen} /> //Don't forget to import it

Answered By - Asusoft