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 },
});

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

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

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

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>
  );
}

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>
  );
}

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

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>
  );
}

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>
  );
}