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%'),

  },

});