A Segmented Control with React Native for both iOS and Android

React Native Segmented Control

Installation

yarn add rn-segmented-control
# or
npm i rn-segmented-control

Dependencies

npm i prop-types

Usage

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import SegmentedControl from 'rn-segmented-control';

const AppRoot = () => {
  const [tabIndex, setTabIndex] = React.useState(1);
  const handleTabsChange = index => {
    setTabIndex(index);
  };
  return (
    <View style={styles.container}>
      <Text style={styles.textStyle}>Hello,World !</Text>
      <Text style={styles.textStyle}> Segmented Control with 2 labels</Text>
      <SegmentedControl
        tabs={['Label', 'Label']}
        onChange={() => { }}
        paddingVertical={6}
      />
      <Text style={styles.textStyle}> Segmented Control with 3 labels</Text>
      <SegmentedControl
        tabs={['Label', 'Label', 'Label']}
        onChange={() => { }}
        paddingVertical={10}
      />
      <Text style={styles.textStyle}> Segmented Control with 4 labels</Text>
      <SegmentedControl
        tabs={['Label', 'Label', 'Label', 'Label']}
        onChange={() => { }}
        paddingVertical={14}
      />
      <Text style={styles.textStyle}>Customised Segmented Control</Text>
      <SegmentedControl
        tabs={['Shop', 'Discover', 'Brands']}
        currentIndex={tabIndex}
        onChange={handleTabsChange}
        segmentedControlBackgroundColor='#86c4fd'
        activeSegmentBackgroundColor='#0482f7'
        activeTextColor='white'
        textColor='black'
        paddingVertical={18}
      />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    marginHorizontal: 16,
  },
  textStyle: {
    fontSize: 24,
    textAlign: 'center',
    paddingVertical: 10
  }
})

export default AppRoot;

Screenshot

Props

Name	Description	Required	Type	Default
tabs	An array of labels for segments	YES	Array	[]
onChange	A callback Function with pressed segment index	YES	Function	() => {}
currentIndex	Index for the currently active segment	YES	Number	0
activeSegmentBackgroundColor	Background color of Active Label	NO	Color	‘white’
segmentedControlBackgroundColor	Background color of the segment	NO	Color	‘#E5E5EA’
textColor	Color of Label Text	NO	Color	‘black’
activeTextColor	Color of Active Label Text	NO	Color	‘black’
paddingVertical	A numeric value to manually adjust the height.	NO	Number	12

Color accepts all React Native Colors.

Example

Checkout the example here.

Blog

Have a look at my blog here.

Built with

react-native

Todos

[ ] Customisable Text Styles
[ ] Make it work in Landscape mode
[ ] Custom Animation Spring Config
[ ] Add React Native Reanimated library for animations

Contributing

Pull requests are always welcome! Feel free to open a new GitHub issue for any changes that can be made.

Author

Karthik B

Download Details:

Author: Karthik-B-06

GitHub: https://github.com/Karthik-B-06/react-native-segmented-control

#react-native #react #mobile-apps