CODEWITHSUNDEEP
reactjsreact-nativereact-native-ioslottie
Belgin Android
Belgin Android

Reputation: 307

How to play a segment of a Lottie Animation (.json file ) in React Native

I want to play only a segment of the animation in react native using lottie view the length is about 5 seconds while in speed={1} I wanna play only the first 3 seconds and then go to the next screen the code is down below

LogoScreen.js :

import React from 'react';
import { StyleSheet, View, Image, TextInput, StatusBar, Text } from "react-native";
import Icons from 'react-native-vector-icons/Ionicons';
import LottieView from "lottie-react-native";

export default class ChatScreen extends React.Component {

  onAnimationFinish = () => {
    this.props.navigation.navigate("Login")
  }
  render () {
    return (
      <View style={styles.container}>
        <StatusBar barStyle="light-content" backgroundColor="#161f3d" />
        <View>
          <LottieView
            source={require('../assets/animations/lottie/MotionCorpse-Jrcanest.json')}
            style={{ justifyContent: "center", alignSelf: "center", height: "100%", width: "100%" }}
            autoPlay
            loop={false}
            speed={1}
            onAnimationFinish={this.onAnimationFinish}
          />
        </View>
      </View>
    )
  }

Upvotes: 4

Views: 6739

Answers (1)

Neetin Solanki
Neetin Solanki

Reputation: 681

Well you can do it by several ways, one of the way would be like below.

You can use ref to play it manually and then after 3 seconds just redirect to next screen.

import React from 'react';
import { StyleSheet, View, Image, TextInput, StatusBar, Text } from "react-native";
import Icons from 'react-native-vector-icons/Ionicons';
import LottieView from "lottie-react-native";

export default class ChatScreen extends React.Component {

    componentDidMount() {
        this.anim.play();

        setTimeout(() => {
            this.props.navigation.navigate("Login")
        }, 3000);
    }

    render() {
        return (
            <View style={styles.container}>
                <StatusBar barStyle="light-content" backgroundColor="#161f3d" />
                <View>
                    <LottieView
                        source={require('../assets/animations/lottie/MotionCorpse-Jrcanest.json')}
                        style={{ justifyContent: "center", alignSelf: "center", height: "100%", width: "100%" }}
                        autoPlay={false}
                        loop={false}
                        speed={1}
                        ref={animation => { this.anim = animation; }} 
                    />
                </View>
            </View>
        )
    }
}

Another way is if you know exact frame numbers then you can play animation till that frame which completes at 3 seconds. It is already mentioned in Lottie documentation.

this.animation.play(30, 120);

Upvotes: 5

Related Questions