title: How to create a custom top navigation bar in React Native
body: <p>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...</p>
  <p>This is what I want it to look like eventually:</p>
  <p><a href="https://i.stack.imgur.com/YsV0G.png" rel="noreferrer">The information page</a></p>
  <p><a href="https://i.stack.imgur.com/cKW9g.png" rel="noreferrer">The photos page</a></p>
  <p>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)</p>
  <p>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:</p>
  <pre><code>const ProfileTabScreen = ({ navigation }) =&gt; {
    return (
      &lt;ProfileTabNavigator.Navigator&gt;
        &lt;ProfileTabNavigator.Screen name=&quot;Info&quot; component={ProfileInfoScreen} /&gt;
        &lt;ProfileTabNavigator.Screen name=&quot;Photos&quot; component={ProfilePhotosScreen} /&gt;
      &lt;/ProfileTabNavigator.Navigator&gt;
    );
  };
  </code></pre>
  <p>The ProfileInfo- and ProfilePhotoScreen components are right now just empty views through which i can navigate with the top navigation.</p>
  <h2>EDIT</h2>
  <p>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.</p>
  <p><a href="https://i.stack.imgur.com/zogQO.png" rel="noreferrer"><img src="https://i.stack.imgur.com/zogQO.png" alt="enter image description here" /></a></p>
  <p>The code to get it done:</p>
  <pre><code>const ProfileTabScreen = () =&gt; {
      return (
          &lt;ProfileTabNavigator.Navigator tabBarOptions={{
              activeTintColor: Colors.COLOR_WHITE,
              labelStyle: {
                  textTransform: &quot;uppercase&quot;,
              },
              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: &quot;center&quot;,
                  width: '50%',
                  borderRadius: 100,
                  borderColor: &quot;blue&quot;,
                  backgroundColor: &quot;white&quot;,
                  elevation: 5, // shadow on Android
                  shadowOpacity: .10, // shadow on iOS,
                  shadowRadius: 4, // shadow blur on iOS
              },
              tabStyle: {
                  borderRadius: 100,
              },
          }}
          swipeEnabled={true}&gt;
       &lt;ProfileTabNavigator.Screen name=&quot;Info&quot; component={ProfileInfoScreen} /&gt;
       &lt;ProfileTabNavigator.Screen name=&quot;Photos&quot; component={ProfilePhotosScreen} /&gt;
     &lt;/ProfileTabNavigator.Navigator&gt;
    );
   };
  </code></pre>