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

[tarunmehta-quovantis]

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()}

)
}
}
`

[react-native-bot]

We are automatically closing this issue because it does not appear to follow any of the provided issue templates.

Please make use of the bug report template to let us know about a reproducible bug or regression in the core React Native library.

If you'd like to propose a change or discuss a feature request, there is a repository dedicated to Discussions and Proposals you may use for this purpose.