Issue with using FlatList in Modal - Layout issue

[tomleeshihhung]

Normally, the height of FlatList can be controlled by wrapping it with the react native
However, it doesn't appear to work here.

The FlatList disregards the boundaries set by and the rows continue on.
Interestingly, if I make the FlatList horizontal, it works just fine.

Any ideas? Thank you

Below is the code for the Modal component.

<
Modal isVisible={visible}
animationIn='slideInUp'
backdropOpacity={0.5}
style={{ margin: 15 }}>

<
View style={{ height: 300 }}>
<
FlatList
data={data}
renderItem={modalBenefitItem}
keyExtractor={(item) => item.key}
scrollEnabled/>

<
/View>
<
/Modal>

[landandan]

me too

[mmazzarolo]

Could you share a simple repo with the issue?

[zmfang]

So?How can I solve it?

[GreatAuk]

+1

[Donhv]

+1

[Josin22]

+1

[boss225]

+1

[thedeg123]

+1

[alicema15]

+1

[sometimescasey]

Can confirm I'm experiencing this right now as well, with Expo 38.

Inside the Modal I can set a View with style={{flex:1}} or style={{height:300}}, but if I use a FlatList inside this View, the list content begins scrolling from the bottom of the screen, not the bottom of the Modal.

Making a note here in case anyone finds a solution.

---

Edit: nvm...the solution to my specific issue was surprisingly simple: set style={{flex:1}} on the FlatList itself as well. Not sure if this was OP's issue, but this gets the FlatList to scroll from the bottom of the Modal as intended:

import RNModal from 'react-native-modal';
...
<RNModal isVisible={this.state.showModal}>
    <View style={styles.modal}>
        <FlatList style={{flex: 1}} ... />
    </View>
</RNModal>

and styles.modal for reference:

modal: {
        flex: 1,
        backgroundColor: 'white',
        opacity: 1,
        padding: 20,
        borderRadius: 10,
    },

[CMDezz]

@sometimescasey You saved my day at 2AM. Thank you.