moschan / react-native-simple-radio-button

Simple and handy animated radio button component for React Native
MIT License
453 stars 130 forks source link

make the selected label bold #156

Open niloufarzahiri92 opened 3 years ago

niloufarzahiri92 commented 3 years ago

can you please tell me how can I make the selected label bold? I need to bold the text of the option which I selected

Dalu26 commented 3 years ago

define two styles for the labelStyle prop and toggle when selected

example: import React, {useState} from 'react'; import {View, StyleSheet} from 'react-native'; import RadioForm, {RadioButton, RadioButtonInput, RadioButtonLabel} from 'react-native-simple-radio-button';

const RadioExample =()=>{ const [radioValue, setRadioValue] = useState(0) const {labelStyle, labelStyleOne } = styles;

var radioProps = [ {label: 'I am label one', value: 0}, {label: 'I am label two', value: 1}, {label: 'I am label three', value: 2} ] return(

{radioProps.map((obj, i) => ( {setRadioValue(i)}} buttonInnerColor={colors.white} buttonOuterColor={colors.white} buttonSize={12} buttonOuterSize={20} /> {setRadioValue(i)}} labelStyle={[radioValue === i ? labelStyleOne : labelStyle, textWhite, textFont15]} /> )) }

); }

const styles = StyleeSheet.create({ labelStyle: { marginLeft: 18, fontFamily: GStyles.textMontNormal.fontFamily }, labelStyleOne: { marginLeft: 18, fontFamily: GStyles.textMontBold.fontFamily }, })