How to add components above createMaterialTopTabNavigator?

user_9552485 0
Viewed 1416

Following is my createMaterialTopTabNavigator

<Tab.Navigator
      lazy={true}
      tabBarOptions={{
        activeTintColor: "#9e39ff",
        inactiveTintColor: "#4b5358",
        showLabel: true,
        showIcon: true,
        tabStyle: {
          flexDirection: "row",
        },
      }}
    >
      <Tab.Screen
        name={CHAT_MATCH_SCREEN}
        component={ChatMatchScreen}
        options={{
          tabBarIcon: ({ focused }) => (
            <Image
              source={focused ? MATCHES_SELECTED_ICON : MATCHES_UNSELECTED_ICON}
            />
          ),
        }}
      />....

Now I need to add some Text,Button above createMaterialTopTabNavigator and after that show the createMaterialTopTabNavigator.

I tried adding createMaterialTopTabNavigator component in my own screen but it is not visible. I also tried adding the components above Tab.Navigator but they won't work

react-navigation-v5 react-native
4 Answers

Wrap your Tabs With parent View

I have shared a working code snippet.

Use this as NavigationContainer

<NavigationContainer ref={'navigation'}>
        <Stack.Navigator initialRouteName={initialRoute}>
          <Stack.Screen
            name='Auth'
            component={AuthModule}
            options={{ headerShown: false }}
          />
        </Stack.Navigator>
      </NavigationContainer>

and your tabs implementation will be like this.

<View
          style={{
            flex: 1,
            backgroundColor: APP_COLORS.COLOR_BACKGROUND,
            flexDirection: 'column',
          }}
        >
          <View>
            <Text style={{ textAlign: 'center' }}>Top Text on Tabs</Text>
          </View>

          <Tab.Navigator
            initialRouteName={initialRouteName}
            tabBarOptions={{
              inactiveTintColor: APP_COLORS.COLOR_666666,
              activeTintColor: APP_COLORS.COLOR_BLACK,
              style: {
                backgroundColor: 'white',
                marginTop: 0,
                marginBottom: 0,
                height: 40,
              },
              indicatorStyle: {
                height: 3,
                backgroundColor: APP_COLORS.COLOR_THEME,
              },
              labelStyle: {
                fontFamily: 'MuseoSans700',
                lineHeight: 16,
                ...getFlipForRTLStyle(),
              },
            }}
          >
            <Tab.Screen
              name='Login'
              component={() => (
                <Login calbacks={this.props.CallBacks} data={this.props.data} />
              )}
              options={{
                title: 'Signin',
              }}
            />
            <Tab.Screen
              name='Register'
              component={() => (
                <Register
                  calbacks={this.props.CallBacks}
                  data={this.props.data}
                />
              )}
              options={{ title: 'Register' }}
            />
          </Tab.Navigator>
        </View>
user_53838010

You can create a separate file for the tab bar and then import that file (tab bar file) into your main screen.

export default class Main extends Component {
render() {
    return (
        <View>
            <Customcomponent />{/* custom component */}
            <Tabbar />{/* Tabbar component */}
        </View>
    )
}}
Admin1

I had to wrap my Tab Navigator and the custom components inside a React.Fragment

So my code looks some like follows

<>
<MyCustomView>

</MyCustomView>
<Tab.Navigator>

</Tab.Navigator>
</>

Wrapping the entire thing inside a View or SafeAreaView does not work for me

user_95524850

in simplicity

  1. if you have only this one tabBar on your application put your Component on top of TopTabNavigation but the both of them should be inside NavigationContainer as below

    `import { createMaterialTopTabNavigator } from '@react-navigation/material- top-tabs'; import { NavigationContainer } from "@react-navigation/native";

    const Tab = createMaterialTopTabNavigator();

    function MyTabs() { return ( <Tab.Navigator> <Tab.Screen name="Home" component={HomeScreen} /> <Tab.Screen name="Settings" component={SettingsScreen} /> </Tab.Navigator> ); }`

  2. Second scenario is You have this navigation inside other navigation, somewhat this is an inside navigation/Nested navigation all you have to do on the above code is to add independent={true} as prop on your NavigationContainer otherwise you'll get an error saying nested NavigationContainer

the codes will be as below:

`import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
 import { NavigationContainer } from "@react-navigation/native";

const Tab = createMaterialTopTabNavigator();

function MyTabs() {
  return (
    <NavigationContainer independent={true}>
     **<YourComponent />**
       <Tab.Navigator>
         <Tab.Screen name="Home" component={HomeScreen} />
         <Tab.Screen name="Settings" component={SettingsScreen} />
       </Tab.Navigator>
    </NavigationContainer>
  );
}`
user_23508080
Related