How to set a radiobutton checked by default in react native? - reactjs

Question

how can I set a default checked radiobutton in react native? I'm trying to have a radio button already activated when the user enters the screen. Thanks for your help. II lready read that I have to use the value prop, but I do not now where to place it correctly, so that its working.
render(){
return (
<form>
<View>
<label>
<input
type="radio"
name="category"
value="anfaenger"
checked={this.state.selectedOption === "anfaenger"}
onChange={this.onValueChange}
/>
Anfänger
</label>
</View>
<View style={{marginTop:10}}>
<label>
<input
type="radio"
name="category"
value="geuebt"
checked={this.state.selectedOption === "geuebt"}
onChange={this.onValueChange}
/>
Geübt
</label>
</View>
<View style={{marginTop:10}}>
<label>
<input
type="radio"
name="category"
value="eingeschraenkt"
checked={this.state.selectedOption === "eingeschraenkt"}
onChange={this.onValueChange}
/>
Eingeschränkt
</label>
</View>
</form>
</View>
<View style={{magrinTop:'40'}}>
<button className="btn btn-default" type="submit">
Sichere Auswahl
</button>
<Button title="Erstelle meinen Plan" onPress={() => this.props.navigation.navigate('Uebungen', {
category: this.state.selectedOption,
}) }/>
</View>
</ScrollView>
</View>
);
}
}

Answer 1

You can pass a defaultChecked prop to a radio button component like so
export default function App() {
return (
<form>
<View>
<label>
<input
type="radio"
name="category"
value="anfaenger"
onChange={this.onValueChange}
defaultChecked
/>
Anfanger
</label>
</View>
<View style={{ marginTop: 10 }}>
<label>
<input
type="radio"
name="category"
value="geuebt"
onChange={this.onValueChange}
/>
Geubt
</label>
</View>
<View style={{ marginTop: 10 }}>
<label>
<input
type="radio"
name="category"
value="eingeschraenkt"
onChange={this.onValueChange}
/>
Eingeschrnkt
</label>
</View>
</form>
);
}
The value prop is passed on to the next page when the form is submitted. So if the first option is selected, 'anfaenger' will appear in the form results.
Edit:
You're right, the defaultChecked prop is only compatible with Web devices, not iOS and Android devices. When running on iOS and Android, I also noticed that some of the tags you used aren't compatible with React-Native, such as <forms>, <input>, <label>, unless there is a library that supports this. However, I wasn't able to find a library where you could import these components from.
Here is an Expo Snack I made that holds some code for radio buttons (styling need a bit of work, but maybe you can find a better UI library other than react-native-paper).
Basically, I set my React Hook's initial state to the first option in the form. This means that when the user opens the form, the first option should always be checked, since that is the state of the Hook.
If in fact your code does work as originally posted, I'd recommend setting your components selectedOption state variable to one of the options in the form.
state = {
selectedOption: 'anfaenger', // or 'geuebt' or 'eingeschraenkt' or any value you want to be the default
}
That way, when it checks for the state being a value in the radio button's status, it will be met and marked. However, if you need selectedOption to initialize to some value other than those in the radio buttons, then you can do boolean logic like so:
(Assuming selectedOption initializes to '' a.k.a empty string):
checked={this.state.selectedOption === "" || this.state.selectedOption === "anfaenger"}