CODEWITHSUNDEEP
react-nativeuisegmentedcontrol
Hussian Shaik
Hussian Shaik

Reputation: 2661

SegmentedControlIOS for android in react-native

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.

Upvotes: 5

Views: 8204

Answers (4)

Made in Moon
Made in Moon

Reputation: 2464

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

__

-

enter image description here

or

see ButtonGroup from react-native-elements

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

Upvotes: 4

gigeos
gigeos

Reputation: 307

A good equivalent for SegmentedControlIOS should be Swipe Views with tab views: https://developer.android.com/training/implementing-navigation/lateral.html

To use it in React Native android version you can use this library: https://github.com/skv-headless/react-native-scrollable-tab-view

It's strange that React Native's team not purpose this native component built in framework

Upvotes: 1

VItaly
VItaly

Reputation: 21

Very simple component, 100% compatible with IOS version.

'use strict';

var React = require('react');
var ReactNative = require('react-native');
var { Component, View, Text, TouchableOpacity } = ReactNative;

var SimpleSegmentedControl = React.createClass({
    getInitialState: function () {
        return {
            values: this.props.values || [],
            selectedIndex: this.props.selectedIndex || 0,
            style: this.props.style || {},
            onChange: this.props.onChange
        };
    },

    componentWillReceiveProps: function (props) {
        this.setState(props);
    },

    onPress: function (selectedIndex) {
        if (typeof this.state.onChange === 'function') {
            return this.state.onChange(selectedIndex);
        }
    },

    render: function () {
        return (
            <View style={[{flexDirection: 'row', borderWidth: 1, borderColor: '#007AFF', borderRadius: 5}, this.state.style]}>
                {this.state.values.map(function (value, position, values) {
                    return (
                        <TouchableOpacity key={position} onPress={()=>this.onPress(position)} style={{flex: 1}}>
                            <View style={{flex: 1, alignItems: 'center', justifyContent: 'center', padding: 5,
                            backgroundColor: this.state.selectedIndex == position ? '#007AFF' : 'transparent',
                            borderRightWidth: position < values.length - 1 ? 1 : 0, borderRightColor: '#007AFF'}}>
                                <Text style={{fontSize: 13, color: this.state.selectedIndex == position ? 'white' : '#007AFF'}}>{value}</Text>
                            </View>
                        </TouchableOpacity>
                    );
                }.bind(this))}
            </View>
        );
    }
});

module.exports = SimpleSegmentedControl;

Upvotes: 2

Max
Max

Reputation: 1195

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.

Upvotes: 6

Related Questions