How to add components above createMaterialTopTabNavigator?

Question

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

Answer 1

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