React Native Segmented Control

Let us try to build a Segmented Control with React Native.

You can also find an updated npm package here for the same with Dark mode feature.

3D Render by Udhaya Chandran

Setting up React Native Project.

(Skip to next section, if already done..)

Go ahead to this link https://reactnative.dev/docs/environment-setup#docsNav and follow the steps on creating a new react native project.

npx react-native init RN-SegmentedControl 

To start the application run npx react-native run-ios inside your React Native project folder. Open your project in VS Code and head to the file named App.js.And remove the code under the return statement and replace it with:

return {
<>
<View>
</View>
<>
}

You have successfully finished creating a project.

Let us start coding.

Go ahead and create the files:

src/components/segmentedControl

This is our component which will render the Segmented Control.

It accepts the following props :

  1. tabs: An Array of String, Labels for the segments
  2. onTabPress: A callback function returning the index of the segment clicked.
  3. currentIndex (Optional): Index value for setting the active segment. Defaults to 0.
  4. segmentedControlBackgroundColor (Optional): Background color of the segmented control.
  5. activeSegmentBackgroundColor (Optional): Background color of active segment.
  6. textColor (Optional): Color of segment label.
  7. activeTextColor (Optional): Color of active segment label.

So here we basically styled our segmented control using flex and rendered all the labels.

We have positioned an absolute View, which indicates the active segment, which will translate based on the segment label clicked.

The animation here is quite simple. We translate the absolute View-based on the number of Segments.

const translateValue = ((width - 4) / props?.tabs?.length

This value is multiplied by the active tab index value which gives the translateX value.

{transform: [     {          translateX: tabTranslate     }  ]}

So this gives a neat animation while changing the segments.

src/appRoot/index.js

In this file, we just render our component and customize it based on our needs.

Now head to App.js and render <AppRoot/> .

We would see something like this.

Looks nice !! Let us see how the animation works.

It works a treat !!

Let us try to run the project in Android now.

Ooops. We have a problem...

Let us go ahead and this style to the textWrapper object.

elevation: 9

Now the screen would look like:

So we now have a Custom Segmented Control for both Android and iOS.

Happy coding !!

If you find this useful, do check out my blog on iOS-like Search Component.

This is Karthik representing Timeless.

You can find the repo here and an npm package here.

If you find this blog post helpful, share it with a friend.

If you find any difficulties please feel free to add your comments.

Timeless

Practical Design and Development

Karthik Balasubramanian

Written by

Trying to Solve Problems with Code @ timeless.co. Open sourcing the solutions when possible.

Timeless

Timeless

An inside look into how we approach design, development and user experience at timeless.co

Karthik Balasubramanian

Written by

Trying to Solve Problems with Code @ timeless.co. Open sourcing the solutions when possible.

Timeless

Timeless

An inside look into how we approach design, development and user experience at timeless.co

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store