Repository files navigation

Native UI component for Segmented Control with custom style

animationType: 'middle-line'selectedLineAlign: 'text'selectedLineMode: 'full'

animationType: 'open-and-close'selectedLineAlign: 'text'selectedLineMode: 'text'

animationType: 'middle-line'selectedLineAlign: 'bottom'selectedLineMode: 'text'

animationType: 'middle-line'selectedLineAlign: 'top'selectedLineMode: 'full'

animationType: 'middle-line'selectedLineAlign: 'top'selectedLineMode: 'full'

animationType: 'middle-line'selectedLineAlign: 'text'selectedLineMode: 'text'

• Install usingnpm:

   npm install react-native-custom-segmented-control --save

• Locate the module lib folder in your node modules:PROJECT_DIR/node_modules/react-native-custom-segmented-control/lib.

• Drag theCustomSegmentedControl.xcodeproj project file into your project

• AddlibCustomSegmentedControl.a to your target'sLinked Frameworks and Libraries.

Require the native component:

import{CustomSegmentedControl}from'react-native-custom-segmented-control'

Now use it in your jsx inside yourView:

<CustomSegmentedControlstyle={{flex:1,backgroundColor:'white',marginVertical:8}}textValues={['ORDERS','PRODUCTS']}selected={0}segmentedStyle={{selectedLineHeight:2,fontSize:17,fontWeight:'bold',// bold, italic, regular (default)segmentBackgroundColor:'transparent',segmentTextColor:'#7a92a5',segmentHighlightTextColor:'#7a92a599',selectedLineColor:'#00adf5',selectedLineAlign:'bottom',// top/bottom/textselectedLineMode:'text',// full/textselectedTextColor:'black',selectedLinePaddingWidth:30,segmentFontFamily:'system-font-bold'}}animation={{duration:0.7,damping:0.5,animationType:'middle-line',initialDampingVelocity:0.4}}onSelectedWillChange={(event)=>{}}onSelectedDidChange={(event)=>{}}/>

##Properties

##Segmented Style Properties

##Animation Properties