How to create a custom top navigation bar in React Native

Question

Hi i am building an app in React Native and I want to have a customized tabbar. I have tried it with React navigation but I can't figure out how to style the way I want...

This is what I want it to look like eventually:

The information page

The photos page

With react navigation i'm able to swipe the screen and go to the other page. So that is really nice usability which I'd like to keep (if that's possible ofcourse)

I have tried with passing a custom component in the navigator, but I couldn't get that to work. So when clean and native it looks like this right now:

const ProfileTabScreen = ({ navigation }) => {
  return (
    <ProfileTabNavigator.Navigator>
      <ProfileTabNavigator.Screen name="Info" component={ProfileInfoScreen} />
      <ProfileTabNavigator.Screen name="Photos" component={ProfilePhotosScreen} />
    </ProfileTabNavigator.Navigator>
  );
};

The ProfileInfo- and ProfilePhotoScreen components are right now just empty views through which i can navigate with the top navigation.

EDIT

Thanks @Hikaru Watanabe, I have looked into createMaterialTopTabNavigator and managed to get it looking like the picture below. It works really well, the only thing I'm worries about is the white space on the sides I created because they are made with percentages (width: 45%, left: 2.5%). So on bigger screens it might look a bit different. This is not optimal, but I couldn't figure out how else to make it. This was the only thing that seemed to work and look the same on the iPhone and Android I test on.

The code to get it done:

const ProfileTabScreen = () => {
    return (
        <ProfileTabNavigator.Navigator tabBarOptions={{
            activeTintColor: Colors.COLOR_WHITE,
            labelStyle: {
                textTransform: "uppercase",
            },
            inactiveTintColor: Colors.COLOR_SUPER_DARK_GREY,
            indicatorStyle: {
                height: null,
                top: '10%',
                bottom: '10%',
                width: '45%',
                left: '2.5%',
                borderRadius: 100,
                backgroundColor: Colors.PRIMARY_TWO,
            },
            style: {
                alignSelf: "center",
                width: '50%',
                borderRadius: 100,
                borderColor: "blue",
                backgroundColor: "white",
                elevation: 5, // shadow on Android
                shadowOpacity: .10, // shadow on iOS,
                shadowRadius: 4, // shadow blur on iOS
            },
            tabStyle: {
                borderRadius: 100,
            },
        }}
        swipeEnabled={true}>
     <ProfileTabNavigator.Screen name="Info" component={ProfileInfoScreen} />
     <ProfileTabNavigator.Screen name="Photos" component={ProfilePhotosScreen} />
   </ProfileTabNavigator.Navigator>
  );
 };

Answer 1

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>