Flexbox height in React Native

Question

I'm trying to create a simple content-sized dialog box in React Native. Highest in this hierarchy I have my overlay <View> styled so:

 {
   position: 'absolute',
   top: 0,
   left: 0,
   width: '100%',
   height: '100%',
   zIndex: 100,
   backgroundColor: COLOR
}

Within this, I have a wrapper <View> with this style:

{
   flex: 1,
   alignItems: 'center',
   justifyContent: 'center'
}

Then I have the dialog <View>:

{
   flex: 1,
   width: '86%',
   maxWidth: 450,
   flexDirection: 'column',
   justifyContent: 'flex-start',
   alignItems: 'flex-start',
   backgroundColor: 'white',
   borderWidth: 5,
   borderColor: 'gold'
}

It looks like the problem, though, lies in the way I'm building the dialog:

<View style={{flex: 1, flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'flex-start'}}>
  <Image source={require('../../assets/icons/warning.png')} 
   style={{resizeMode: 'contain', height: 50, width: 48, marginRight: 30}} />
  <View style={[flex: 1, flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'flex-start']}>
    <Text>{this.props.dialogMessage}</Text>
    <View style={{flex: 1, width: '100%', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-start'}}>
       <Button dismissOverlay={this.props.dismissOverlay} />
    </View>
  </View>
</View>

With this styling I get this result:

If I change flex to 0, I get this instead:

How can I get the dialog to size to the content?

Did you tried `left: 0, right: 0, top: 0, bottom: 0` on top view — Kishan Mundha, Mar 07 '18 at 05:54
Try using react-native-modal https://facebook.github.io/react-native/docs/modal.html — Patrick R, Mar 07 '18 at 12:59

Srdjan Cosic · Accepted Answer · 2018-03-07T08:30:35.490

5

In your Dialog <View> don't set flex at all. Have it like this

{
   width: '86%',
   maxWidth: 450,
   flexDirection: 'column',
   justifyContent: 'flex-start',
   alignItems: 'flex-start',
   backgroundColor: 'white',
   borderWidth: 5,
   borderColor: 'gold'
}

If it does not work, could you provide more code on the content inside of your Dialog view?

edited Mar 07 '18 at 08:30

answered Mar 07 '18 at 08:05

Srdjan Cosic

324
2
9

I think you're right in suspecting the problem lies with the views within the dialog. If I replace them with a simple `` run, the dialog sizes correctly. I'll edit my question to include the inner views. – ed94133 Mar 07 '18 at 21:54
2

I applied your solution to the dialog subviews, removing the flex property, and it worked! Thank you! – ed94133 Mar 07 '18 at 22:24
The key is removing the flex property from both the top `````` and the immediate sub `````` – Kyriakos Xatzisavvas Nov 23 '21 at 11:01

Flexbox height in React Native

1 Answers1