CODEWITHSUNDEEP
react-native
Hussian Shaik
Hussian Shaik

Reputation: 2661

how to change the fontsize and color for values in segmentedControlIOS in react-native

I am using SegmentedControlIOS, I am unable to change the size and color of values in SegmentedControlIOS in react-native.

<SegmentedControlIOS 
        tintColor="#D7D7D5"
        style={styles.SegmentedControlIOS}
         values={this.state.values}//for these values i need to set the size and color
          selectedIndex={this.state.selectedIndex}
          onChange={this._onChange}
          onValueChange={(val) =>{
            this.setState({
              value:val
            })
          }}/>

Upvotes: 1

Views: 939

Answers (1)

Chris Geirman
Chris Geirman

Reputation: 9684

Looking at the source... https://github.com/facebook/react-native/blob/62e8ddc20561a39c3c839ab9f83c95493df117c0/Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.ios.js

It appears you can change the color, but not the size of the text.

Here's the UIExplorer example on RNPlay and the relevant example below. https://rnplay.org/apps/pNY2zA

var ColorSegmentedControlExample = React.createClass({
  render() {
    return (
      <View>
        <Text>Color</Text>
        <View style={{marginBottom: 10}}>
          <SegmentedControlIOS tintColor="#ff0000" values={['One', 'Two', 'Three', 'Four']} selectedIndex={0} />
        </View>
        <View>
          <SegmentedControlIOS tintColor="#00ff00" values={['One', 'Two', 'Three']} selectedIndex={1} />
        </View>
      </View>
    );
  },
});

Upvotes: 1

Related Questions