samedi 19 juin 2021

Selecting radio button is required before clicking on the button react-native

I want to make required to select a choice before clicking the button “Next”, maybe creating a condition in which if no choice has been selected show an alert, else go to the next page.

Here’s my radio button:

const RadioButton = ({ onPress, selected, children }) => {
  return (
    <View style={styles.radioButtonContainer}>
      <TouchableOpacity onPress={onPress} style={styles.radioButton}>
        {selected ? <View style={styles.radioButtonIcon} /> : null}
      </TouchableOpacity>
      <TouchableOpacity onPress={onPress}>
        <Text style={styles.radioButtonText}>{children}</Text>
      </TouchableOpacity>
    </View>
  );
};

the useState's array:

const [isLiked, setIsLiked] = useState([
    { id: 1, value: true, name: "Yes", selected: false },
    { id: 2, value: false, name: "No", selected: false }
  ]);

Radio Button in App function:

{isLiked.map((item) => (
        <RadioButton
          onPress={() => onRadioBtnClick(item)}
          selected={item.selected}
          key={item.id}
        >
          {item.name}
        </RadioButton>
      ))}
      <TouchableOpacity style={styles.button} onPress={() => {}}>
        <Text>Next</Text>
      </TouchableOpacity>

Here the full code

Aucun commentaire:

Enregistrer un commentaire