Flat list doesn't scroll when scroll index is above 30 #22553

I am facing a issue when scroll list index is above 30 flat list doesn't scroll to index

`import React, { Component } from 'react'
import { View, Text, FlatList } from 'react-native'
import * as ColorConstants from '../../utility/constants/ColorConstants'
import AppUtil from '../../utility/constants/AppUtil'

var defaultValue = 1
export class FlatListComponent extends Component {

onViewableItemsChanged = ({ viewableItems, changed }) => {
if (viewableItems != null && viewableItems.length > 1 && this.props.value) {
this.props.value(viewableItems[1].item)
}
}

componentDidMount() {
this.scrollFlatListToIndex(this.props.defaultValue)
}

scrollFlatListToIndex(value) {
let wait = new Promise((resolve) => setTimeout(resolve, 300)); // Smaller number should work
wait.then(() => {
this.flatListRef.scrollToIndex({index: value, animated: false});
});
}

renderTopValue() {
return (
<View pointerEvents="none" style={{height: 30, opacity: 0.5, backgroundColor: '#fefefe', alignItems: 'center', alignSelf: 'center', position: 'absolute', top: 0}}>
<View style={{marginTop: 25, marginBottom: 5, borderWidth: 1, backgroundColor: ColorConstants.COLOR_BORDER, width: 50}} />

)
}

renderBottomValue() {
return (
<View pointerEvents="none" style={{opacity: 0.5, height: 30, backgroundColor: '#fefefe', alignItems: 'center', alignSelf: 'center', position: 'absolute', top: 60}}>
<View style={{marginTop: 5, marginBottom: 5, borderWidth: 1, backgroundColor: ColorConstants.COLOR_BORDER, width: 50}} />

)
}

render() {
return (

<FlatList
decelerationRate={0}
ref={(ref) => { this.flatListRef = ref; }}
aecelerationRate={0}
snapToInterval={31} //your element height
snapToAlignment={'center'}
data={this.props.data}
onViewableItemsChanged={this.onViewableItemsChanged }
showsVerticalScrollIndicator={false}
renderItem={({item}) =>
<View style={{height: 31, alignItems: 'center'}}>
<Text style={{padding: 4, color: ColorConstants.COLOR_TEXT, fontSize: 20}}>{item}

}
keyExtractor={(item, index) => index.toString()}
/>
{this.renderTopValue()}
{this.renderBottomValue()}

)
}
}
`