Skip to content
master
Go to file
Code

README.md

npm npm npm

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 { Dimensions, StyleSheet, Text, View, Button } from 'react-native';
import SegmentedControl from '../components/segmentedControl';

const AppRoot = () => {
  const [tabIndex, setTabIndex] = React.useState(1);
  const [theme, setTheme] = React.useState('LIGHT');
  const toggleTheme = () => theme === 'LIGHT' ? setTheme('DARK') : setTheme('LIGHT');
  const handleTabsChange = index => {
    setTabIndex(index);
  };
  return (
    <View style={[styles.container, { backgroundColor: theme === 'LIGHT' ? 'white' : 'black' }]}>
      <Text style={[styles.textStyle, { color: theme === 'LIGHT' ? 'black' : 'white' }]}>Hello,World !</Text>
      <Button title='Toggle Theme' onPress={toggleTheme}></Button>
      <Text style={[styles.textStyle, { color: theme === 'LIGHT' ? 'black' : 'white' }]}>Segmented Control with 2 labels</Text>
      {/* Default Segmented Control */}
      <SegmentedControl
        tabs={['Label', 'Label']}
        onChange={() => { }}
        paddingVertical={6}
        containerStyle={{
          marginVertical: 20
        }}
        currentIndex={tabIndex}
        onChange={handleTabsChange}
        theme={theme}
      />
      <Text style={[styles.textStyle, { color: theme === 'LIGHT' ? 'black' : 'white' }]}> Segmented Control with 3 labels</Text>
      {/* Segmented Control with a custom width */}
      <SegmentedControl
        tabs={['Label', 'Label', 'Label']}
        onChange={() => { }}
        paddingVertical={10}
        containerStyle={{
          marginVertical: 20
        }}
        width={Dimensions.get('screen').width - 200}
        theme={theme}
      />
      <Text style={[styles.textStyle, { color: theme === 'LIGHT' ? 'black' : 'white' }]}> Segmented Control with 4 labels</Text>
      <SegmentedControl
        tabs={['Label', 'Label', 'Label', 'Label']}
        onChange={() => { }}
        paddingVertical={14}
        width={Dimensions.get('screen').width - 90}
        containerStyle={{
          marginVertical: 20
        }}
        textStyle={{
          fontWeight: '300',
          fontSize: 24
        }}
        theme={theme}
      />
      <Text style={[styles.textStyle, { color: theme === 'LIGHT' ? 'black' : 'white' }]}>Customised Segmented Control</Text>
      {/* Segmented Control with a custom width, container style and font weight */}
      <SegmentedControl
        tabs={['Shop', 'Explore', 'Search']}
        segmentedControlBackgroundColor='#86c4fD'
        activeSegmentBackgroundColor='#0482f7'
        activeTextColor='white'
        textColor='black'
        paddingVertical={10}
        width={Dimensions.get('screen').width - 100}
        containerStyle={{
          marginVertical: 20
        }}
        textStyle={{
          fontWeight: '300'
        }}
      />
    </View >
  )
}


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


export default AppRoot;

📷 Screenshot

iOS Android Dark Mode

🔧 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 Set by theme
segmentedControlBackgroundColor Background color of the segment NO Color Set by theme
textColor Color of Label Text NO Color Set by theme
activeTextColor Color of Active Label Text NO Color Set by theme
paddingVertical A numeric value to manually adjust the height. NO Number 12
width Sets the width of the segmented control NO Number Screen Specific Width
containerStyle Style object for the Segmented Control NO ViewPropTypes.style {}
textStyle Style object for the Labels NO Text.style {}
isRTL Controls the toggle animation direction NO Bool false
theme App Theme NO oneOf['LIGHT','DARK] 'LIGHT'

Color accepts all React Native Colors.

containerStyle accepts all View styles and does not override the defaults provided by the package

textStyle accepts all Text styles and overrides the defaults except the label colors set by props

🎉 Example

Checkout the example here.

📓 Blog

Have a look at my blog here.

Built with ❤️

Todos

  • 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

📋 License

MIT

About

A Segmented Control with React Native for both iOS and Android with Dark Mode

Topics

Resources

License

Releases

No releases published
You can’t perform that action at this time.