CODEWITHSUNDEEP
react-nativereact-native-flatlist
George Moussa
George Moussa

Reputation: 331

ReactNative FlatList is not fully visible when there are other components rendered before it

I'm having a strange issue using React Native FlatList (same problem appears for sectionList and ListView)

When Flatlist is the only component on the screen, it works fine. But when there are other components rendered before it e.g. a text component, then the last items of the list are not scrollable.

Sample code here is very simple:

import React, { Component } from 'react';
import { Modal, Text, TouchableHighlight, View, Alert, FlatList } from 'react-native';

export default class ModalExample extends Component {
  data = [];

  constructor(props) {
    super(props);

    this.state = {};

    for(var i = 0; i < 200; i++)
    {
      this.data.push('test string' + i);
    }
  }

  render() {
    return (
      <View>
        <Text>This is a test</Text>
        <Text>This is a test</Text>
        <Text>This is a test</Text>
        <FlatList
          data={this.data}
          renderItem={({ item }) => <Text>{item}</Text>}
        />
      </View >
    );
  }
}

you can see in the below image, if I scroll all the way, I see item 196, the last 3 items are not displayed at all. I tried adding flex:1 to the list but that caused it to disappear completely

enter image description here

Upvotes: 1

Views: 2282

Answers (1)

George Moussa
George Moussa

Reputation: 331

Turned out flex:1 is the answer. thanks @kit. the trick was to add it all the way up till app.js

Upvotes: 3

Related Questions