Not working with flat list

[TommyTheTribe]

Hi sir, thanks for your work !

It seems that there is an issue with FlatList, I got an error ref.measureLayout must be called with a node handle or a ref to a native component.

Here is my code :

import {FlatList, ScrollTo, Target} from '@nandorojo/anchor';
import {Text, View} from 'react-native';

const test = [1, 2, 3, 4, 5, 6, 7, 8];

  return (
    <View style={{flex: 1}}>
      <FlatList
        data={test}
        renderItem={({item, index}) => {
          if (index === 0) {
            return (
              <ScrollTo target="bottom-content">
                <Text>Scroll to bottom content</Text>
              </ScrollTo>
            );
          }
          if (index === test.length - 1) {
            return (
              <Target name="bottom-content">
                <View style={{height: 100, backgroundColor: 'blue'}} />
              </Target>
            );
          }
          return <View style={{height: 100, backgroundColor: 'blue'}} />;
        }}
      />
    </View>
  );

"react-native": "0.71.0"

Thanks for your help !

[stefanahman]

After a lot of testing I managed to solve this by calling getNativeScrollRef on FlatList<T>:

import {FlatList, ScrollView} from 'react-native-gesture-handler'
import {useRegisterScroller} from '@nandorojo/anchor'

const {registerScrollRef} = useRegisterScroller()

<FlatList
  ref={list => registerScrollRef(list?.getNativeScrollRef() as ScrollView)}
  // ...
/>

[nandorojo]

Hmm interesting we could implement this in the library

[yu1iaw]

It would be great, if I could achieve the same result with SectionList

[lee1409]

I'm curious if the anchoring logic still works when the list item has not yet been rendered by the FlatList? Does anyone face this issue?