Unable to set FlatList height inside a Modal - react-native

Question

Normally the height of a FlatList is set by wrapping a around it.
This doesn't appear to work if I put it inside a modal component of react native.
Is there any other way to set the height for a FlatList?
<Modal
visible={visible}
transparent={true}
animationType='slide'
>
<View style={middleInnerContainer}>
<FlatList
data={this.props.vegetablesBenefit}
renderItem={modalBenefitItem}
keyExtractor={(item) => item.key}
scrollEnabled
/>
</View>
</Modal>
I've simplified this code to the basic structure I am using.
It works perfectly fine outside of a modal.

Answer 1

Can you be more specific? If you want a list inside a popup you can simply use the following code I wrote for creating a generic dialog popup!
<TouchableWithoutFeedback onPress={() => this.closeDialog()}>
<Modal
visible={this.state.showDialog}
transparent={true}
onRequestClose={() => this.closeDialog()}
animationType='slide'>
{/* tslint:disable-next-line:no-empty */}
<TouchableWithoutFeedback onPress={() => this.closeDialog()}>
<View style={styles.parentContainer}>
<View style={styles.childContainer}>
<View style={styles.viewContainer}>
{/* tslint:disable-next-line:no-empty */}
<TouchableWithoutFeedback onPress={() => { }}>
<View>
<Text style={styles.headerStyle}>{this.props.headerTitle}
</Text>
</View>
</TouchableWithoutFeedback>
{this.renderListComponent()}
</View>
</View>
</View>
</TouchableWithoutFeedback>
</Modal>
</TouchableWithoutFeedback>
Handles the touch outside as well. Let me know if this completes your requirement.