I need that the Text appears next to the pressable checkbox not inside it... How can i do this using styles and not changing the code structure?
return (
<Pressable
style={[{ opacity: disabled ? 0.5 : 1 },
styles.checkboxBase, checked && styles.checkboxChecked]}
onPress={onPress}>
<View style={[styles.checkboxContainer, style]}>
{checked && <Icon size={16} name="bullet"
color="gray" />}
</View>
<Text style={styles.text}>{label}</Text>
</Pressable>
);
}
const styles = StyleSheet.create({
checkboxBase: {
width: 24,
height: 24,
},
checkboxChecked: {
justifyContent: "center",
alignItems: "center",
},
checkboxContainer: {
flexDirection: "row",
color: "red",
},
text: {},
});
Pressable is like a view with TouhcableOpacity. You have to put text and Pressable inside a partent probability in a view like this.
<View style={{flex-direction:'row'}}>
<Pressable>
<Icon />
</Pressable>
<Text></Text>
</View>