0

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>
chackerian
  • 1,301
  • 2
  • 15
  • 29

0 Answers0