lottie-loader-react-native v1.1.0

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

License

Licensed under the MIT.