Gesture Handler integration in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What happens when you tap the button wrapped with TapGestureHandler?

Consider this React Native code using Gesture Handler:

import { TapGestureHandler } from 'react-native-gesture-handler';
import { View, Text } from 'react-native';

export default function App() {
  const onSingleTap = () => alert('Tapped!');

  return (
    
      
        Tap me
      
    
  );
}

What is the expected behavior when the user taps the text?

React Native

import { TapGestureHandler } from 'react-native-gesture-handler';
import { View, Text } from 'react-native';

export default function App() {
  const onSingleTap = () => alert('Tapped!');

  return (
    <TapGestureHandler onActivated={onSingleTap}>
      <View style={{ padding: 20, backgroundColor: '#ddd' }}>
        <Text>Tap me</Text>
      </View>
    </TapGestureHandler>
  );
}

A The text changes color but no alert appears.

B An alert with message 'Tapped!' appears when the user taps the text.

C Nothing happens because TapGestureHandler requires a double tap to activate.

D The app crashes because onActivated is not a valid prop for TapGestureHandler.

💡 Hint

Check the onActivated prop of TapGestureHandler and what it triggers.

The onActivated prop fires when the tap gesture is recognized. Here, it triggers an alert with 'Tapped!'.

❓ lifecycle

intermediate

When does the onGestureEvent callback fire in PanGestureHandler?

In React Native Gesture Handler, the PanGestureHandler has an onGestureEvent prop.

When does this callback get called?

React Native

import { PanGestureHandler } from 'react-native-gesture-handler';
import { View } from 'react-native';

export default function App() {
  const onGestureEvent = event => {
    console.log('Gesture event:', event.nativeEvent.translationX);
  };

  return (
    <PanGestureHandler onGestureEvent={onGestureEvent}>
      <View style={{ flex: 1, backgroundColor: '#eee' }} />
    </PanGestureHandler>
  );
}

A It fires continuously as the user moves their finger during the pan gesture.

B It fires only once when the pan gesture starts.

C It fires only when the pan gesture ends.

D It never fires unless the gesture is a double tap.

💡 Hint

Think about how dragging your finger on the screen updates position continuously.

The onGestureEvent callback fires repeatedly as the user moves their finger, providing continuous updates of the gesture.

📝 Syntax

advanced

Which code correctly imports and wraps the app with GestureHandlerRootView?

To use React Native Gesture Handler properly, the app root must be wrapped with GestureHandlerRootView.

Which option shows the correct import and usage?

A

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

export default function App() {
  return (
    <View style={{ flex: 1 }}>
      <GestureHandlerRootView>
        {/* app content */}
      </GestureHandlerRootView>
    </View>
  );
}

B

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

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      {/* app content */}
    </GestureHandlerRootView>
  );
}

C

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

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      {/* app content */}
    </GestureHandlerRootView>
  );
}

D

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

export default function App() {
  return (
    <GestureHandlerRootView>
      {/* app content */}
    </GestureHandlerRootView>
  );
}

💡 Hint

Check the import syntax and the style prop on GestureHandlerRootView.

The correct import uses curly braces. The root view must have flex:1 style to fill the screen.

❓ navigation

advanced

How to combine Gesture Handler with React Navigation for swipe back gesture?

You want to enable swipe back gesture on iOS using React Navigation and Gesture Handler.

Which approach correctly integrates them?

A Wrap the navigation container with GestureHandlerRootView and enable gestureEnabled on stack screens.

B Use PanGestureHandler inside each screen component to detect swipe and call navigation.goBack().

C Disable GestureHandlerRootView and rely only on React Navigation's default gestures.

D Wrap each screen with TapGestureHandler to detect taps and trigger navigation.goBack().

💡 Hint

Think about where GestureHandlerRootView should be placed and React Navigation's gesture options.

GestureHandlerRootView must wrap the navigation container. React Navigation's stack navigator supports swipe back with gestureEnabled.

🔧 Debug

expert

Why does the PanGestureHandler not respond to gestures in this code?

Look at this React Native code snippet:

import { PanGestureHandler } from 'react-native-gesture-handler';
import { View } from 'react-native';

export default function App() {
  const onGestureEvent = event => console.log(event.nativeEvent.translationX);

  return (
    
      
        
      
    
  );
}

The red square does not respond to pan gestures. What is the most likely cause?

React Native

import { PanGestureHandler } from 'react-native-gesture-handler';
import { View } from 'react-native';

export default function App() {
  const onGestureEvent = event => console.log(event.nativeEvent.translationX);

  return (
    <View style={{ flex: 1 }}>
      <PanGestureHandler onGestureEvent={onGestureEvent}>
        <View style={{ width: 100, height: 100, backgroundColor: 'red' }} />
      </PanGestureHandler>
    </View>
  );
}

A The PanGestureHandler child View has no flex or position style, so it does not receive touch events.

B The onGestureEvent callback is incorrectly defined and causes a runtime error.

C The PanGestureHandler must be wrapped inside a ScrollView to work.

D The GestureHandlerRootView is missing, so gestures are not recognized.

💡 Hint

Remember the required root wrapper for Gesture Handler to work properly.

GestureHandlerRootView must wrap the app root to enable gesture recognition. Without it, gestures do not work.