GestureHandlerRootView

GestureHandlerRootView is a key component that enables Gesture Handler to intercept touch events, allowing for the implementation of gestures in your app. It should wrap your app's main component, and any component that relies on Gesture Handler's gestures has to be a descendant of this view. For more detailed information, you can check out the under-the-hood section.

import { GestureHandlerRootView } from 'react-native-gesture-handler';

export default function App() {
  return (
    <GestureHandlerRootView>
      <ActualApp />
    </GestureHandlerRootView>
  );
}

Keep GestureHandlerRootView as close to the actual root of the app as possible. It's the entry point for all gestures and all gesture relations. The gestures won't be recognized outside of the root view, and relations only work between gestures mounted under the same root view.

note

When integrating with navigation libraries, wrapping the navigator component with GestureHandlerRootView is generally sufficient. However, if you encounter issues with gestures not functioning properly, you might need to wrap each individual screen component with GestureHandlerRootView as well.

tip

If you're using Gesture Handler in your component library, you may want to wrap your library's code in the GestureHandlerRootView component. This will avoid extra configuration for the user.

Styling

GestureHandlerRootView can be thought of as a regular View component, therefore it accepts all the same props, including style.

If you don't provide anything to the style prop, it will default to { flex: 1 }. If you want to customize the styling of the root view, don't forget to also include flex: 1 in the custom style, otherwise your app won't render anything.

Nesting root views

In case of nested root views, Gesture Handler will only use the top-most one and ignore the nested ones. If you're unsure if one of your dependencies already renders GestureHandlerRootView on its own, don't worry and add one at the root anyway.

unstable_forceActive

unstable_forceActive?: boolean;

If you're having trouble with gestures not working when inside a component provided by a third-party library, even though you've wrapped the entry point with <GestureHandlerRootView>, you can try adding another <GestureHandlerRootView unstable_forceActive> closer to the place the gestures are defined. This way, you can prevent Android from canceling relevant gestures when one of the native views tries to grab lock for delivering touch events.