Uncaught Error: PanGestureHandler with tag 1 received child that is not valid HTML element.

[futurk]

Description

Hi!
I can't render my animated FlatList as of 2.21.*
2.20.0 is latest version that works well.

Steps to reproduce

1. git clone https://github.com/frknltrk/react-native-swipeable-deck
2. replace with 2.22.1 in https://github.com/frknltrk/react-native-swipeable-deck/blob/66f1c86e51d19ac3b5601a0b2139fcfca33b348d/package.json#L164
3. npm install
4. cd example
5. npx expo start --web
6. CTRL+F12 to open up the Dev "Console"
7. See the errors (console logs with each version saved in separate files: console-export-2.20.0.txt, console-export-2.21.0.txt, console-export-2.22.1.txt

Snack or a link to a repository

https://github.com/frknltrk/react-native-swipeable-deck/tree/stable/example

Gesture Handler version

2.22.1

React Native version

0.73.6

Platforms

Web

JavaScript runtime

None

Workflow

None

Architecture

None

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes

[m-bert]

Hi @frknltrk! Could you check if #3361 fixes this issue?

Also, I highly suggest migrating to API from Gesture Handler 2 as the old API will be deprecated in the next minor release.

If you want to use new API with FlatList, there are 2 possible cases:

1. If you use FlatList from react-native, it should work without any additional steps.

2. If you use FlatList from react-native-gesture-handler, you'll have to mark Pan as simultaneous with Native inside FlatList

To do so, you'll have to add withRef to your gesture and use simultaneousHandlers prop:

const TodoList: React.FC<TodoListProps> = () => {
  const panRef = React.useRef();
  const g = Gesture.Pan().withRef(panRef);

  return (
    <GestureHandlerRootView>
      <GestureDetector gesture={g}>
        <FlatList
          simultaneousHandlers={panRef}
          ...
        />
      </GestureDetector>
    </GestureHandlerRootView>
  );
};

[futurk]

1. "react-native-gesture-handler": "github:software-mansion/react-native-gesture-handler" in package.json
2. npm install
3. npm run example --web
4. open dev console
5. flatlist renders with no errors!

thanks! when do you roll out the next release that includes the bug fix?
edit: i just upgraded my project to api v2. all works well with 2.22.1 now. thanks again.