I'm trying to add styling to child components of a React Native View. Since you cant use the > *
selector in React Natives StyleSheet.create function how do you achieve this result?
Here is the code of a form I want to style:
<View style={styles.container}>
<View style={styles.centered}>
<Button mode="contained" onPress={onAddItem} style={styles.default}>
Add Item
</Button>
</View>
{showForm ? (
<View style={styles.form}>
<TextInput
label="Title"
returnKeyType="next"
theme={{ colors: { primary: 'blue',underlineColor:'transparent',}}}
style={{ width: 300 }}
value={title.value}
onChangeText={(text) => setTitle({ value: text, error: '' })}
error={!!title.error}
errorText={title.error}
autoCapitalize="none"
/>
<DropDownPicker
label="Select Type"
open={open}
value={value}
items={items}
setOpen={setOpen}
setValue={setValue}
setItems={setItems}
/>
<DropDownPicker
open={open2}
value={value2}
items={condition}
setOpen={setOpen2}
setValue={setValue2}
setItems={setCondition}
/>
<TextInput
label="Quantity"
returnKeyType="next"
theme={{ colors: { primary: 'blue',underlineColor:'transparent',}}}
style={{ width: 300 }}
value={quantity.value}
onChangeText={(text) => setQuantity({ value: text, error: '' })}
error={!!quantity.error}
errorText={quantity.error}
autoCapitalize="none"
/>
</View>
) : null}
</View>