react-nativereact-navigation-bottom-tabreact-navigation-top-tabs

How to Add Top Tabs inside the bottom tab navigation


Hi I want to Add the top tabs inside the bottom tab page So I want the screen, instead of the bottom tab header, I want to show top tabs that can move to the another screen ,

And Here is my Snack Code Screen : https://snack.expo.dev/@aza1200/material-top-tabs-navigator-%7C-react-navigation

import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

function FeedScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Feed!</Text>
    </View>
  );
}

function NotificationsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Notifications!</Text>
    </View>
  );
}


const TopTab = createMaterialTopTabNavigator();
const BottomTab = createBottomTabNavigator();

const TopTabNavigator = () => {
  <TopTab.Navigator >
    <TopTab.Screen name="Post Room" component={FeedScreen} />
    <TopTab.Screen name="Rooms" component={NotificationsScreen} />
  </TopTab.Navigator>
}

export const App = () => {
  return (
    <NavigationContainer>
      <BottomTab.Navigator screenOptions={{headerShown: false}}>
        <TopTab.Screen name="Top Tabs will" component={TopTabNavigator} />
        <BottomTab.Screen name="Rooms" component={NotificationsScreen} />
      </BottomTab.Navigator>
    </NavigationContainer>
  )
}


export default App; 

Here is my Code and It will be very helpful if someone let me know how to fix below codes. Thanks.


Solution

  • try this

        import * as React from 'react';
    import {Text, View} from 'react-native';
    import {NavigationContainer} from '@react-navigation/native';
    import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
    import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
    
    function FeedScreen() {
      return (
        <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
          <Text>Feed!</Text>
        </View>
      );
    }
    
    function NotificationsScreen() {
      return (
        <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
          <Text>Notifications!</Text>
        </View>
      );
    }
    
    const TopTab = createMaterialTopTabNavigator();
    const BottomTab = createBottomTabNavigator();
    
    const TopTabNavigator = () => {
      return (
        <TopTab.Navigator>
          <TopTab.Screen name="Post Room" component={FeedScreen} />
          <TopTab.Screen name="Rooms" component={NotificationsScreen} />
        </TopTab.Navigator>
      );
    };
    
    export const App = () => {
      return (
        <NavigationContainer>
          <BottomTab.Navigator screenOptions={{headerShown: false}}>
            <TopTab.Screen name="Top Tabs will" component={TopTabNavigator} />
            <BottomTab.Screen name="Rooms" component={NotificationsScreen} />
          </BottomTab.Navigator>
        </NavigationContainer>
      );
    };
    
    export default App;
    

    only add return in TopTabNavigator.