How to play a Lottie animation only once in LottieView?

Question

I have developed a bottom tab navigator and used Lottie animations as icons. I want them to autoplay and get played only once when it's in focus (like the Binance app). I have tried with loop={false} but that stops it from animating altogether. The code is as follow:

import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import LottieView from 'lottie-react-native';

import Home from './Home';
import Create from './Create';
import Messages from './Messages';
import Forum from './Forum';
import Profile from './Profile';

const Tab = createBottomTabNavigator();

export default function Tabs() {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let filePath;

          switch (route.name) {
            case 'Home':
              filePath = require('../tabanimations/hometab.json');
              break;
            case 'Messages':
              filePath = require('../tabanimations/messagestab.json');
              break;
            case 'Create':
              filePath = require('../tabanimations/hometab.json');
              break;
            case 'Forum':
              filePath = require('../tabanimations/forumtab.json');
            case 'Profile':
              filePath = require('../tabanimations/profiletab.json');

              break;
          }

          return <LottieView source={filePath} autoPlay={focused} />;
        },
      })}>
      <Tab.Screen name="Home" component={Home} />
      <Tab.Screen name="Messages" component={Messages} />
      <Tab.Screen name="Create" component={Create} />
      <Tab.Screen name="Forum" component={Forum} />
      <Tab.Screen name="Profile" component={Profile} />
    </Tab.Navigator>
  );
}

How to play the animation only once on focus?

Ahmed Gaber · Accepted Answer · 2021-09-22T17:48:27.353

Use loop={false} and autoPlay={false} then use play() to run on focus
your code may be lookalike this

tabBarIcon: ({ focused, color, size }) => {
    return <CustomTab focused={focused} color={color} size={size} route={route}/>
}


const CustomTab = ({ focused, color, size, route}) => {

    const ref = React.useRef();
    let filePath;

    //on focus change the anim will play
    React.useEffect(() => {
        if(focused && ref.current){
            ref.current?.play();
        }
    }, [focused, ref.current]);

    switch (route.name) {
        case 'Home':
            filePath = require('../tabanimations/hometab.json');
            break;
        case 'Messages':
            filePath = require('../tabanimations/messagestab.json');
            break;
        case 'Create':
            filePath = require('../tabanimations/hometab.json');
            break;
        case 'Forum':
            filePath = require('../tabanimations/forumtab.json');
        case 'Profile':
            filePath = require('../tabanimations/profiletab.json');

            break;
    }

    return (
        <LottieView 
            ref={ref}
            loop={false}
            source={filePath} 
            autoPlay={false} />
    );
};

you can also use play like this ref.current?.play(0, 1) to ensure it always start from 0 you can see LottieView Methods here

score 2 · Answer 2 · answered Jul 11 '22 at 16:30

Set loop={false} for playing the animation only once.

export default function App = () => {

    const ref = React.useRef();

    const playAnim = () => {
       ref.current?.play();
    }

    const pauseAnim = () => {
       ref.current?.pause();
    }

    return (
        <LottieView 
            ref={ref}
            loop={false}
            source={filePath} 
            autoPlay={false} />
    );
};

How to play a Lottie animation only once in LottieView?

2 Answers2