# dotLottie React Native Player Examples
Practical examples of using the dotLottie React Native player, including playback control, state machines, theming, and multi-animation files.

# dotLottie React Native Player Examples

## Basic Animation with Controls

```tsx
import { useRef } from "react";
import { View, Button, StyleSheet } from "react-native";
import { DotLottie, type Dotlottie, Mode } from "@lottiefiles/dotlottie-react-native";

export default function App() {
  const controllerRef = useRef<Dotlottie>(null);

  return (
    <View style={styles.container}>
      <DotLottie
        ref={controllerRef}
        source={{ uri: "https://lottie.host/example/animation.lottie" }}
        loop
        style={styles.animation}
        onLoad={() => console.log("Loaded")}
        onComplete={() => console.log("Complete")}
      />
      <Button title="Play" onPress={() => controllerRef.current?.play()} />
      <Button title="Pause" onPress={() => controllerRef.current?.pause()} />
      <Button title="Stop" onPress={() => controllerRef.current?.stop()} />
      <Button title="2x Speed" onPress={() => controllerRef.current?.setSpeed(2)} />
      <Button title="Bounce" onPress={() => controllerRef.current?.setPlayMode(Mode.BOUNCE)} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, alignItems: "center", justifyContent: "center" },
  animation: { width: 300, height: 300 },
});
```

## Applying a Theme

```tsx
<DotLottie
  source={require("./assets/themed.lottie")}
  autoplay
  loop
  themeId="dark-mode"
  style={{ width: 300, height: 300 }}
/>
```

## Playing a Segment

```tsx
<DotLottie
  source={require("./assets/animation.lottie")}
  autoplay
  loop
  segment={[10, 60]} // play frames 10–60
  style={{ width: 300, height: 300 }}
/>
```

## Playing a Named Marker

```tsx
<DotLottie
  source={require("./assets/animation.lottie")}
  autoplay
  loop={false}
  marker="intro"
  onComplete={() => console.log("Intro done")}
  style={{ width: 300, height: 300 }}
/>
```

## Multi-Animation File

```tsx
import { useRef } from "react";
import { View, Button } from "react-native";
import { DotLottie, type Dotlottie } from "@lottiefiles/dotlottie-react-native";

export default function MultiAnimation() {
  const controllerRef = useRef<Dotlottie>(null);

  return (
    <View>
      <DotLottie
        ref={controllerRef}
        source={require("./assets/multi.lottie")}
        autoplay
        loop
        style={{ width: 300, height: 300 }}
        onLoad={() => {
          // Load a specific animation by ID after the file is ready
          controllerRef.current?.loadAnimation("scene-1");
        }}
      />
      <Button title="Load Scene 2" onPress={() => controllerRef.current?.loadAnimation("scene-2")} />
    </View>
  );
}
```

## Using a State Machine

```tsx
import { useRef } from "react";
import { View, Button } from "react-native";
import { DotLottie, type Dotlottie } from "@lottiefiles/dotlottie-react-native";

export default function InteractiveAnimation() {
  const controllerRef = useRef<Dotlottie>(null);

  return (
    <View>
      <DotLottie
        ref={controllerRef}
        source={require("./assets/interactive.lottie")}
        stateMachineId="buttonFSM"
        style={{ width: 300, height: 300 }}
        onStateMachineStateEntered={(state) => console.log("Entered:", state)}
        onStateMachineTransition={(from, to) => console.log(`${from} -> ${to}`)}
        onStateMachineError={(error) => console.error("SM Error:", error)}
      />
      <Button title="Trigger Click" onPress={() => controllerRef.current?.stateMachineFire("click")} />
      <Button
        title="Set isActive"
        onPress={() => controllerRef.current?.stateMachineSetBooleanInput("isActive", true)}
      />
      <Button title="Set Score = 10" onPress={() => controllerRef.current?.stateMachineSetNumericInput("score", 10)} />
    </View>
  );
}
```

## Using the GL Renderer

```tsx
<DotLottie
  source={{ uri: "https://lottie.host/example/animation.lottie" }}
  autoplay
  loop
  renderer="gl"
  style={{ width: 300, height: 300 }}
/>
```

## Freeze and Unfreeze

```tsx
import { useRef } from "react";
import { View, Button } from "react-native";
import { DotLottie, type Dotlottie } from "@lottiefiles/dotlottie-react-native";

export default function FreezeExample() {
  const controllerRef = useRef<Dotlottie>(null);

  return (
    <View>
      <DotLottie
        ref={controllerRef}
        source={{ uri: "https://lottie.host/example/animation.lottie" }}
        autoplay
        loop
        style={{ width: 300, height: 300 }}
        onFreeze={() => console.log("Frozen")}
        onUnFreeze={() => console.log("Unfrozen")}
      />
      <Button title="Freeze" onPress={() => controllerRef.current?.freeze()} />
      <Button title="Unfreeze" onPress={() => controllerRef.current?.unfreeze()} />
    </View>
  );
}
```

## Querying Animation State (Async)

```tsx
import { useRef } from "react";
import { View, Button } from "react-native";
import { DotLottie, type Dotlottie } from "@lottiefiles/dotlottie-react-native";

export default function QueryExample() {
  const controllerRef = useRef<Dotlottie>(null);

  const logAnimationInfo = async () => {
    const controller = controllerRef.current;
    if (!controller) return;

    const totalFrames = await controller.totalFrames();
    const currentFrame = await controller.currentFrame();
    const duration = await controller.duration();
    const playing = await controller.isPlaying();

    console.log({ totalFrames, currentFrame, duration, playing });
  };

  return (
    <View>
      <DotLottie
        ref={controllerRef}
        source={{ uri: "https://lottie.host/example/animation.lottie" }}
        autoplay
        loop
        style={{ width: 300, height: 300 }}
      />
      <Button title="Log Info" onPress={logAnimationInfo} />
    </View>
  );
}
```

## Related Topics

- [Getting Started](/en/runtimes/distributions/react-native/v0.x/getting-started)
- [API Reference](/en/runtimes/distributions/react-native/v0.x/api-reference)