Fill needed space but not more than there is space with FlatList in React-Native

Question

I have an FlatList in card, that is in parent view which has flex:1. I want to fill needed space with card, but I don't want it to overflow over parent container. Also I don't want card to fill available space when it's empty. How this should be done?

You can see a demo here: https://snack.expo.io/hHLH52usn

here is my current styleSheet:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#f22",
    margin: 16
  },
  card: {
    backgroundColor: "#2f2",
    marginLeft: 16,
    marginRight: 16,
  },
})

I could set flex:1 to card, but then it'll fill available space also when it's empty

Also interesting point is that on iOS, the flat list will scroll actually, but it still overflows over container same amount that height of the title+tabs.

score 0 · Answer 1 · answered May 28 '21 at 12:30

Solution is bit tricky. See how...

import React, {useState} from 'react';
import { Text, View, StyleSheet, TouchableOpacity, FlatList } from 'react-native';

const shortText = "Some text that is not too long to cause problems..."
const longText = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut porttitor fermentum purus pulvinar congue. In consequat felis metus, ut bibendum urna faucibus non. Suspendisse id nisl massa. Quisque vitae ante sodales, ornare mauris ut, semper lectus. Quisque cursus elit vel justo cursus, non venenatis magna auctor. Aenean scelerisque venenatis ultrices. Etiam a tempor urna. Fusce tristique molestie purus fermentum euismod.

Ut eleifend neque ut fermentum cursus. Suspendisse id mattis purus, non varius eros. Vivamus vulputate pharetra lorem, eget tempor est sollicitudin eget. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In iaculis dictum blandit. Donec vel consequat augue. Suspendisse dictum accumsan risus, sed elementum purus egestas eu. Aenean aliquet eros vel ex congue dignissim. Suspendisse eu sapien sapien. Aliquam id nisi aliquam, faucibus urna ac, pharetra libero. Integer maximus vitae metus auctor condimentum. Donec sit amet mauris in arcu bibendum maximus.`

let currentText = shortText

export default function App() {
  const [value, setValue] = useState(shortText); 

  return (
    <View style={{height: "100%", width: "100%", position: "absolute"}}>
      <View style={styles.container}>
        <Text style={styles.title}>TITLE</Text>
        <View style={styles.card}>
          <View style={styles.tabs}>
            <TouchableOpacity onPress={()=>setValue(shortText)} style={styles.button}><Text>Short</Text></TouchableOpacity>
            <TouchableOpacity onPress={()=>setValue(longText)} style={styles.button}><Text>Long</Text></TouchableOpacity>
          </View>
          <FlatList data={value.split(" ")} renderItem={(i)=><Text style={{backgroundColor: "#2f2",}}>{i.item}</Text>} />
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#FF3300",
    margin: 16
  },
  card: {
    marginLeft: 16,
    marginRight: 16,
    flex: 1,            // Added
    bottom: 5           // Added   
  },
  tabs: {
    flexDirection: "row"
  },
  title: {
    margin: 16,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
  button: {
    height: 40,
    flex: 1,
    alignItems: "center",
    padding: 12,
    backgroundColor: "#fff"
  },
});

Just added 2 line of code, move backgroundColor style from card to Text component.

Result,

Thanks for this answer, and sorry to be unclear. In my real program it's necessary to have background in card, so I cannot add flex to it. F.e. in some cases I need a UI element also after FlatList. — user3777939, May 31 '21 at 05:45

Fill needed space but not more than there is space with FlatList in React-Native

1 Answers1