0

I want to use GestureDetector but I dont get a console.log statement if I press the button.

Button.tsx

const Button = ({ children }: IButton) => {
  const gestureHandler = Gesture.Tap()
    .onStart(() => console.log('HI'))
  return (
    <GestureDetector gesture={gestureHandler}>
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      { children }
      </View>
    </GestureDetector>
  )
};

App.tsx

export default function App() {
  return (
    <GestureHandlerRootView style={s.container}>
      <Button>
        <Text>Button</Text>
      </Button>
    </GestureHandlerRootView>
  );
}

What I am doing wrong ?

universe11
  • 703
  • 1
  • 11
  • 35
  • 1
    Why are you using 'GestureDetector '? You'll be far better off using React Native's TouchableOpacity: https://reactnative.dev/docs/touchableopacity or Pressable: https://reactnative.dev/docs/pressable. If you must use the react-native-gesture-handler library - use one of the buttons from here: https://docs.swmansion.com/react-native-gesture-handler/docs/api/components/buttons – Geo Mar 22 '22 at 09:49
  • Thanks for your answer, if there any difference of the native performance when I use pressable or gesutre buttons ? – universe11 Mar 22 '22 at 11:08
  • I can't be 100% sure, but I'm fairly confident that pressable would be faster because it probably has less overhead before linking to a native component. – Geo Mar 22 '22 at 11:29
  • If my comment helped you, please press accept on the solution I added. – Geo Mar 22 '22 at 11:32

1 Answers1

1

For most use cases, and especially for beginners, it is probably best to use the Pressable react-native API. It's a native solution that doesn't require additional libraries and it is more than sufficient for most button use cases. It is also probably faster than an external library.

For more information - reactnative.dev/docs/pressable

Geo
  • 543
  • 5
  • 16