title: How to go to another screen in top tab navigation in react native
body: <p>I want to go out of top tab navigation but it unable to navigate. It's giving error The action 'NAVIGATE' with payload {&quot;name&quot;:&quot;LoginPage&quot;} was not handled by any navigator.</p>
  <p>Do you have a screen named 'LoginPage'?</p>
  <p>If you're trying to navigate to a screen in a nested navigator, see <a href="https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator" rel="nofollow noreferrer">https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator</a></p>
  <p>I use nesting navigation also but not work. My Screens are below</p>
  <p>Top tab navigation screen</p>
  <pre><code>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 (
     &lt;NavigationContainer&gt;
       &lt;Tab.Navigator
        screenOptions={({ route }) =&gt; ({
         tabBarIcon: ({ focused, color }) =&gt; {
           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 &lt;Fontisto name={iconName} size={size} color={color} /&gt;;
         },
       })}
         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 },
         }}
       &gt;
         &lt;Tab.Screen name=&quot;Data&quot; component={ProfileData} /&gt;
         &lt;Tab.Screen name=&quot;Like&quot; component={ProfileLikeData} /&gt;
       &lt;/Tab.Navigator&gt;
     &lt;/NavigationContainer&gt;
   );
  }
  </code></pre>
  <p>profiledata.js</p>
  <pre><code>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 &quot;react-native-responsive-fontsize&quot;;
  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 (
        &lt;View style={styles.container}&gt;
          &lt;FlatGrid
            data={this.state.videos}
            spacing={0}
            renderItem={({ item }) =&gt; (
              &lt;TouchableOpacity onPress={()=&gt;navigate('LoginPage')} style={{flex:1}}&gt;
              // some data
              &lt;/TouchableOpacity&gt;
        )}
      /&gt;
        &lt;/View&gt;
      );
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex:1,
      // paddingHorizontal:wp('2%'),
      backgroundColor:'black',
      height: hp('100%'),
    },
  });
  </code></pre>