Are you using createMaterialTopTabNavigator? If not, then check out https://reactnavigation.org/docs/material-top-tab-navigator/

It looks like this:

const TopTabs = createMaterialTopTabNavigator();

function TopTab( ) {
  return (
    <TopTabs.Navigator
      {/* Custom top tab bar */}
      tabBar={(props) => <CustomTabBar {...props} />}
    >
      <TopTabs.Screen
        name={"Screen1"}
        component={ScreenOne}
        options={{ tabBarLabel: "Screen 1"}}
      />
      <TopTabs.Screen
        name={"Screen2"}
        component={ScreenTwo}
        options={{ tabBarLabel: "Screen 2"}}
      />
    </TopTabs.Navigator>
  );
}

A key thing to mind is that, basically, TopTabs in the example is just a component. So you can use it as you use other components as so:

  <View style={styles.someStyle}>
    <View style={{width: 150}}>
      <TopTab />
    </View>
  </View>

• In iOS devices, screenHeight === windowHeight;
• In Android devices with bottom navigator bar, screen height === windowHeight + statusBarHeight + bottomNavigatorBarHeight ;
• In Android devices without bottom navigator bar, bottomNavigatorBarHeight is zero.

import {Dimensions, StatusBar} from 'react-native'; 

const SCREEN_HEIGHT = Dimensions.get('screen').height; // device height
const STATUS_BAR_HEIGHT = StatusBar.currentHeight || 24; 
const WINDOW_HEIGHT = Dimensions.get('window').height;