CODEWITHSUNDEEP
react-native
John Valdetine
John Valdetine

Reputation: 446

How to scroll FlatList in Modal component?

My Horizontal FlatList doesn't scroll in Modals. You can find my FlatList and RenderItem codes below:

    <FlatList
        data={this.props.selectedGroupData.groupMembersList}
        renderItem={this.ilgiliKisiler}
        keyExtractor={item => item.uid}
        nestedScrollEnabled={true}
        horizontal={true}
        removeClippedSubviews={true}
        />

    </View>

and renderItem function:

    ilgiliKisiler = ({ item }) => {
    console.log("on Related Users item => ", item);
    return (
      <TouchableOpacity style={{flex: 1}}>
        <View style={{ flexDirection: "row" }}>
          <View style={styles.relatedUsersContainer}>
            <View style={{ alignItems: "center" }}>
              <Image
                source={
                  item.avatar
                    ? { uri: item.avatar }
                    : require("../../assets/images/defaultAvatar.png")
                }
                style={styles.relatedUsersImage}
              />
            </View>
            <View style={{ flexDirection: "column" }}>
              <Text style={styles.relatedUsersText} numberOfLines={2}>
                {item.name}
              </Text>
            </View>
          </View>
        </View>
      </TouchableOpacity>
    );
  };

Before this post, i found some solutions like style={{flex: 1}}. When i try to this solutions, my renderItem doesn't appear.

Upvotes: 1

Views: 5500

Answers (4)

David
David

Reputation: 1591

I was facing problem with scrolling FlatList in a modal and finally found a solution... The key to success is in having FlatList's item wrapped with TouchableWithoutFeedback or TouchableOpacity and that is it :).

Hope this will save others to stop wasting time

Upvotes: 0

Manish Trivedi
Manish Trivedi

Reputation: 9

Wrap the Flatlist inside a scrollview. It should work.

<Scrollview>
<Flatlist />
</Scrollview>

Upvotes: 0

John Valdetine
John Valdetine

Reputation: 446

Use propagateSwipe props for smooth scrolling in <Modal> 

<Modal propagateSwipe>...</Modal>

for more detail react-native-modal issue #236

Upvotes: 6

Afraz Hussain
Afraz Hussain

Reputation: 2403

Sorry for posting this as an answer, but I can't comment because of my low reputation. I'll remove this answer if it doesn't work for you.

Have you tried using contentContainerStyle on your FlatList like so:

contentContainerStyle={{ flexGrow: 1 }}

You can read more about contentContainerStyle at this link: https://facebook.github.io/react-native/docs/scrollview#contentcontainerstyle

Upvotes: 3

Related Questions