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?

Answer 1

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?