I am using the new FlatList
component and want to make use of ScrollToIndex
(or ScrollToEnd
) within lifecycle methods such as componentDidMount
.
I have an array of let's say 100 items and I don't want to start to render at the first item but in the beginning. Let's say at the 50th item. When the FlatList
is only showing one item at a time, it's working as desired with some hack as described here: https://github.com/facebook/react-native/issues/13202
componentDidMount() {
let wait = new Promise((resolve) => setTimeout(resolve, 500)); // Smaller number should work
wait.then( () => {
this.refs.flatlist.scrollToIndex({index: 4, animated: true});
});
}
This snippet makes scrollToIndex
run after some milliseconds of the invocation of componentDidMount
.
But when I use a FlatList
where the view comprises a 3x3 grid, I simply cannot make it run. When I use scrollToIndex
and the index is outside of the specified props initialNumToRender
, I only get an error scrollIndex out of range $ID
which I cannot understand. The provided data array has all the, for instance, 100 items. When I make us of scrollToEnd
, it only stops somewhere in between and not at the end. For me, it looks like some kind of bug and I don't know any other way how to scroll to the $X item after the initial rendering. Can you help me?
I am grateful for any kind of help or comment.
I tried in on React-Native v0.43.0 and v0.44.0 on iOS and Android (Emulator and Device) and it's always the same.
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…