Question 32841 in React native Question posted in
The official React Native documentation can be found here.

How to fix height size in react native

I’m using React Native Expo, and I encountered an error when trying to set the size of my Viewer to fit the selection menu and number input.

View Code:

<View style={{ 
  flex: 1,
  flexDirection: 'row',
  alignItems: 'center',
  backgroundColor: "black",
  width: "100%"
}}>

<SelectList
  setSelected={(val) => setSelected(val)} 
  data={data} 
  save="value"
  placeholder="Produto"
/>
<TextInput
  style={{ width: "50%" }}
  label="Quantia"
  returnKeyType="done"
  value={delivery}
  onChangeText={(text) => setDelivery(text)}
/>
</View>

App Image ( the black background is for testing, just to know how much space is occupied by the View )
https://media.discordapp.net/attachments/873959321376018462/1087615947638050847/Screenshot_20230321-025022_Expo_Go.jpg?width=224&height=473

What can I do to make the background black only in the menu and in the input?

Tags:

2

Answers


  1. 0

    you are giving BgColor property to whole container insted you need to give bgcolor style to InnerView which holds TextInput Property and SelectList!

    Is just that only the thing or you are looking for any other result?

    <View style={{ 
      flex: 1,
      flexDirection: 'row',
      alignItems: 'center',
      width: "100%"
    }}>

    <SelectList
      setSelected={(val) => setSelected(val)} 
      data={data} 
      save="value"
      placeholder="Produto"
      style={{backgroundColor:'#000'}}
    />
    <TextInput
      style={{ width: "50%",backgroundColor:'#000'}}
      label="Quantia"
      returnKeyType="done"
      value={delivery}
      onChangeText={(text) => setDelivery(text)}
    />  
    </View>
    Login or Signup to reply.
  2. 0

    You just need to remove the flex: 1 on the View that contains the SelectList and the TextInput. The property flex define how your items fill the available space. Your code will seem like this:

    <View style={{
  flexDirection: 'row',
  alignItems: 'center',
  backgroundColor: "black",
  width: "100%"
}}>
  <SelectList
    setSelected={(val) => setSelected(val)} 
    data={data} 
    save="value"
    placeholder="Produto"
  />
  <TextInput
    style={{ width: "50%" }}
    label="Quantia"
    returnKeyType="done"
    value={delivery}
    onChangeText={(text) => setDelivery(text)}
  />
</View>

    I suggest you read the documentation about Layout with FlexBox. For this case, you can use the Expo Playground code example in the Flex section to see how the property works.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search