Gesture Handler integration in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the gesture handler root view component.

React Native

import { [1] } from 'react-native-gesture-handler';

Drag options to blanks, or click blank then click option'

AGestureHandlerRootView

BGestureHandlerView

CGestureRootView

DGestureView

Attempts:

3 left

💡 Hint

Common Mistakes

Using GestureHandlerView or GestureView which do not exist.

Forgetting to import from 'react-native-gesture-handler'.

The GestureHandlerRootView is the correct component to wrap your app for gesture handling.

2fill in blank

medium

Complete the code to wrap the app component with the gesture handler root view.

React Native

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

Drag options to blanks, or click blank then click option'

ASafeAreaView

BView

CScrollView

DGestureHandlerRootView

Attempts:

3 left

💡 Hint

Common Mistakes

Using View or SafeAreaView which do not enable gesture handling.

Not wrapping the app at all.

Wrapping the app with GestureHandlerRootView enables gesture handling properly.

3fill in blank

hard

Fix the error in the gesture handler import statement.

React Native

import [1] from 'react-native-gesture-handler';

Drag options to blanks, or click blank then click option'

A{ GestureHandlerRootView }

BGestureHandlerRootView

C{ GestureHandlerRootView } from 'react-native'

DGestureHandlerRootView from 'react-native-gesture-handler'

Attempts:

3 left

💡 Hint

Common Mistakes

Importing without curly braces for named exports.

Adding extra 'from' inside the import statement.

The correct syntax for importing a named export is using curly braces: { GestureHandlerRootView }.

4fill in blank

hard

Fill both blanks to create a tap gesture handler wrapping a button.

React Native

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

export default function TapExample() {
  return (
    <TapGestureHandler onHandlerStateChange=[1]>
      <[2]>
        <Text>Tap me</Text>
      </[2]>
    </TapGestureHandler>
  );
}

Drag options to blanks, or click blank then click option'

A() => console.log('Tapped!')

BonTap

CView

DButton

Attempts:

3 left

💡 Hint

Common Mistakes

Passing a non-function to onHandlerStateChange.

Using Button directly inside TapGestureHandler.

The onHandlerStateChange expects a function, so () => console.log('Tapped!') is correct. The child must be a View or similar container.

5fill in blank

hard

Fill all three blanks to create a pan gesture handler that updates position state.

React Native

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

export default function PanExample() {
  const [pos, setPos] = useState({ x: 0, y: 0 });

  const onGestureEvent = event => {
    setPos({ x: event.nativeEvent.translationX, y: event.nativeEvent.[1] });
  };

  return (
    <PanGestureHandler onGestureEvent={onGestureEvent} onHandlerStateChange=[2]>
      <View style={{ transform: [{ translateX: pos.x }, { translateY: pos.y }] }}>
        <View style={{ width: 100, height: 100, backgroundColor: '[3]' }} />
      </View>
    </PanGestureHandler>
  );
}

Drag options to blanks, or click blank then click option'

AtranslationY

B() => {}

Cred

DtranslationX

Attempts:

3 left

💡 Hint

Common Mistakes

Using translationX twice instead of translationY.

Passing undefined or missing onHandlerStateChange.

Using invalid color strings.

translationY is the vertical translation property. The onHandlerStateChange can be an empty function if unused. The color 'red' is a valid background color.

Practice

1. What is the main purpose of wrapping your React Native app with GestureHandlerRootView?

easy

A. To enable gesture detection and handling throughout the app

B. To style the app's background color

C. To improve app performance by caching views

D. To add navigation capabilities between screens

Solution

1. Step 1: Understand the role of GestureHandlerRootView

   This component is required to wrap the app so that gesture detection works properly across all child components.

2. Step 2: Differentiate from other purposes

   Styling, performance caching, or navigation are unrelated to GestureHandlerRootView's function.

3. Final Answer:

   To enable gesture detection and handling throughout the app -> Option A

4. Quick Check:

   GestureHandlerRootView enables gestures [OK]

Hint: GestureHandlerRootView enables gestures app-wide [OK]

Common Mistakes:

• Thinking it styles the app
• Confusing it with navigation setup
• Assuming it improves performance

2. Which of the following is the correct way to import the TapGestureHandler from react-native-gesture-handler?

easy

A. import { TapGestureHandler } from 'react-native';

B. import TapGestureHandler from 'react-native-gesture-handler';

C. import { TapGestureHandler } from 'react-native-gesture-handler';

D. import TapGestureHandler from 'react-native-gesture-handler/TapGestureHandler';

Solution

1. Step 1: Recall correct import syntax

   TapGestureHandler is a named export from 'react-native-gesture-handler', so it must be imported with curly braces.

2. Step 2: Eliminate incorrect imports

   Default import without braces is wrong, importing from 'react-native' is incorrect, and importing from a subpath is not standard.

3. Final Answer:

   import { TapGestureHandler } from 'react-native-gesture-handler'; -> Option C

4. Quick Check:

   Named imports use curly braces [OK]

Hint: Use curly braces for named imports like TapGestureHandler [OK]

Common Mistakes:

• Using default import instead of named import
• Importing from 'react-native' instead of gesture-handler
• Trying to import from a subpath

3. Given this code snippet, what will happen when the user taps the blue box?

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

export default function App() {
  const onTap = () => Alert.alert('Box tapped!');

  return (
    
      
        
      
    
  );
}

medium

A. An alert saying 'Box tapped!' will appear when the blue box is tapped

B. Nothing happens because onActivated is not a valid prop

C. The app will crash due to missing gesture handler setup

D. The blue box changes color when tapped

Solution

1. Step 1: Understand TapGestureHandler usage

   The onActivated prop triggers the callback when the tap gesture is recognized.

2. Step 2: Analyze the code behavior

   When the blue box is tapped, the onTap function runs, showing an alert with 'Box tapped!'.

3. Final Answer:

   An alert saying 'Box tapped!' will appear when the blue box is tapped -> Option A

4. Quick Check:

   onActivated triggers alert on tap [OK]

Hint: onActivated fires callback on tap gesture [OK]

Common Mistakes:

• Confusing onActivated with onPress
• Assuming no effect without extra setup
• Expecting color change without code

4. You wrote this code but the tap gesture is not detected. What is the likely cause?

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

export default function App() {
  const onTap = () => console.log('Tapped');

  return (
    
      
    
  );
}

medium

A. The style width and height are too small for detection

B. The app is missing the GestureHandlerRootView wrapper

C. The View component must be a Button for gestures

D. The onActivated prop should be onPress instead

Solution

1. Step 1: Check for GestureHandlerRootView presence

   Gesture handlers require the app to be wrapped in GestureHandlerRootView to work properly.

2. Step 2: Evaluate other options

   onActivated is correct, View can detect gestures, and size 100x100 is sufficient.

3. Final Answer:

   The app is missing the GestureHandlerRootView wrapper -> Option B

4. Quick Check:

   Missing GestureHandlerRootView blocks gestures [OK]

Hint: Always wrap app with GestureHandlerRootView [OK]

Common Mistakes:

• Using onPress instead of onActivated
• Thinking View can't detect gestures
• Assuming size is too small

5. You want to detect both tap and long press gestures on the same box using react-native-gesture-handler. Which approach correctly integrates both handlers?

hard

A. Use only TapGestureHandler with a long delay prop

B. Use PanGestureHandler instead for both tap and long press

C. Wrap the box in two sibling gesture handlers without nesting

D. Nest LongPressGestureHandler inside TapGestureHandler and handle callbacks separately

Solution

1. Step 1: Understand gesture handler nesting

   To detect multiple gestures on the same view, nest handlers so gestures can be recognized distinctly.

2. Step 2: Evaluate options

   Using only TapGestureHandler can't detect long press, siblings won't work well on same view, PanGestureHandler is for drag gestures.

3. Final Answer:

   Nest LongPressGestureHandler inside TapGestureHandler and handle callbacks separately -> Option D

4. Quick Check:

   Nesting handlers enables multiple gesture detection [OK]

Hint: Nest handlers to detect multiple gestures on one view [OK]

Common Mistakes:

• Trying to detect long press with TapGestureHandler only
• Using sibling handlers on same view without nesting
• Confusing PanGestureHandler with tap/long press