react-nativeflexboxreact-native-flexbox

Container with two columns: the first one with fixed width and the second one with flex grow

I'm trying to to an easy layout. I've a View container with flexDirection = row. The first column should contains an image with fixed width and the second column a lot of text.

This is my code:

<View
  style={{
    borderColor: 'black',
    borderWidth: 1,
    borderRadius: 4,
    backgroundColor: 'white',
    flexDirection: 'row',
    height: 111,
    marginBottom: 15,
  }}>
  <View
    style={{
      width: 120,
      height: '100%',
      backgroundColor: 'tomato',
      borderRadius: 4,
    }}
  />

  <View
    style={{
      flexGrow: 1,
      borderColor: 'gold',
      borderWidth: 3,
      // width: '100%',
    }}>
    <Text style={{fontWeight: 'bold', width: '100%'}}>Lorem ipsum dolor sit amet</Text>
    <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</Text>
  </View>
</View>

The result:

enter image description here

Why the container on the right has no the correct dimensions? It's seems like flex grow 1 doesn't work

Solution

  • Don't give a fixed height for the parent view. also I have done some changes for the stylings. Please check.

    <View
        style={{
            borderColor: 'black',
            borderWidth: 1,
            borderRadius: 4,
            backgroundColor: 'white',
            flexDirection: 'row',
            marginBottom: 15,
        }}>
        <View
            style={{
                width: 120,
                height: '100%',
                backgroundColor: 'tomato',
                borderRadius: 4,
            }}
        />

        <View
            style={{
                borderColor: 'gold',
                borderWidth: 3,
                width: 0,
                flexGrow: 1,
                flex: 1,
            }}>

            <Text style={{ flexWrap: 'wrap' }}>Lorem ipsum dolor sit amet, consectetur sahesh elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est mahesh.</Text>
        </View>
    </View>