Introduction to React Native Reanimated

Course: React Native Training

Topic: Introduction to React Native Reanimated

Course Link: React Native Training at JustAcademy

Demo Registration: Register for a Course Demo

Website: JustAcademy Official Website

1. Introduction to React Native Reanimated

React Native Reanimated is a powerful animation library used to create smooth animations and interactive user interfaces in React Native applications. It provides tools for animating component properties, responding to gestures, creating transitions, and building complex motion effects.

React Native includes a built-in Animated API, which is suitable for many common animations. Reanimated provides another approach based on shared values, animated styles, worklets, and animation functions. These features make it especially useful for interfaces that need responsive movement and gesture-driven interactions.

For example, Reanimated can be used to create:

• Animated buttons and interactive cards.
• Swipeable lists and dismissible notifications.
• Expandable menus and bottom sheets.
• Animated navigation transitions.
• Fade, scale, rotation, and translation effects.
• Progress indicators and loading animations.
• Gesture-based image galleries and draggable components.
• Animated charts, dashboards, and onboarding screens.

1.1 Why Are Animations Important?

Animations provide visual feedback and help users understand changes in an application. Instead of displaying abrupt changes, an application can use movement to communicate that a component is opening, closing, loading, expanding, or responding to a user action.

Well-designed animations can:

• Improve the perceived responsiveness of an application.
• Help users understand relationships between interface elements.
• Provide feedback when a button or card is interacted with.
• Make transitions between application states easier to follow.
• Create a consistent and polished user experience.

Animations should remain purposeful. Excessive movement can distract users, affect accessibility, and make interactions feel slower.

2. Learning Objectives

After completing this topic, learners should be able to:

• Understand the purpose of React Native Reanimated.
• Compare Reanimated with React Native's built-in Animated API.
• Understand the concepts of shared values and animated styles.
• Learn how animation functions such as withTiming() and withSpring() work.
• Create basic fade, scale, and translation animations.
• Understand worklets and their role in animation processing.
• Respond to user interactions using animated values.
• Understand Reanimated installation and configuration.
• Identify common setup and runtime problems.
• Apply animation best practices to real-world mobile applications.

3. What Is React Native Reanimated?

React Native Reanimated is a third-party library developed by Software Mansion. It extends React Native animation capabilities by providing a system for defining animation logic, maintaining shared animated values, and calculating animated styles.

In Reanimated, many animation calculations can run on the UI thread through worklets. This can reduce the need for JavaScript-thread updates during animation and help maintain smooth visual interactions when the application is busy.

3.1 Key Features

• Shared values: Store values that can drive animated properties.
• Animated components: Provide React Native components with animation support.
• Animated styles: Connect shared values to component styles.
• Timing animations: Animate values over a specified duration.
• Spring animations: Create motion that resembles a spring.
• Worklets: Allow supported JavaScript functions to execute in a worklet runtime, commonly on the UI thread for animations.
• Gesture integration: Support gesture-driven animations when used with compatible gesture APIs.
• Interpolation: Map one value or range to another range of values.
• Composition: Combine animation functions to create more complex motion.

3.2 Typical Applications

4. React Native Animated API vs Reanimated

React Native's built-in Animated API and Reanimated are complementary approaches. Both can animate supported properties, but they use different APIs and programming models.

The best choice depends on project requirements, React Native version, dependencies, and the complexity of the interface.

5. Installing React Native Reanimated

Before using Reanimated, install a version that is compatible with the project's React Native version and architecture.

5.1 Installation with Expo

For a current Expo project, use Expo's package installer so compatible package versions are selected.

npx expo install react-native-reanimated react-native-worklets

Reanimated 4 requires the React Native New Architecture and the Worklets package. Follow the installation instructions for the exact version of Expo and Reanimated used by the project.

5.2 Installation with React Native Community CLI

For a bare React Native project, install compatible versions of Reanimated and its required dependencies using the package manager.

npm install react-native-reanimated react-native-worklets

Alternatively, use Yarn if that is the package manager configured for the project.

yarn add react-native-reanimated react-native-worklets

Version note: Installation requirements differ between Reanimated major versions. Reanimated 4 requires the New Architecture, while projects that still use the old architecture may need a compatible Reanimated 3 release. Reanimated 3 and Reanimated 4 configuration instructions should not be mixed.

5.3 Configuring the Worklets Plugin

For React Native Community CLI projects using Reanimated 4, check the official setup guide for the required Worklets Babel plugin configuration. In a standard setup, the plugin is added to babel.config.js and must appear last in the plugins list.

module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: [
    'react-native-worklets/plugin',
  ],
};

Use the preset and other settings already required by your project's React Native version. Do not replace an existing configuration blindly; merge the required plugin into the project's current configuration.

5.4 Rebuild the Application

Native dependencies may require a rebuild after installation or configuration changes.

For an Expo project, consult the appropriate development-build or prebuild instructions. For a bare iOS project, install CocoaPods dependencies if required.

cd ios
pod install
cd ..

Restart Metro and clear its cache if the installation guide recommends it or the project reports stale transformation errors.

npx expo start --clear

For a bare React Native Community CLI project, use the corresponding start command and rebuild instructions for the project's environment.

6. Understanding Shared Values

A shared value stores information that can drive an animation. It is created using the useSharedValue() hook and can be read or updated through its value property in the standard Reanimated API.

For example:

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

const opacity = useSharedValue(0);

Here, the shared value begins at zero. It can be used to control opacity, translation, scale, rotation, or other supported animated properties.

6.1 Updating a Shared Value

opacity.value = 1;

This assigns a new value immediately from the perspective of the JavaScript code, but it does not create a gradual animation by itself. To animate the transition, assign an animation function such as withTiming() to the shared value.

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

opacity.value = withTiming(1, {
  duration: 500,
});

The value transitions toward one over approximately 500 milliseconds.

6.2 Important Shared Value Rules

• Create shared values inside a React component or a suitable custom hook.
• Do not recreate a shared value on every render.
• Use shared values for animated data rather than triggering React state updates for every animation frame.
• Do not read or write shared values during rendering as a side effect.
• Use useAnimatedStyle() to connect shared values to animated styles.
• Follow the current documentation if using React Compiler-compatible APIs such as the supported get() and set() methods.

7. Understanding Animated Components

Reanimated provides an Animated object that wraps React Native components with animation support.

For example:

import Animated from 'react-native-reanimated';

export default function AnimatedBox() {
  return (
    <Animated.View
      style={{
        width: 100,
        height: 100,
        backgroundColor: 'royalblue',
      }}
    />
  );
}

Animated.View can receive styles returned by useAnimatedStyle(). The animated style can change in response to shared value updates without requiring a regular React render for every frame.

8. Understanding useAnimatedStyle()

The useAnimatedStyle() hook returns a style object that reacts to shared value changes. It is one of the primary ways to connect Reanimated values to a component's visual appearance.

import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withTiming,
} from 'react-native-reanimated';

const opacity = useSharedValue(0);

const animatedStyle = useAnimatedStyle(() => {
  return {
    opacity: opacity.value,
  };
});

When the shared opacity value changes, Reanimated recalculates the animated style and updates the component accordingly.

In a complete component, define the shared value and animated style inside the component function, then pass the style to an Animated.View.

9. Understanding Worklets

Worklets are specialized JavaScript functions that Reanimated can transform and execute in supported runtimes, commonly the UI thread for animation-related calculations. They allow animated styles and gesture logic to respond efficiently to shared values and events.

For example, the callback passed to useAnimatedStyle() is processed as a worklet in a standard Reanimated setup.

const animatedStyle = useAnimatedStyle(() => {
  return {
    opacity: opacity.value,
    transform: [
      { scale: scale.value },
    ],
  };
});

You do not normally need to add a 'worklet' directive manually to every callback used by standard Reanimated hooks. Some custom functions do require the directive, depending on how they are used and the library version.

10. Creating Your First Reanimated Animation

The following example creates a box that fades into view when the component mounts.

import React, { useEffect } from 'react';
import { View, Text } from 'react-native';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withTiming,
} from 'react-native-reanimated';

export default function FirstReanimatedAnimation() {
  const opacity = useSharedValue(0);

  const animatedStyle = useAnimatedStyle(() => ({
    opacity: opacity.value,
  }));

  useEffect(() => {
    opacity.value = withTiming(1, {
      duration: 800,
    });
  }, [opacity]);

  return (
    <View style={{ padding: 20 }}>
      <Animated.View
        style={[
          {
            padding: 20,
            backgroundColor: '#DBEAFE',
            borderRadius: 12,
          },
          animatedStyle,
        ]}
      >
        <Text>My first Reanimated animation</Text>
      </Animated.View>
    </View>
  );
}

10.1 How It Works

1. The opacity shared value begins at zero.
2. useAnimatedStyle() connects the shared value to the component's opacity.
3. useEffect() starts the animation after the component mounts.
4. withTiming(1) animates the value toward one.
5. The component gradually becomes visible.

11. Understanding withTiming()

withTiming() animates a value toward a target over a specified duration. It is useful for predictable transitions such as fades, slides, and other time-based effects.

opacity.value = withTiming(1, {
  duration: 600,
});

The first argument is the target value. The second argument is an optional configuration object.

11.1 Common Configuration Options

11.2 Using Easing

import {
  Easing,
  withTiming,
} from 'react-native-reanimated';

opacity.value = withTiming(1, {
  duration: 700,
  easing: Easing.out(Easing.cubic),
});

Easing can make a transition feel more natural by changing its speed throughout the animation.

12. Understanding withSpring()

withSpring() animates a value toward a target using spring-like motion. It is useful for interactive interfaces where an element should feel responsive rather than move at a constant speed.

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

scale.value = withSpring(1, {
  damping: 12,
  stiffness: 120,
});

Common configuration options include:

• damping: Controls how quickly spring oscillation is reduced.
• stiffness: Controls the spring's strength.
• mass: Represents the mass used by the spring model in supported configurations.

Spring configuration options and defaults can vary by version. Use settings that produce a natural motion without excessive bouncing.

13. Creating Fade Animations with Reanimated

A fade animation gradually changes the opacity of a component. It is useful for showing content, displaying messages, revealing images, and creating simple screen transitions.

13.1 Fade-In Animation

import React, { useEffect } from 'react';
import { View, Text } from 'react-native';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withTiming,
} from 'react-native-reanimated';

export default function FadeInExample() {
  const opacity = useSharedValue(0);

  const animatedStyle = useAnimatedStyle(() => ({
    opacity: opacity.value,
  }));

  useEffect(() => {
    opacity.value = withTiming(1, {
      duration: 1000,
    });
  }, [opacity]);

  return (
    <View style={{ padding: 20 }}>
      <Animated.View
        style={[
          {
            padding: 20,
            backgroundColor: '#D1FAE5',
            borderRadius: 10,
          },
          animatedStyle,
        ]}
      >
        <Text>This content fades in.</Text>
      </Animated.View>
    </View>
  );
}

13.2 Fade-Out Animation

To fade out a component, animate opacity from its current value toward zero.

opacity.value = withTiming(0, {
  duration: 500,
});

Fade-out effects can be used to dismiss a notification or make a temporary message disappear. Remember that opacity alone does not remove a component from the layout or disable its touch and accessibility behavior.

14. Creating Scale Animations with Reanimated

A scale animation changes the visual size of a component using a transform. It is often used for buttons, cards, icons, and popup elements.

14.1 Scale-In Animation

import React, { useEffect } from 'react';
import { View, Text } from 'react-native';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withSpring,
} from 'react-native-reanimated';

export default function ScaleInExample() {
  const scale = useSharedValue(0.7);

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ scale: scale.value }],
  }));

  useEffect(() => {
    scale.value = withSpring(1);
  }, [scale]);

  return (
    <View style={{ padding: 20 }}>
      <Animated.View
        style={[
          {
            padding: 24,
            backgroundColor: '#FDE68A',
            borderRadius: 12,
          },
          animatedStyle,
        ]}
      >
        <Text>Scale-in animation</Text>
      </Animated.View>
    </View>
  );
}

The component begins at 70% of its normal visual size and grows to its normal size using a spring animation.

14.2 Scale-Out Animation

A scale-out animation reduces a component's visual size.

scale.value = withTiming(0.5, {
  duration: 300,
});

Use scale-out effects for collapsing visual emphasis or preparing a component to disappear. If the component should be removed entirely, coordinate the animation with component visibility or data state.

15. Creating Slide Animations with Reanimated

Slide animations move a component from one position to another. Reanimated supports translation through transform properties such as translateX and translateY.

• translateX controls horizontal movement.
• translateY controls vertical movement.

15.1 Slide-In from the Left

import React, { useEffect } from 'react';
import { View, Text } from 'react-native';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withTiming,
} from 'react-native-reanimated';

export default function SlideInExample() {
  const translateX = useSharedValue(-250);

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ translateX: translateX.value }],
  }));

  useEffect(() => {
    translateX.value = withTiming(0, {
      duration: 600,
    });
  }, [translateX]);

  return (
    <View style={{ padding: 20 }}>
      <Animated.View
        style={[
          {
            padding: 20,
            backgroundColor: '#DBEAFE',
            borderRadius: 12,
          },
          animatedStyle,
        ]}
      >
        <Text>Sliding in from the left</Text>
      </Animated.View>
    </View>
  );
}

The component begins 250 layout units to the left of its original position and moves to zero translation.

15.2 Slide-In from the Right

To slide in from the right, begin with a positive horizontal translation and animate toward zero.

const translateX = useSharedValue(250);

useEffect(() => {
  translateX.value = withTiming(0, {
    duration: 600,
  });
}, [translateX]);

Apply the animated value to an animated style using transform: [{ translateX: translateX.value }].

15.3 Slide-In from the Top

const translateY = useSharedValue(-150);

useEffect(() => {
  translateY.value = withTiming(0, {
    duration: 500,
  });
}, [translateY]);

A negative starting value moves the component above its original position. Animating toward zero brings it into view from the top.

15.4 Slide-In from the Bottom

const translateY = useSharedValue(200);

useEffect(() => {
  translateY.value = withTiming(0, {
    duration: 500,
  });
}, [translateY]);

A positive starting value moves the component below its original position. Animating toward zero creates a bottom-up entrance effect.

16. Combining Multiple Animations

Reanimated allows multiple shared values to be animated together. For example, a card can fade in, grow to its normal size, and slide upward at the same time.

16.1 Using Fade, Scale, and Slide Together

import React, { useEffect } from 'react';
import { View, Text } from 'react-native';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withTiming,
  withSpring,
  Easing,
} from 'react-native-reanimated';

export default function CombinedAnimationExample() {
  const opacity = useSharedValue(0);
  const scale = useSharedValue(0.8);
  const translateY = useSharedValue(40);

  const animatedStyle = useAnimatedStyle(() => ({
    opacity: opacity.value,
    transform: [
      { scale: scale.value },
      { translateY: translateY.value },
    ],
  }));

  useEffect(() => {
    opacity.value = withTiming(1, {
      duration: 500,
      easing: Easing.out(Easing.cubic),
    });

    scale.value = withSpring(1);

    translateY.value = withTiming(0, {
      duration: 500,
      easing: Easing.out(Easing.cubic),
    });
  }, [opacity, scale, translateY]);

  return (
    <View style={{ padding: 20 }}>
      <Animated.View
        style={[
          {
            padding: 24,
            backgroundColor: '#EDE9FE',
            borderRadius: 14,
          },
          animatedStyle,
        ]}
      >
        <Text>Welcome to Reanimated</Text>
        <Text>Fade, scale, and slide effects work together.</Text>
      </Animated.View>
    </View>
  );
}

16.2 Explanation

1. The opacity shared value begins at zero.
2. The scale shared value begins at 0.8.
3. The vertical translation begins at 40.
4. The opacity animates to one.
5. The scale animates to one using a spring.
6. The vertical translation animates to zero.
7. The card becomes visible, grows to its normal size, and moves upward.

Using separate shared values makes it possible to control the timing and behavior of each animation independently.

17. Triggering Animations with User Interaction

Animations can respond to taps, button presses, and other user actions. For example, a button can scale down when pressed and return to its normal size after the press ends.

import React from 'react';
import { View, Text, Pressable } from 'react-native';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withSpring,
} from 'react-native-reanimated';

export default function AnimatedButton() {
  const scale = useSharedValue(1);

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ scale: scale.value }],
  }));

  return (
    <View style={{ padding: 20 }}>
      <Animated.View style={animatedStyle}>
        <Pressable
          onPressIn={() => {
            scale.value = withSpring(0.95);
          }}
          onPressOut={() => {
            scale.value = withSpring(1);
          }}
          onPress={() => {
            // Add the button's application action here.
          }}
          style={{
            backgroundColor: '#2563EB',
            padding: 16,
            borderRadius: 10,
          }}
        >
          <Text style={{ color: '#FFFFFF', textAlign: 'center' }}>
            Press Me
          </Text>
        </Pressable>
      </Animated.View>
    </View>
  );
}

The button scales down while pressed and returns to its normal size when released. The onPress handler can be used for the actual application action.

18. Animation Composition and Repetition

Reanimated provides utilities for sequencing, repeating, and combining animations. These can be used to build more complex interactions without manually updating every animation frame.

18.1 withSequence()

withSequence() runs animations in order.

import {
  withSequence,
  withTiming,
} from 'react-native-reanimated';

scale.value = withSequence(
  withTiming(1.1, { duration: 150 }),
  withTiming(1, { duration: 150 })
);

This example briefly enlarges a component and then returns it to normal size.

18.2 withRepeat()

withRepeat() repeats an animation a specified number of times or, when configured appropriately, indefinitely.

import {
  withRepeat,
  withTiming,
} from 'react-native-reanimated';

opacity.value = withRepeat(
  withTiming(0.3, { duration: 700 }),
  3,
  true
);

This example repeats a transition between the current value and its target, reversing direction on alternate repetitions. Use repeated animation carefully so it does not distract users or continue unnecessarily.

18.3 withDelay()

withDelay() delays the start of an animation.

import {
  withDelay,
  withTiming,
} from 'react-native-reanimated';

opacity.value = withDelay(
  300,
  withTiming(1, { duration: 500 })
);

This example waits approximately 300 milliseconds before beginning the fade-in transition.

19. Using Interpolation

Interpolation maps an input range to an output range. It is useful when one shared value should control multiple visual properties or when an animation needs to produce a different visual result from its raw value.

For example, a value that moves from zero to one can be used to derive a rotation angle.

import {
  useSharedValue,
  useAnimatedStyle,
  withTiming,
  interpolate,
  Extrapolation,
} from 'react-native-reanimated';

const progress = useSharedValue(0);

const animatedStyle = useAnimatedStyle(() => {
  const rotate = interpolate(
    progress.value,
    [0, 1],
    [0, 180],
    Extrapolation.CLAMP
  );

  return {
    transform: [{ rotate: `${rotate}deg` }],
  };
});

const startRotation = () => {
  progress.value = withTiming(1, {
    duration: 700,
  });
};

The interpolation function maps the progress range from zero to one onto a rotation range from zero to 180 degrees. The Extrapolation.CLAMP option keeps the output within the configured range.

20. Performance Best Practices

• Prefer animated transforms and opacity for common visual effects.
• Use shared values to drive animations rather than updating React state for every frame.
• Keep worklets and gesture callbacks focused on the calculations needed for the interaction.
• Avoid expensive computations inside frequently executed animated styles.
• Choose animation durations that support a responsive experience.
• Stop or replace animations appropriately when interactions change.
• Avoid unnecessary repeated animations that consume resources or distract users.
• Test performance on physical devices, not only in simulators.
• Check that animated content does not overlap important controls.
• Use versions of Reanimated and Worklets that match the project's React Native architecture.

21. Accessibility Considerations

Animations should improve the experience without making the application difficult to use. Some users may prefer reduced motion or experience discomfort from large or repeated movement.

• Do not rely on animation alone to communicate important information.
• Keep decorative transitions subtle and purposeful.
• Ensure that animated buttons remain accessible and easy to activate.
• Do not leave invisible components unexpectedly interactive.
• Consider reduced-motion preferences when designing motion-heavy screens.
• Make important actions available through accessible controls, not only through gestures.
• Test screen-reader behavior when content appears, disappears, or changes position.

22. Common Problems and Troubleshooting

23. Practical Exercises

Exercise 1: Create a Fade-In Message

Create a welcome message that begins transparent and becomes fully visible over 800 milliseconds.

Requirements:

• Use useSharedValue().
• Connect the value through useAnimatedStyle().
• Use withTiming() to animate opacity.
• Start the animation when the component mounts.

Exercise 2: Create a Scale-In Card

Create a card that starts at 0.75 scale and grows to its normal size using withSpring().

Requirements:

• Use a shared value for scale.
• Apply it through a transform.
• Use a spring animation.
• Make sure the card remains readable and does not overlap other content.

Exercise 3: Create a Slide-In Panel

Create a panel that slides in from the right side of its original position.

Requirements:

• Initialize a horizontal translation value with a positive number.
• Animate the value toward zero.
• Use a duration of approximately 500 milliseconds.
• Add a button that can replay the animation.

Exercise 4: Combine Fade, Scale, and Slide

Create a product card that fades in, grows to normal size, and moves upward when the screen opens.

Requirements:

• Create separate shared values for opacity, scale, and vertical translation.
• Connect all three values through a single animated style.
• Start the animations together.
• Test the animation on an Android or iOS device.

24. Mini Project: Animated Profile Card

The goal of this mini project is to create a profile card that fades in, scales up, and slides upward when displayed. A button allows the user to replay the entrance animation.

24.1 Complete Example

import React, { useCallback, useEffect } from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withTiming,
  withSpring,
  Easing,
} from 'react-native-reanimated';

export default function AnimatedProfileCard() {
  const opacity = useSharedValue(0);
  const scale = useSharedValue(0.8);
  const translateY = useSharedValue(40);

  const animatedStyle = useAnimatedStyle(() => ({
    opacity: opacity.value,
    transform: [
      { scale: scale.value },
      { translateY: translateY.value },
    ],
  }));

  const playAnimation = useCallback(() => {
    opacity.value = 0;
    scale.value = 0.8;
    translateY.value = 40;

    opacity.value = withTiming(1, {
      duration: 500,
      easing: Easing.out(Easing.cubic),
    });

    scale.value = withSpring(1);

    translateY.value = withTiming(0, {
      duration: 500,
      easing: Easing.out(Easing.cubic),
    });
  }, [opacity, scale, translateY]);

  useEffect(() => {
    playAnimation();
  }, [playAnimation]);

  return (
    <View style={styles.container}>
      <Animated.View style={[styles.card, animatedStyle]}>
        <View style={styles.avatar}>
          <Text style={styles.avatarText}>RN</Text>
        </View>

        <Text style={styles.name}>React Native Developer</Text>

        <Text style={styles.description}>
          Building interactive mobile experiences.
        </Text>
      </Animated.View>

      <View style={styles.buttonContainer}>
        <Button
          title="Replay Animation"
          onPress={playAnimation}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
    backgroundColor: '#F3F4F6',
  },
  card: {
    width: '100%',
    maxWidth: 350,
    alignItems: 'center',
    padding: 24,
    backgroundColor: '#FFFFFF',
    borderRadius: 16,
  },
  avatar: {
    width: 80,
    height: 80,
    borderRadius: 40,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#2563EB',
    marginBottom: 16,
  },
  avatarText: {
    color: '#FFFFFF',
    fontSize: 24,
    fontWeight: 'bold',
  },
  name: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 8,
    color: '#111827',
  },
  description: {
    fontSize: 15,
    textAlign: 'center',
    lineHeight: 22,
    color: '#4B5563',
  },
  buttonContainer: {
    marginTop: 24,
  },
});

24.2 Project Explanation

1. The shared opacity value begins at zero.
2. The scale value begins at 0.8, making the card visually smaller.
3. The vertical translation begins at 40, positioning the card below its final visual position.
4. The animated style connects the shared values to the card's appearance.
5. The playAnimation() function resets the values before starting the entrance effect.
6. The fade and slide use timing animations, while the scale uses a spring animation.
7. The replay button allows the user to run the animation again.

25. Interview Questions and Answers

Q1. What is React Native Reanimated?

React Native Reanimated is a library for building smooth animations and interactive interfaces in React Native applications.

Q2. What is a shared value?

A shared value is a reactive value created with useSharedValue() that can drive animated styles and animation logic.

Q3. What is useAnimatedStyle()?

useAnimatedStyle() creates an animated style that reacts to shared value changes and applies the resulting styles to an animated component.

Q4. What is withTiming()?

withTiming() animates a value toward a target over a specified duration and can use an easing function.

Q5. What is withSpring()?

withSpring() animates a value toward a target using spring-like motion.

Q6. What are worklets?

Worklets are specialized functions that Reanimated can transform and execute in supported JavaScript runtimes, commonly on the UI thread for animation calculations.

Q7. What is the difference between Animated.Value and useSharedValue?

Animated.Value belongs to React Native's built-in Animated API. useSharedValue() belongs to Reanimated and provides a reactive value used by Reanimated hooks and animation functions.

Q8. How can you create a fade-in effect?

Create a shared opacity value initialized at zero, connect it through useAnimatedStyle(), and animate it to one using withTiming().

Q9. How can you create a scale animation?

Create a shared value for scale and use it in a transform style. Animate the value with withSpring() or withTiming().

Q10. How can you create a slide animation?

Use a shared value for translateX or translateY, then animate the value toward the intended position.

Q11. Why is Reanimated useful for gesture-driven interfaces?

It allows shared values, worklets, and animated styles to respond efficiently to gesture information, making it suitable for complex interactive motion.

Q12. Does Reanimated require installation?

Yes. It is a separate library. Its dependencies and configuration must match the React Native version and architecture used by the project.

Q13. Can every style property be animated?

No. Support depends on the property, platform, and library version. Check the official documentation for the specific property and animation API.

Q14. How can an animation be replayed?

Reset the shared values to their initial states and assign new animation functions to them.

Q15. What are common Reanimated performance practices?

Use shared values appropriately, avoid expensive calculations in frequently executed worklets, prefer suitable animated transforms and opacity, and test on real devices.

26. Quick Revision Checklist

• Understand the purpose of React Native Reanimated.
• Know the difference between React Native Animated and Reanimated.
• Understand useSharedValue().
• Understand useAnimatedStyle().
• Know how withTiming() works.
• Know how withSpring() works.
• Understand the role of worklets.
• Create fade animations using opacity.
• Create scale animations using transform properties.
• Create slide animations using translation.
• Combine multiple animated values in one style.
• Trigger animations in response to user interactions.
• Install and configure compatible Reanimated and Worklets versions.
• Test performance, accessibility, and behavior on target devices.

27. Official Documentation and Learning Resources

• React Native Reanimated Official Documentation
• Reanimated Getting Started Guide
• Reanimated Shared Values Guide
• Create Your First Reanimated Animation
• Reanimated Worklets Guide
• React Native Official Animation Documentation
• Explore React Native Training at JustAcademy
• Register for a Course Demo
• Visit JustAcademy

28. Conclusion

React Native Reanimated provides a flexible foundation for building smooth animations and interactive mobile interfaces. Shared values store animated data, animated styles connect that data to components, and functions such as withTiming() and withSpring() control how values change over time.

By learning the fundamentals of Reanimated, developers can create fade, scale, slide, and combined animations for cards, buttons, screens, notifications, and gesture-driven interactions. A good implementation balances visual quality with performance, accessibility, maintainability, and compatibility with the project's React Native architecture.