Trying to Navigate inside A Tab Navigator

This the Home Screen import React from 'react'; import { NavigationContainer } from '@react-navigation/native'; import { TextInput, Image, StyleSheet, Text, View, SafeAreaView,ScrollView } from 'react-native'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import { AntDesign ,MaterialIcons} from '@expo/vector-icons'; import TopTabNav from '../Components/TopTabNav'; import Shopping from '../Screens/Shopping';

const Homescreen =() =>{ return <>

Evast Marketing

     <NavigationContainer independent ={true}>

       <TopTabNav />
     </NavigationContainer>

</> }

const style = StyleSheet.create({ header: { marginTop: 20, marginLeft: 20, justifyContent: 'space-between', textAlign: 'center', flexDirection:'row'

},
imageContainer: {
    flex: 1,
    width: '100%',
    height: '100%'
},
searchContainer:{
  flexDirection:'row',
  flex:1,
  height:40,
  backgroundColor:'#e0ffff',
  borderRadius:20,
  alignItems:'center'

},
cartbtn:{
    width:50,
    height:47,
    marginLeft:20,
   // backgroundColor:'#ee82ee',
    alignItems:'center',
    borderRadius:10
},
ScrollbarContainer:{
    paddingHorizontal: 20,
    paddingVertical: 20,
    alignItems:'center'
},
sortBtn:{
    height:40,
    width:50,
    justifyContent:'center',
    alignItems:'center',
    color:'yellow',
    backgroundColor:'#0000cd',
    marginLeft:10,
    borderRadius:10,
    color:'#fff5ee'
} })

export default Homescreen;

And This is the Tab Navigator

import { StatusBar } from 'expo-status-bar'; import React,{useState} from 'react'; import { TextInput, Image, StyleSheet, Text, View, SafeAreaView,ScrollView } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs'; import { Ionicons ,FontAwesome , Feather ,AntDesign , Entypo} from '@expo/vector-icons'; import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs'; import News from '../Screens/News'; import Shopping from '../Screens/Shopping'; import Notification from '../Screens/Notification';

const Tab = createMaterialTopTabNavigator();

const TopTabNav = ({navigation}) =>{ return (

}}/> }}/> }} /> ); } export default TopTabNav; This is the Shopping Screen: import { StatusBar } from 'expo-status-bar'; import React from 'react'; import { NavigationContainer } from '@react-navigation/native'; import { Image, StyleSheet, Text, View, SafeAreaView,ScrollView , backgroundColor , Dimensions , TouchableOpacity} from 'react-native'; import {Accessories} from '../Components/Images'; import {Fashion} from '../Components/Images'; import {MotorSpares} from '../Components/Images'; import {MotorVehicles} from '../Components/Images'; import {Services} from '../Components/Images'; import {SolarEquipment} from '../Components/Images'; import {SportsWear} from '../Components/Images'; import {TechGadgets} from '../Components/Images'; import {TravelAndLaggage} from '../Components/Images'; import ACcessories from '../CartegoryPages/ACcessories'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; const Shopping =({navigation}) =>{ return ( navigation.navigate('ACcessories')}> Accessories Fashion MotorSpares Motor Vehicles Services solar And Equipment Sports wear TechGadgets Travel and Laggage ); } export default Shopping; const style = StyleSheet.create({ Container :{ flex : 1, flexDirection : 'column', justifyContent: "space-between", backgroundColor: "#fff", padding: 30, margin: 10, paddingVertical : 20, opacity : 0.8 }, ImageCase1 : { flex : 0.9, justifyContent: "center", alignItems: "center", textAlign: "center", resizeMode:"cover", height : '100%', width : '100%', backgroundColor :'grey', paddingVertical : 10, borderRadius : 20, }, ImageCase2 : { paddingVertical : 10, flex : 0.9, justifyContent: "center", alignItems: "center", textAlign: "center", backgroundColor:'grey', borderRadius : 20 }, ImageCase3: { paddingVertical : 10, flex : 0.9, justifyContent: "center", alignItems: "center", backgroundColor:'grey', textAlign: "center", borderRadius : 20 }, ImageCase4 : { paddingVertical : 10, flex : 0.9, justifyContent: "center", backgroundColor:'grey', alignItems: "center", textAlign: "center", borderRadius : 20 }, ImageCase5 : { paddingVertical : 10, flex : 0.9, justifyContent: "center", backgroundColor:'grey', alignItems: "center", textAlign: "center", borderRadius : 20 }, ImageCase6 : { paddingVertical : 10, flex : 0.9, justifyContent: "center", backgroundColor:'grey', alignItems: "center", textAlign: "center", borderRadius : 20 }, ImageCase7 : { paddingVertical : 10, flex : 0.9, justifyContent: "center", backgroundColor:'grey', alignItems: "center", textAlign: "center", borderRadius : 20 }, ImageCase8 : { paddingVertical : 10, flex : 0.9, justifyContent: "center", backgroundColor:'grey', alignItems: "center", textAlign: "center", borderRadius : 20 }, ImageCase9 : { paddingVertical : 10, flex : 0.9, justifyContent: "center", backgroundColor:'grey', alignItems: "center", textAlign: "center", borderRadius : 20 }, ImageCase10: { paddingVertical : 10, flex : 0.9, justifyContent: "center", backgroundColor:'grey', alignItems: "center", textAlign: "center", borderRadius : 20 }, emageStyle:{ height : 100, width : 100, resizeMode: "center", borderRadius : 10 }, }) How do i navigate using Touchable Opacity to Another Screen inside A top Tab Navigator

DeeTakue / Vajra

Trying to Navigate inside A Tab Navigator #1