React Native Flatlist Example - reactjs

Question

HOW CAN I HANDLE MUCH DATA IN REACT NATIVE FLATLIST?
Is there anyone who can offer an example using React Native Flatlist's ScrollToIndex?
I am working with ScrollToIndex and getItemLayout but it's not working.
There are 185 items on my flatlist and when I have called ScrollToIndex(150), there's no result.
I have worked with Google for getting ScrollToIndex Example but there's nothing.
Thanks for your help.
Here's my code:
<FlatList
ref={ref => setFlatListRef(ref)}
// getItemLayout={getItemLayout}
data={markers}
keyExtractor={(item, index) => index}
ItemSeparatorComponent={() => <Separator color={colors.separator} />}
renderItem={renderItem}
style={{ flex: 1 }}
getItemLayout={getItemLayout}
/>
const getItemLayout = (data, index) => {
return {
length: 120,
offset: 120 * index,
index
}
}
const renderItem = ({ item }) => <MyListItem {...props} item={item} />
class MyListItem extends React.PureComponent {
render () {
console.log('purecom')
let cost = null
if (this.props.item.minCost != -1 && this.props.item.maxCost != -1) {
const entities = new Entities()
if (this.props.item.minCost == 0 && this.props.item.maxCost == 0) {
cost = 'Guide price: Free'
} else if (
this.props.item.minCost == this.props.item.maxCost &&
this.props.countries[this.props.item.countryID] &&
this.props.countries[this.props.item.countryID].currencySymbol
) {
cost =
`Guide price: ` +
entities.decode(
this.props.countries[this.props.item.countryID].currencySymbol
) +
`${this.props.item.minCost.toFixed(2)}`
} else {
if (
this.props.countries[this.props.item.countryID] &&
this.props.countries[this.props.item.countryID].currencySymbol
) {
cost =
`Guide price from` +
entities.decode(
this.props.countries[this.props.item.countryID].currencySymbol
) +
`${this.props.item.minCost.toFixed(2)} to` +
entities.decode(
this.props.countries[this.props.item.countryID].currencySymbol
) +
`${this.props.item.maxCost.toFixed(2)}`
}
}
}
return (
<TouchableOpacity
style={{
padding: 5,
height: 120,
backgroundColor:
this.props.selectedMarkerID !== this.props.item.ID.toString()
? '#fff'
: colors.separator
}}
activeOpacity={1}
onPress={() => this.props.selectItem(this.props.item)}
>
<Text style={{ fontWeight: 'bold', fontSize: 13 }}>
{this.props.item.Name}
</Text>
<Text style={{ marginTop: 1, fontSize: 12 }}>
{this.props.item.desc}
</Text>
<Text style={{ marginTop: 1, fontSize: 12 }}>
{this.props.markerTypes ? (
this.props.markerTypes[this.props.item.Type].ShortDescription
) : (
''
)}
</Text>
<View style={{ flexDirection: 'row', marginTop: 5 }}>
<View style={{ marginRight: 2 }}>
<MyCustomMarker
source={{ url: markerTypesImages[this.props.item.Type] }}
style={{ width: 25, height: 30 }}
userFavourites={this.props.userFavourites}
Type={this.props.item.Type}
markerID={this.props.item.ID}
/>
<Image
source={{ url: images.compass }}
style={{
marginTop: 2,
width: 20,
height: 20,
marginLeft: 5,
transform: [
{ rotate: `${this.props.item.rotate.toString()}deg` }
]
}}
/>
<Text style={{ fontSize: 9 }}>{this.props.item.distance}km</Text>
</View>
{this.props.item.thumb === '' ? (
<Image
source={{ url: images.noThumb }}
style={{ flex: 0.2, width: 84, height: 65 }}
/>
) : (
<Image
source={{
url: `${this.props.url}${this.props.item.thumb}`
}}
style={{ flex: 0.2, width: 80, height: 60 }}
/>
)}
<View style={{ flex: 0.5 }}>
<View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
{Object.keys(facilities).map((key, i) => {
if (this.props.item[key] === 1) {
return (
<View
style={{
width: 26,
height: 26,
padding: 2,
margin: 2,
alignItems: 'center',
borderRadius: 3,
borderWidth: 1,
borderColor: colors.dark,
backgroundColor: 'white'
}}
key={key}
>
<Image
source={{ url: facilities[key] }}
style={{ width: 20, height: 20 }}
/>
</View>
)
}
return null
})}
</View>
<StarRatingBar
continuous={true}
score={this.props.item.score / 2}
allowsHalfStars={true}
accurateHalfStars={true}
dontShowScore={true}
/>
<View>
{cost ? <Text style={{ fontSize: 12 }}>{cost}</Text> : null}
{this.props.item.open ? (
<Text style={{ color: this.props.item.style, fontSize: 12 }}>
{this.props.item.open}
</Text>
) : null}
</View>
</View>
</View>
</TouchableOpacity>
)
}
}
setFlatListRef(flatListRef) {
this.setState({ flatListRef })
}
if (index >= 0) {
this.setState({ selectedIndex: index })
setTimeout(() => {
this.state.flatListRef.scrollToIndex({
index,
viewPosition: 0.5
})
}, 100)
}