React-Native scroll to index doesn't work - react-native

Question

In my application, ScrollToIndex doesn't work as expected. Here is my code.
getItemLayout = (data, index) => (
{ length: 50, offset: 50 * index, index }
)
scrollToIndex = () => {
if(this.flatListRef != null){
setTimeout(() => this.flatListRef.scrollToIndex({animated: false, index: 5}), 200)
}
// this.flatListRef.scrollToIndex({animated: true, index: 5});
}
// render post
renderPost({ item, index }) {
return (
<Post
post={item}
likeIsLoading={
item.shareId === this.props.likeLoadingPostId &&
this.props.likeIsLoading
}
likeCount={item.likeCount > 0 ? item.likeCount : ""}
likeIcon={item.hasLiked === 1 ? LikeActive : LikeInactive}
name={item.hasLiked === 1 ? "like-active" : "like-inactive"}
onIconClick={payload => this.onIconClick(payload)}
/>
);
}
// render
render() {
let { posts, featuredWorkouts, mainFeedIsLoading } = this.props;
let mainFeedData = (
<View>
<View style={{ marginBottom: 5 }}>
<SwiperContainer featuredWorkouts={featuredWorkouts} />
</View>
<FlatList
ref={(ref) => { this.flatListRef = ref; }}
data={posts}
extraData={[posts, mainFeedIsLoading, featuredWorkoutsAreLoading]}
renderItem={(item, index) => this.renderPost(item, item.shareId)}
getItemLayout={this.getItemLayout}
// initialScrollIndex={4}
keyExtractor={item => item.shareId}
/>
</View>
);
if (mainFeedIsLoading) {
mainFeedData = (
<View style={styles.screenLoader}>
<ScreenLoader color="lightblue" size="large" />
</View>
);
}
return (
<View>
<Button
onPress={() => this.scrollToIndex()}
title="Tap to scrollToIndex"
color="darkblue"
/>
<ScrollView>{mainFeedData}</ScrollView>
</View>
);
}
I tried the suggestions which have been give on the internet, but none of them worked. What am I doing wrong here? How can I achieve what I want? As an example, I want to move to 5th index when the button is clicked.