FlatList unable to scroll within Modal from react-native-modal

Question

I'm trying to create a horizontally sliding modal that displays a search bar, a slider of groups, and a list of friends. The slider of groups works fine, and is a horizontally sliding FlatList, however, the FlatList of friends and their status does not scroll (it is a vertical FlatList). I'm not sure how to fix this.

This is my code for my Modal:

import React from 'react';
import { StyleSheet, View, Text, FlatList, Image } from 'react-native';
import Modal from 'react-native-modal';
import ColonySliderModal from "../components/colonySliderModal";
import SearchBarModal from "../components/searchBarModal";

const FriendsModal = ({ isModalVisible, hideModal }) => {

    // Define an array of friends and their statuses
    const randomFriendsList = [
        { name: 'Jack', status: 'cooking' },
        { name: 'Ivy', status: 'reading' },
        { name: 'Frank', status: 'playing games' },
        { name: 'Alice', status: 'coding' },
        { name: 'Grace', status: 'traveling' },
        { name: 'David', status: 'cooking' },
        { name: 'Emma', status: 'exercising' },
        { name: 'Bob', status: 'sleeping' },
        { name: 'Charlie', status: 'coding' },
        { name: 'Henry', status: 'playing games' }
    ];

    const renderItem = ({ item }) => (
        <View style={styles.friendItem}>
            <View styles={styles.infoContainer}>
                <Image
                    style={styles.friendImage}
                    source={require('../assets/marker.png')}
                />
                <Text style={styles.friendName}>{item.name}</Text>
            </View>
            <Text style={styles.friendStatus}>{item.status}</Text>
        </View>
    );

    return (
        <Modal 
            animationIn="slideInLeft" 
            animationOut="slideOutRight" 
            isVisible={isModalVisible}
            deviceWidth={1}
            onSwipeComplete={hideModal}
            swipeThreshold={125}
            swipeDirection="left"
            propagateSwipe
        >
            <View style={styles.modalContainer} >
                <View style={styles.modalContent}>
                    {/* ------ SEARCH BAR ------ */}
                    <SearchBarModal
                        imageSource={require('../assets/search.png')}
                        style={styles.searchBar}
                        onPress={() => console.log("Pressed search bar")}
                    />

                    <View style={styles.sliderContainer}>

                    
                        {/* Colony Buttons Slider */}
                        <ColonySliderModal style={styles.colonySlider} />

                        {/* Add Friends Button */}
                        {/* <TouchableOpacity style={styles.plusButton}>
                                <Text style={styles.plusText}>+</Text>
                        </TouchableOpacity> */}
                    </View>
                    

                    {/* Display the list of friends and statuses using FlatList */}
                    <View style={{flex: 1, marginTop: 20}}>
                        <FlatList
                            data={friendsList}
                            renderItem={renderItem}
                            keyExtractor={(item, index) => index.toString()}
                            showsVerticalScrollIndicator={true}
                        />         
                    </View>
                </View>
            </View>
        </Modal>
    );
};

const styles = StyleSheet.create({
    modalContainer: {
        flex: 1,
        justifyContent: 'flex-end',
        // backgroundColor: 'transparent',
    },
    modalContent: {
        backgroundColor: '#2C6765',
        borderBottomRightRadius: 50,
        borderTopRightRadius: 50,
        // alignItems: 'center',
        width: '90%',
        flex: 1
    },
    searchBar: {
        // position: 'absolute',
        // top: '5%',
        // left: '5%',
        alignSelf: 'center',
        marginTop: 43,
    },
    sliderContainer: {
        marginTop: 13,
        width: '100%',
        marginLeft: 20,
    },
    // colonySlider: {
    //     // position: 'absolute',
    //     // top: '12%',
    //     // left: '4%',
    //     // width: '82%'

    // },
    plusButton: {
        backgroundColor: '#E7EFCA',
        marginRight: 10,
        padding: 10,
        width: 45,
        height: 45,
        borderRadius: 50,
        marginTop: 5
        // position: 'absolute',
        // top: '12.5%', // Adjust this to position the button as desired
        // right: '3%', // Adjust this to position the button as desired
    },
    plusText: {
        fontSize: 40, // Adjust the font size as needed
        color: '#2C6765',
        fontWeight: 'bold',
        textAlign: 'center',
        justifyContent: 'center',
        marginTop: -15,
    },
    infoContainer: {
        flexDirection: 'row',
        display: 'flex',
        alignContent: 'space-around',
    },
    friendItem: {
        // borderBottomWidth: 1,
        // borderColor: '#CCC',
        margin: 10,
    },
    friendName: {
        fontSize: 18,
        fontWeight: 'bold',
        color: '#E7EFCA',
        left: 80,
    },
    friendStatus: {
        fontSize: 16,
        color: '#D5B747',
        left: 80,
    },
    friendImage: {
        height: 40,
        width: 40,
        left: 20,
        position: 'absolute',
        tintColor: '#E7EFCA'
    },
   
});

export default FriendsModal;

I used flex: 1 on all the parent views, flexGrow: 1 on the FlatList, and even put specific heights. The FlatList works on normal modals from react-native but not the one from react-native-modal.

Answer 1

Try to use the FlatList from the react-native-gesture-handler library. It works better in dialogues, overlays and overall for any "special" situation.

For any other case, remember that the library has also the ScrollView and Touchable* components).

If it's not working check if your modal container and your list is bounded by the screen, or if it extends under it. The easiest way to check it is to set a bottomMargin and a background color: if background is there but you cannot see the margin, your element is going out of the screen.