-
Notifications
You must be signed in to change notification settings - Fork 24.8k
Closed as not planned
Labels
Needs: Triage 🔍StaleThere has been a lack of activity on this issue and it may be closed soon.There has been a lack of activity on this issue and it may be closed soon.
Description
Please provide all the information requested. Issues that do not follow this format are likely to stall.
Description
calling scrollToIndex() does not scroll to index
React Native version:
Run react-native info
in your terminal and copy the results here.
How do I run Run react-native info
on snack (I assume snack is using a recent react)?
Steps To Reproduce
Provide a detailed list of steps that reproduce the issue.
- create a FlatList with 100 items, to many to fit on a page
- call
this.flatListRef.scrollToIndex({animated: true, index: 50}
Expected Results
Expect item 50 to appear at the top of the rendered FlatList
Actual Results
FlatList shows item 0 at the top of rendered list
Snack, code example, screenshot, or link to a repository:
import React, { Component } from 'react';
import { Text, View, FlatList, Dimensions, Button, StyleSheet } from 'react-native';
const { width } = Dimensions.get('window');
const style = {
justifyContent: 'center',
alignItems: 'center',
width: width,
height: 50,
flex: 1,
borderWidth: 1,
};
const COLORS = ['deepskyblue','fuchsia', 'lightblue '];
function getData(number) {
let data = [];
for(var i=0; i<number; ++i)
{
data.push("" + i);
}
return data;
}
class ScrollToExample extends Component {
getItemLayout = (data, index) => (
{ length: 50, offset: 50 * index, index }
)
getColor(index) {
const mod = index%3;
return COLORS[mod];
}
scrollToIndex = () => {
this.flatListRef.scrollToIndex({animated: true, index: 50});
}
render() {
return (
<View style={styles.container}>
<View style={styles.header}>
<Button
onPress={this.scrollToIndex}
title="Tap to scrollToIndex"
color="darkblue"
/>
</View>
<FlatList
ref={(ref) => { this.flatListRef = ref; }}
keyExtractor={item => item}
getItemLayout={this.getItemLayout}
renderItem={({ item, index}) => (
<View style={{...style, backgroundColor: this.getColor(index)}}>
<Text>{item}</Text>
</View>
)}
data={this.props.data}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1
},
header: {
paddingTop: 20,
backgroundColor: 'darkturquoise',
alignItems: 'center',
justifyContent: 'center'
}
});
export default class app extends Component {
render() {
return <ScrollToExample
data={getData(100)}
/>
}
}
Note: In the snack we are calling a list index in range. But IF I call with a large index (e.g. 150), we will get "Uncaught Invariant Violation: scrollToIndex out of range: 150 vs 99", which is expected AND shows that the component is receiving the function call.
kenpower
Metadata
Metadata
Assignees
Labels
Needs: Triage 🔍StaleThere has been a lack of activity on this issue and it may be closed soon.There has been a lack of activity on this issue and it may be closed soon.