SegmentedControlIOS for android in react-native

Question

I am confused with the usage of SegmentedControlIOS in react-native, i check it in IOS simulator it works, But when i check it in android it throws an error as below

SegmentedControlIOS is not supported on this platform

here is my code:

<View >
        <SegmentedControlIOS 
        tintColor="#D7D7D5"
        style={styles.SegmentedControlIOS}

         values={this.state.values}
          selectedIndex={this.state.selectedIndex}
          onChange={this._onChange}
          onValueChange={(val) =>{
            this.setState({
              value:val
            })
          }}/>        
        </View>

Can anyone give me suggestions on how to use SegmentedControlIOS for both android and IOS, Any help in this regard is much appreciated.

Answer 1

SegmentedControl is a built in native component on iOS. However, there is no direct equivalent on Android which is why the react native component name ends with IOS and isn't support on Android. There is no obvious way make the built in component work on Android.

That leaves you with two options:

• Use or create your own version using standard components. This library has a good approximation of a segmented control that would work on both operating systems.

• Use two separate components on iOS and Android which can be done automatically by creating two files named:componentName.android.js and componentName.ios.js (See here for more information using different code for each platform). The iOS specific code could use the iOS segmented control and the Android version could use something like https://github.com/zzyyppqq/react-native-segmented-android or a custom implementation.

Answer 2

See react-native-segmented-control-tab for similar usage between both platform:

__

-

or

see ButtonGroup from react-native-elements

https://react-native-training.github.io/react-native-elements/docs/button_group.html