GestureHandlerRootView

React Native
1

I was watching the video about Extending List Item. I am passing props to ListItem
export default function App() {

  return (
    <Screen>
      <ListItem title="My Title" subTitle="My Subtitle" />
    </Screen>
  );
}

but the ListItem is not displaying the content because it is wrapped in the GestureHandlerRootView

function ListItem({ title, subTitle, image, onPress, renderRightActions }) {
  console.log({ title, subTitle, image, onPress, renderRightActions });
  return (
    <GestureHandlerRootView>
      <Swipeable renderRightActions={renderRightActions}>
        <TouchableHighlight underlayColor={colors.light} onPress={onPress}>
          <View style={styles.container}>
            {image && <Image style={styles.image} source={image} />}
            <View>
              <AppText style={styles.title}>{title}</AppText>
              <AppText style={styles.subTitle}>{subTitle}</AppText>
            </View>
          </View>
        </TouchableHighlight>
      </Swipeable>
    </GestureHandlerRootView>
  );
}

I need help, I am stuck , I can’t proceed . If you know any way go around the pan gesture and display the content. I will appreciate the help

2

You have to wrap like this, in the app.js

return (
<GestureHandlerRootView style={{ flex: 1 }}>
    <Screen>
      <ListItem title="My Title" subTitle="My Subtitle" />
    </Screen>
 </GestureHandlerRootView>
  );

That worked for me.

3

Thanks. It worked. You removed the Gesture HandlerRootView in ListItem Component and use it in app.js as a wrapper for any component needed to swiped. Thanks for your help!