React Native Reanimated - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What is the output of this Reanimated shared value update?

Consider this React Native Reanimated code snippet that updates a shared value on button press. What will be the value of progress.value after pressing the button twice?

React Native

import {useSharedValue} from 'react-native-reanimated';

const progress = useSharedValue(0);

function onPress() {
  progress.value = progress.value + 0.5;
}

A 1.0

B 0.5

C 2.0

D 0

💡 Hint

Each press adds 0.5 to the current value.

The shared value starts at 0. Each press adds 0.5, so after two presses, progress.value is 1.0.

❓ lifecycle

intermediate

When does a worklet run in React Native Reanimated?

In React Native Reanimated, when is a worklet function executed?

A On the UI thread, immediately when called from JS thread

B On the UI thread, scheduled by Reanimated runtime

C Only on the JS thread asynchronously

D On the native thread after a delay

💡 Hint

Worklets run on the UI thread for smooth animations.

Worklets are special functions that run on the UI thread, scheduled by Reanimated to avoid blocking the JS thread.

📝 Syntax

advanced

What error does this Reanimated code produce?

What error will this code snippet cause when run in a React Native app using Reanimated?

React Native

import {useSharedValue} from 'react-native-reanimated';

const progress = useSharedValue(0);

function update() {
  'worklet';
  progress.value += 1;
}

update();

A No error, runs correctly

B SyntaxError: Missing semicolon

C TypeError: progress.value is not a number

D ReferenceError: progress is not defined inside worklet

💡 Hint

Worklets have isolated scope and cannot access variables outside unless passed or declared.

Inside a worklet, variables from outside scope are not accessible unless passed explicitly. Here, progress is undefined inside the worklet.

❓ navigation

advanced

How to trigger a navigation action after animation ends?

You want to navigate to another screen after a Reanimated animation finishes. Which approach correctly triggers navigation after the animation?

A Use <code>withTiming</code> callback to call navigation inside the worklet

B Call navigation immediately after starting animation without callback

C Use <code>runOnJS</code> inside animation callback to call navigation function

D Use <code>setTimeout</code> with animation duration to call navigation

💡 Hint

Navigation functions run on JS thread, so use runOnJS to call them from worklet.

Animation callbacks run on UI thread worklets. To call JS thread functions like navigation, use runOnJS inside the animation callback.

🧠 Conceptual

expert

What is the main benefit of using React Native Reanimated worklets?

Why do React Native developers use worklets in Reanimated for animations instead of running animation logic on the JS thread?

A Worklets allow animations to run on the UI thread, making them smoother and avoiding JS thread delays

B Worklets simplify writing animations by using plain JavaScript without any restrictions

C Worklets automatically optimize battery usage by reducing CPU frequency

D Worklets enable animations to run on the native thread with direct hardware access

💡 Hint

Think about what causes janky animations in React Native.

Worklets run animation code on the UI thread, avoiding delays caused by JS thread blocking, resulting in smooth animations.