DEV Community

Create your own radio button component in react native easily

Saad on April 11, 2019

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 but...

Read full post

avs30390 • Sep 26 '19

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

Saad • Sep 26 '19

just export it and use the component passing the options

Lucia Buggiano • Jan 13 '21

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

Saad • Jan 13 '21

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

Lucia Buggiano • Jan 13 '21

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

Saad • Jan 13 '21

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...

Lucia Buggiano • Jan 13 '21

Great thank you so much!

avs30390 • Sep 26 '19

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

Saad • Sep 26 '19

can you please share your code?

avs30390 • Sep 27 '19 • Edited

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.

Emmanuel • Sep 20 '19

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

SirCQQ • Sep 23 '19

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

Emmanuel • Sep 24 '19

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

the dude with the beer • Apr 29 '20

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!

Osama Usmani • Oct 8 '19

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

palanpuricoder • Dec 17 '20

how to uncheck radio button?

Saad • Dec 17 '20

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.