const Screen = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.heading}>Screen Data</Text>
      <View>
        <FlatList
          data={data}
          renderItem={({item}) => (
            <View>
              <Text style={styles.title}>{item.title}</Text>
              <Text style={styles.description}>{item.description}</Text>
            </View>
          )}
          ListFooterComponent={() => <Buttons text={''} onPress={undefined} />}
        />
      </View>
    </View>
  );
};
export default Screen;

I have created a Button component which always come at the end of flatlist which is scrollable but it gets overlap I want it to keep at end of content.