best way to make a slider navigation in react native

Question

I try to recreate this application in react-native :

But I don't have any clue for making the red component. I search on internet and I found react-navigation V5, But it look complicated just for that.

I also think to create a horizontal ScrollView, and every time I click on new 'page', rerender all the current view. But this is a good way?

Thanks for answers.

Answer 1

I like @mainak's suggestion of using react-native-tab-view. To add to that answer I've made a simple implementation that does what you want.

First install the library: yarn add react-native-tab-view or npm i react-native-tab-view --save.

Then you can do something like this:

// ...
import {TabView, SceneMap, TabBar} from 'react-native-tab-view';
// ...

const initialLayout = {width: Dimensions.get('window').width};

const renderTabBar = (props) => (
  <TabBar
    {...props}
    tabStyle={{width: 120}}
    scrollEnabled={true}
    indicatorStyle={{backgroundColor: 'white', height: 5, borderRadius: 10}}
  />
);

const App = () => {
  // ...
  const [index, setIndex] = React.useState(0);
  const [routes] = React.useState([
    {key: 'first', title: 'First'},
    {key: 'second', title: 'Second'},
    {key: 'third', title: 'Third'},
    {key: 'fourth', title: 'Fourth'},
    {key: 'fifth', title: 'Fifth'},
  ]);

  const renderScene = SceneMap({
    first: FirstRoute,
    second: SecondRoute,
    third: ThirdRoute,
    fourth: FourthRoute,
    fifth: FifthRoute,
  });

  return (
    <TabView
      navigationState={{index, routes}}
      renderTabBar={renderTabBar}
      renderScene={renderScene}
      onIndexChange={setIndex}
      initialLayout={initialLayout}
    />
  );
};


const styles = StyleSheet.create({
  scene: {
    flex: 1,
  },
});

I've defined view components named FirstRoute, SecondRoute, etc...But change this to the screens you want to have in the tab bar.

The critical part here is renderTabBar, the custom TabBar component that is passed to the TabView component. On the TabBar component we have an option called scrollEnabled which if set to true, allows us to scroll the bar from left to right depending on the size of the tab view and tabs.

I've defined a width of 120 for each tab, but you might want play around with this value depending on the size of your tab labels.

The red highlight underneath the active tab bar you refer to is called an indicator and can be styled using the indicatorStyle prop:

indicatorStyle={{backgroundColor: 'white', height: 5, borderRadius: 10}}

---

For more info look at the documentation on the github page: https://github.com/satya164/react-native-tab-view.