lottie-loader-react-native

lottie-loader-react-native

A React Native Loader Component which uses Airbnb's Lottie to render smooth and beautiful loading animations, without blocking the entire view.

     

Installation

npm i lottie-loader-react-native lottie-react-native

or

yarn add lottie-loader-react-native lottie-react-native

React Native CLI

If you're using React Native CLI you will need to link lottie-react-native to your package. Click here for more information.

Expo

If you're using expo no extra step is required.

Usage

import React from "react";
import { StyleSheet, StyleProp, ViewStyle } from "react-native";
import { LottieLoader } from "lottie-loader-react-native";

interface LoadingProps {
  visible: boolean;
  animationStyle?: StyleProp<ViewStyle>;
}

export const Loading: React.FC<LoadingProps> = ({
  visible,
  animationStyle,
}) => {
  return (
    <LottieLoader
      visible={visible}
      source={require("./loader.json")}
      animationStyle={animationStyle}
      speed={1}
    />
  );
};

const styles = StyleSheet.create({
  lottie: { width: 100, height: 100 },
});

Lottie Loader files

You can find free lottie files for your loaders here.

Props

Prop	Description	Default
source	The source of animation. Can be referenced as a local asset by a string, or remotely with an object with a uri property, or it can be an actual JS object of an animation, obtained (for example) with something like require('../path/to/animation.json').	Lottie Object
visible	Controls the visibility of the loader.	false
style	The style to be applied to the Lottie.	-
speed	The speed the animation will progress.	1
loop	A boolean flag indicating whether or not the animation should loop.	true

License

Licensed under the MIT.