Hier füge ich oben und unten in einer umgekehrten Flatlist ein neues Element hinzu.

Ich hoffe, Sie können Ihre Anforderungen mit dem mitgelieferten Beispielcode vergleichen :)
Vollständiger Code:
import React, {useState, createRef} from 'react';
import {
SafeAreaView,
View,
FlatList,
StyleSheet,
Text,
Button,
Platform,
UIManager,
} from 'react-native';
if (Platform.OS === 'android') {
if (UIManager.setLayoutAnimationEnabledExperimental) {
UIManager.setLayoutAnimationEnabledExperimental(true);
}
}
const getRandomColor = () => {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
};
const DATA = [
getRandomColor(),
getRandomColor(),
getRandomColor(),
getRandomColor(),
getRandomColor(),
];
function Item({item}) {
return (
<View style={[styles.item, {backgroundColor: item}]}>
<Text style={styles.title}>{item}</Text>
</View>
);
}
let scrollValue = 0;
let itemHeight = 100;
export default function App() {
const [data, setData] = useState(DATA);
let flatList = createRef();
const addItem = (top) => {
let newData;
if (top) {
newData = [...data, getRandomColor()];
setData(newData);
} else {
newData = [getRandomColor(), ...data];
setData(newData);
if (scrollValue > itemHeight) {
flatList.current.scrollToOffset({
offset: scrollValue + itemHeight,
animated: false,
});
}
}
};
return (
<SafeAreaView style={styles.container}>
<Button title="ADD ON TOP" onPress={() => addItem(true)} />
<FlatList
ref={flatList}
data={data}
renderItem={({item}) => <Item item={item} />}
keyExtractor={(item) => item}
inverted
onScroll={(e) => {
scrollValue = e.nativeEvent.contentOffset.y;
}}
/>
<Button title="ADD ON BOTTOM" onPress={() => addItem(false)} />
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
item: {
backgroundColor: '#f9c2ff',
padding: 20,
height: itemHeight,
},
title: {
fontSize: 32,
},
});