In React Native Flat List smash Views with 100% height and flex

Question

I'm having trouble trying to display a list of Views using flex with 100% height, the issue comes when it renders the list from Flat list, I might do something wrong with flex.

This is what I want: A Flat list with same height when scrolls I will go to another component

And this is What I am having a smashed List of all the rendered views

The flatList is just this :

  <FlatList
      pagingEnabled={true}
      data={DATA}
      renderItem={renderItem}
      keyExtractor={(item) => item.id}
    />

And the container from the Views I am rendering looks like this (css)

 container: {
    alignItems: 'center',
    // TODO: check how why the screen is forguetting the tab, thats why I put the height like that
    width: '100%',
    height: '100%',
    justifyContent: 'space-around',
    flex: 1,
  },

Answer 1

Use onLayout to get the height of the parent container and use that to set the height of FlatList items:

Example Output:

Full source code:

//import { List, ListItem } from 'react-native-elements';
import React, { useState } from 'react';
import {
  Text,
  View,
  FlatList,
  StyleSheet,
  SafeAreaView,
  StatusBar,
} from 'react-native';

const attendants = [
  {
    courseName: 'comp',
    lecturer: 'Akanbi T.B',
    students: 'Tunde Ajagba',
    date: '10/11/2020',
    no: 1,
  },
  {
    courseName: 'comp',
    lecturer: 'Akanbi T.B',
    students: 'Tunde Ajagba',
    date: '09/11/2020',
    no: 2,
  },
  {
    courseName: 'comp',
    lecturer: 'Akanbi T.B',
    students: 'Tunde Ajagba',
    date: '10/11/2020',
    no: 3,
  },
];

const App = () => {
  const [data, setData] = useState(attendants);
  const [layoutHeight, setHeight] = useState(100);

  return (
    <View style={styles.container}>
      <View style={{ flex: 5 }}>
        <FlatList
          onLayout={(e) => {
            setHeight(e.nativeEvent.layout.height);
            console.log(e.nativeEvent.layout.height);
          }}
          style={{ flexGrow: 1, backgroundColor: 'pink', height: layoutHeight }}
          data={data}
          keyExtractor={(item) => item.no}
          renderItem={({ item }) => (
            <View
              style={{
                height: layoutHeight
                  
              }}>
              <ListItem
                customStyle={{ backgroundColor: 'black' }}
                title={`${item.lecturer} ${item.courseName}`}
                subtitle={item.students}
              />
            </View>
          )}
        />
      </View>
      <View
        style={{
          flex: 1,
          backgroundColor: 'lightgreen',
          justifyContent: 'center',
          alignItems: 'center',
        }}>
        <Text style={[styles.subtitle, { fontSize: 20 }]}>Bottom Bar</Text>
      </View>
    </View>
  );
};

const ListItem = ({ title, subtitle, customStyle }) => {
  return (
    <View style={styles.listContainer}>
      <Text style={styles.title}>{title}</Text>
      <Text style={styles.subtitle}>{subtitle}</Text>
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    marginTop: 30,
    flex: 1,
  },
  listContainer: {
    flex: 1,
    backgroundColor: 'teal',
    margin: 5,
    paddingHorizontal: 5,
    borderRadius: 4,
  },
  subtitle: { fontSize: 12, color: 'rgba(0,0,10,0.5)' },
  title: {
    fontSize: 14,
    color: 'white',
    fontWeight: 'bold',
    textAlign: 'cetere',
  },
});

export default App;

You can find the working app example here: Expo Snack

Answer 2

Flatlist is scrollview with many item inside and ScrollView content will calculator height of children render on it. So any item render on it need set height. height 100% will get height of parent and set for itself so you can not using height of scrollview content (infinity) and set for item inside.