react-nativeradio-button

How to set RadioButton checked on ReactNative?


This code uses RadioButton provided from React Native Paper

     <RadioButton.Group
         onValueChange={value => setValue(value)}
         value={value}
     >
         <RadioButton.Item
             style={{justifyContent: "space-around"}}
             label="English (US)"
             value="lang_en"
             status={"checked"}
             color="#1E6DAD"
         />
         <Divider />
         <RadioButton.Item
             style={{justifyContent: "space-around"}}
             label="Indonesia"
             value="lang_id"
             color="#1E6DAD"
         />
     </RadioButton.Group>

Running the code on Android emulator, the result is: enter image description here

My expectation is English (US) radio button to be checked. What's missing here?


Solution

  • This is from the documentation itself. I think your useState initialization is missing the correct value. In the following code first is placed as initial state, in your case, this should be lang_en.

      const [value, setValue] = React.useState('first');
    
      return (
        <RadioButton.Group onValueChange={newValue => setValue(newValue)} value={value}>
          <View>
            <Text>First</Text>
            <RadioButton value="first" />
          </View>
          <View>
            <Text>Second</Text>
            <RadioButton value="second" />
          </View>
        </RadioButton.Group>
      );