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.