CODEWITHSUNDEEP
reactjsreact-nativeradio-buttondefault
blackSwan566
blackSwan566

Reputation: 1651

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

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>
 
    );
  }
}

Upvotes: 0

Views: 1553

Answers (1)

kaushal
kaushal

Reputation: 176

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"}

Upvotes: 1

Related Questions