React Native Reanimated - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the main hook from React Native Reanimated.

React Native

import [1] from 'react-native-reanimated';

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

AuseAnimatedStyle

BuseSharedValue

CAnimated

DuseEffect

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'Animated' instead of 'useSharedValue'.

Confusing with React's useEffect hook.

The useSharedValue hook is the main way to create shared values in Reanimated.

2fill in blank

medium

Complete the code to create an animated style that changes opacity based on a shared value.

React Native

const animatedStyle = useAnimatedStyle(() => ({ opacity: [1].value }));

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

Aopacity

Bprogress

CanimatedValue

DsharedValue

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'opacity' instead of the shared value variable.

Using 'animatedValue' without defining it.

The shared value variable (here named sharedValue) holds the animated number. We access its .value to get the current value.

3fill in blank

hard

Fix the error in the code to animate a view's translation on the X axis using withTiming.

React Native

sharedValue.value = [1](100);

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

AwithTiming

BwithSpring

CuseSharedValue

DuseAnimatedStyle

Attempts:

3 left

💡 Hint

Common Mistakes

Using hooks like useSharedValue instead of animation functions.

Using withSpring when timing animation is needed.

withTiming is used to animate a value smoothly to a target number over time.

4fill in blank

hard

Fill both blanks to create a shared value and an animated style that moves a view horizontally.

React Native

const [1] = useSharedValue(0);
const animatedStyle = useAnimatedStyle(() => ({ transform: [{ translateX: [2].value }] }));

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

AtranslationX

BmoveX

Attempts:

3 left

💡 Hint

Common Mistakes

Using different variable names for the shared value and animated style.

Using unrelated variable names.

The shared value and the variable used in the animated style must have the same name to link the animation.

5fill in blank

hard

Fill all three blanks to create a gesture handler that updates a shared value on pan gesture.

React Native

const gestureHandler = useAnimatedGestureHandler({
  onActive: (event) => {
    [1].value = event.[2];
  },
  onEnd: () => {
    [3].value = withTiming(0);
  }
});

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

AtranslationX

BtranslationY

CtranslateX

DtranslateY

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up translationX and translationY.

Using incorrect property names like translateX.

The shared value is updated with the gesture's horizontal translation (translationX), and reset with withTiming.