DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Saad
Saad

Posted on • Updated on

React Native Radio Button Create your own radio button component in react native easily

You can easily create your own radio button components in react native very easily. First you need to create an array of options for your radio buttons and pass it to your radio button component like so:

const options = [
    {
        key: 'pay',
        text: 'Most High Pay',
    },
    {
        key: 'performance',
        text: 'Most Perfomance',
    },
    {
        key: 'aToZ',
        text: 'A - Z',
    },
    {
        key: 'zToA',
        text: 'Z - A',
    },
];

{...}
<RadioButtons options={options} />

after this in your radio button component you can map all these options in your render method and create radio button views

{options.map(item => {
    return (
        <View key={item.key} style={styles.buttonContainer}>
            <Text>{item.text}</Text>
            <TouchableOpacity style={styles.circle} />
        </View>
    });
}

this will create default radio buttons which looks like this -

default

Right now it is time to set the state when clicked on the radio button. First we declare our state

state = { value: null }

then inside out tag we define our checked button when clicked on any particular button.

<TouchableOpacity
    style={styles.circle}
    onPress={() => this.setState({ value: key })} // we set our value state to key
>
    { value === item.key && (<View style={styles.checkedCircle} />) } // when value is equal to key
</TouchableOpacity>

So right now when clicked it looks like this -

checked

finally the styles -

buttonContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 30,
},
circle: {
    height: 20,
    width: 20,
    borderRadius: 10,
    borderWidth: 1,
    borderColor: '#ACACAC',
    alignItems: 'center',
    justifyContent: 'center',
},
checkedCircle: {
    width: 14,
    height: 14,
    borderRadius: 7,
    backgroundColor: '#794F9B',
},

Here is the snack link - https://snack.expo.io/@saad-bashar/radio-buttons

Top comments (21)

Collapse
 
avs30390 profile image
avs30390

how reuse handler for radio button i did not find item when i tried to reuse in App.js file can you help in to pass some other props for the same component

i have Tried but did not get the item in child component

Collapse
 
saadbashar profile image
Saad

just export it and use the component passing the options

Collapse
 
lubuggiano profile image
Lucia Buggiano

How would you handle an onSubmit ? I've been trying for hours...

Collapse
 
saadbashar profile image
Saad

Hi Lucia! May I know what are you trying to do in onSubmit function?

Collapse
 
lubuggiano profile image
Lucia Buggiano

I used the Radio Buttons as options to flag content and made the text options β€œInnapropriate”, β€œMisteading”, β€œIrrelevant” etc. I want to change the β€œselected” state to the clicked option.value and save it

Thread Thread
 
saadbashar profile image
Saad

Hi Lucia, I have updated my code snack example with an onSubmit call. Please check if it helps.

snack.expo.io/@saad-bashar/radio-b...

Thread Thread
 
lubuggiano profile image
Lucia Buggiano

Great thank you so much!

Collapse
 
avs30390 profile image
avs30390

i have used the same but did not get item key when click on the radio button.

Collapse
 
saadbashar profile image
Saad

can you please share your code?

Collapse
 
avs30390 profile image
avs30390 • Edited on

RadioButton.js

class RadioButton extends Component {
constructor(props) {
super(props)
this.state = {
value: null,
Arr: []
}
}
_renderRadioButton() {
return this.props.Arr.map((item, i) => {
return (


{item.text}


style={Styles.radioCircleStyles}
onPress={this.props.onPress}
>
{this.props.value === item.key && ()}



)
})
}

render() {
    return (
        <View style={Styles.radioButtonMainContainerStyles} >
            {this._renderRadioButton()}
        </View>


    )
}

}

APP.jS

this._handleRadioButton(item)} value ={this.state.value}/>

Please find the screenshot for the error
Or Send me your email-id i will share you my code.

Collapse
 
dondes17 profile image
Emmanuel

hello , how you can pass the state in a props of your component ?

Collapse
 
sircqq profile image
SirCQQ

When you use a component that you create you can pass props like arguments, there you can pass the state too like

In you component you can access it like

{this.props.nameOfThePropInTheComponent}

Hope it helps you :D

Collapse
 
dondes17 profile image
Emmanuel

in fact, I found the answer rather quickly but on the spot I do not remember more ....
Thank you for your answer !!

Collapse
 
boriboy profile image
the dude with the beer

Great post.
I didn't copy paste this into my project although used this as inspiration to build my own radio button component - thank dude!

Collapse
 
osamausmani profile image
Osama Usmani

How to have a default Value selected.? For example, I want to have the first value as selected by default?

Collapse
 
palanpuricoder profile image
palanpuricoder

how to uncheck radio button?

Collapse
 
saadbashar profile image
Saad

Hi, good question. You can do it easily by checking if the value is already selected, if it is already selected then make the value state null. I have updated the snack, You can also check the image.

Collapse
 
avinaashsharma profile image
Avinash Sharma

How can we customize a radio button to square blocks?

Collapse
 
saadbashar profile image
Saad

just play with ui

Collapse
 
masterhandi profile image
Handi

i have created a package for this radio button, might help you if wanna something easy , npmjs.com/package/rn-radio-button

Collapse
 
radioonlineluisteren profile image
Radio Online Luisteren

Thank you! I applied it to my Radio streaming site radioonlineluisteren.nl/

DEV

Thank you.

Β 
Thanks for visiting DEV, we’ve worked really hard to cultivate this great community and would love to have you join us. If you’d like to create an account, you can sign up here.