skele: Cannot get ref (useRef) for wrapped inside a using functional component

I’m having the same issue with functional components.

I was able to get this working with hooks, by using the following syntax:

<ScrollView ref={ref => (scrollView.current = ref)}

instead of

<ScrollView ref={scrollView}>

🙌

@brax10ward sure here is the entire component snack example
you can just add

   <Viewport.Tracker>
...
   </Viewport.Tracker>

and it should work exactly the same

import React, { Component } from 'react';
import { View, FlatList, StyleSheet, Text, Button } from 'react-native';

const DATA = [
  {
    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abbs28ba',
    title: 'item one',
  },
  {
    id: '3ac68afc-c605-48d3-a4f8-fbd91aass97f63',
    title: 'item two',
  },
  {
    id: '58694a0f-3da1-471f-bd96-145571esss29d72',
    title: 'item three',
  },
  {
    id: 'bd7acbea-c1b1-46c2-aed5-123546',
    title: 'item four',
  },
  {
    id: '3ac68afc-c605-48d3-a4f8-45678888',
    title: 'item five',
  },
  {
    id: '58694a0f-3da1-471f-bd96-1455767867867861e29d72',
    title: 'item six',
  },
  {
    id: 'bd7acbea-c1b1-46c2-aed5-fdds',
    title: 'item six',
  },
  {
    id: '3ac68afc-c605-48d3-a4f8-fbd91aa9kkukfuk7f63',
    title: 'item seven',
  },
  {
    id: '58694a0f-3da1-471f-bd96-23dfghh',
    title: 'item eight',
  },
  {
    id: 'bd7acbea-c1b1-46c2-aed5-6776899',
    title: 'item nine',
  },
  {
    id: '3ac68afc-c605-48d3-a4f8-111222',
    title: 'item ten',
  },
  {
    id: '58694a0f-3da1-471f-bd96-1234',
    title: 'item eleven',
  },
];

const Item = ({ title }) => (
  <View style={styles.item}>
    <Text style={styles.title}>{title}</Text>
  </View>
);

const renderItem = ({ item }) => <Item title={item.title} />;

class App extends Component {
  render() {
    return (
      <View
        collapsable={false}
        style={{
          flex: 1,
          alignItems: 'center',
          width: '100%',
          // backgroundColor: 'red'
        }}>
        <FlatList
          style={{
            height: 100,
          }}
          ref={(ref) => (this.flatList = ref)}
          data={DATA}
          renderItem={renderItem}
          keyExtractor={(item) => item.id}
        />
        <Button
          title={'press to scroll'}
          onPress={() => {
            this.flatList.scrollToIndex({ index: 0 }); // scroll a bit before pressing the button
            // or
            // this.flatList.scrollToOffset({ offset: 300 });
          }}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 32,
  },
});

export default App;

Hey @brax10ward

to answer your question, i am not using createRef(). can you please provide sample code that isnt working, ideally a https://snack.expo.io/ would be awesome?

this should do the trick in a class component.

            <View>
             <Viewport.Tracker>
              <FlatList
                ref={(ref) => (this.flatList = ref)}
                data={DATA}
                renderItem={this.renderItem}
                keyExtractor={(item) => item.id}
              />
             </Viewport.Tracker>
              <Button
                title={'FlatList ref button'}
                onPress={() => {
                  console.log('flatList ref value: ', this.flatList);
                }}
              />
            </View>

Thank you too @bantingGamer, I will keep this open still.

Hi @bantingGamer,

To be honest, these components were never tested with hooks. They (still) work using a HoC approach and further more will try to hijack the ref of the inner component for their own use (i.e the HoC are not “clean”).

We’v been thinking about implementing a hooks-based version of these but never had the time. If you like you could attempt to help there with a PR. @bevkoski or @kern3lpan1c might be also interested in helping out

This worked for me

const flatList = useRef();


<FlatList ref={flatList}  />


<Button
        title="next"
        onPress={() => flatList.current.scrollToIndex({ index: 1 })}
/>

@brax10ward I believe that this is the line where it is created. ref={(ref) => (this.flatList = ref)}

The this keyword is very confusing, I dont fully understand it myself that is why I prefer using functional components. You might want to brush up on how it works