FlatList ref issue

Asked by At

I am not getting ref of the flatlist always getting

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

I am beginner in react-native

export default class ListData extends Component {
  constructor(props) {
    this.state = {
      flatListRef: null
  render() {
    return (
      <View style={styles.container}>
          ref={ref => (this.state.flatListRef = ref)}
          style={{ flex: 1 }}
          renderItem={({ item, index }) => (
            <View style={[styles.ListViewContainer]}>
              <Text style={styles.countryTxt}>
                <Text> +{item.code}</Text>
                <Text> {item.CountryName} </Text>
          keyExtractor={(item, index) => index.toString()}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 40,
    backgroundColor: "white"

2 Answers

mindthegab On

try this:

in your constructor

this.flatListRef = React.createRef()

and then in your FlatList you do:

<FlatList ref={this.flatListRef} ...

Prashant Kumar On

Using import { FlatList } from "react-native" instead of import { FlatList } from 'react-native-gesture-handler';

is working. But I am still want to why it's not working with 'react-native-gesture-handler'. while list is displaying correctly but ref is not getting.