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