How to show text (YES/NO) inside a switch in react-native

[lavarajallu]

I am new to react-native. In my app, I'm using a switch and changing the tint color to differentiate ON and OFF, but my actual requirement is to show "YES" or "NO" text inside the switch like below.

Here is my Code:

Please give me suggestions to solve this issue, Any help much appreciated.

[tioback]

Have you tried buttonContent?

<Switch 
    buttonContent={this.state.active? "YES" : "NO"} 
    onActivate={() => this.setState({active: true})}
    onDeactivate={() => this.setState({active: false})}
/>

[lavarajallu]

yes thank u ,but i solved my issue

[tioback]

@lavarajallu, please post the solution and/or close ticket :-)

[lavarajallu]

First Install this:
npm install --save react-native-switch

in Your Js file
import { Switch } from 'react-native-switch';

<Switch
value={true}
onValueChange={(val) => console.log(val)}
disabled={false}
activeText={'On'}
inActiveText={'Off'}
backgroundActive={'green'}
backgroundInactive={'gray'}
circleActiveColor={'#30a566'}
circleInActiveColor={'#000000'}/>

[Moniovic]

did not worked for me. It get stuck when after first toggle

[indventures]

@Monivic
value is set always true here.You have to do like this

state = { switchValue: false };
toggleSwitch = () => {
this.setState({ switchValue: !this.state.switchValue });
};

and inside render

      <Switch
        value={this.state.switchValue}
        onValueChange={this.toggleSwitch}
        disabled={false}
        activeText={'On'}
        inActiveText={'Off'}
        backgroundActive={'green'}
        backgroundInactive={'gray'}
        circleActiveColor={'#30a566'}
        circleInActiveColor={'#000000'}
      />

[zakariamosa]

const [automaticdischarge, setAutomaticDischarge] = useState(true);
toggleSwitch = () => {
setAutomaticDischarge(!automaticdischarge);
};

<Switch
value={automaticdischarge}
onValueChange={(value)=>{
toggleSwitch();
console.log(value);
}}
disabled={false}
activeText={'Yes'}
inActiveText={'No'}
backgroundActive={'green'}
backgroundInactive={'gray'}
circleActiveColor={'#30a566'}
circleInActiveColor={'#000000'}
/>