kandi background
Explore Kits

lottie-react-native | Lottie wrapper for React Native. | Animation library

 by   react-native-community Java Version: Current License: Apache-2.0

 by   react-native-community Java Version: Current License: Apache-2.0

Download this library from

kandi X-RAY | lottie-react-native Summary

lottie-react-native is a Java library typically used in User Interface, Animation, React Native, React applications. lottie-react-native has no bugs, it has no vulnerabilities, it has build file available, it has a Permissive License and it has medium support. You can install using 'npm i lottie-react-native' or download it from GitHub, npm.
Lottie wrapper for React Native.
Support
Support
Quality
Quality
Security
Security
License
License
Reuse
Reuse

kandi-support Support

  • lottie-react-native has a medium active ecosystem.
  • It has 13343 star(s) with 1426 fork(s). There are 259 watchers for this library.
  • It had no major release in the last 12 months.
  • There are 81 open issues and 423 have been closed. On average issues are closed in 178 days. There are 2 open pull requests and 0 closed requests.
  • It has a neutral sentiment in the developer community.
  • The latest version of lottie-react-native is current.
lottie-react-native Support
Best in #Animation
Average in #Animation
lottie-react-native Support
Best in #Animation
Average in #Animation

quality kandi Quality

  • lottie-react-native has no bugs reported.
lottie-react-native Quality
Best in #Animation
Average in #Animation
lottie-react-native Quality
Best in #Animation
Average in #Animation

securitySecurity

  • lottie-react-native has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
lottie-react-native Security
Best in #Animation
Average in #Animation
lottie-react-native Security
Best in #Animation
Average in #Animation

license License

  • lottie-react-native is licensed under the Apache-2.0 License. This license is Permissive.
  • Permissive licenses have the least restrictions, and you can use them in most projects.
lottie-react-native License
Best in #Animation
Average in #Animation
lottie-react-native License
Best in #Animation
Average in #Animation

buildReuse

  • lottie-react-native releases are not available. You will need to build from source code and install.
  • Deployable package is available in npm.
  • Build file is available. You can build the component from source.
  • Installation instructions are not available. Examples and code snippets are available.
lottie-react-native Reuse
Best in #Animation
Average in #Animation
lottie-react-native Reuse
Best in #Animation
Average in #Animation
Top functions reviewed by kandi - BETA

Coming Soon for all Libraries!

Currently covering the most popular Java, JavaScript and Python libraries. See a SAMPLE HERE.
kandi's functional review helps you automatically verify the functionalities of the libraries and avoid rework.

lottie-react-native Key Features

Lottie wrapper for React Native.

Installing (React Native >= 0.60.0)

copy iconCopydownload iconDownload
yarn add lottie-react-native
yarn add lottie-ios@3.1.8

Installing (React Native == 0.59.x)

copy iconCopydownload iconDownload
yarn add lottie-react-native@3.0.2
yarn add lottie-ios@3.0.3

Installing (React Native <= 0.58.x)

copy iconCopydownload iconDownload
yarn add lottie-react-native@2.5.11
yarn add lottie-ios@2.5.3

Usage

copy iconCopydownload iconDownload
import React from 'react';
import LottieView from 'lottie-react-native';

export default class BasicExample extends React.Component {
  render() {
    return <LottieView source={require('./animation.json')} autoPlay loop />;
  }
}

Why do I get Failed prop type: Invalid prop `onAnimationFinish` of type `object` supplied to `LottieView`, expected a `funtion`

copy iconCopydownload iconDownload
// onDone is your entire props object here.
function UploadScreen(onDone, progress = 0, visible = false) {
// add the curlies to extract specific props
function UploadScreen({onDone, progress = 0, visible = false}) {
-----------------------
// onDone is your entire props object here.
function UploadScreen(onDone, progress = 0, visible = false) {
// add the curlies to extract specific props
function UploadScreen({onDone, progress = 0, visible = false}) {
-----------------------
function UploadScreen({onDone, progress, visible}) {

this permision (android.permission.QUERY_ALL_PACKAGES) was automatically added to Manifest

copy iconCopydownload iconDownload
<uses-permission android:name="android.permission.QUERY_ALL_PACKAGES"
        tools:node="remove" tools:ignore="QueryAllPackagesPermission" />

React Native-Styling Tab Navigator

copy iconCopydownload iconDownload
  const screenOptions = {
    tabBarStyle:{
      backgroundColor:'#0000ff',
      height:100,
    },
    tabBarItemStyle:{
      backgroundColor:'#00ff00',
      margin:5,
      borderRadius:10,
    }
  };
  <Tab.Navigator {...{ screenOptions }}>
-----------------------
  const screenOptions = {
    tabBarStyle:{
      backgroundColor:'#0000ff',
      height:100,
    },
    tabBarItemStyle:{
      backgroundColor:'#00ff00',
      margin:5,
      borderRadius:10,
    }
  };
  <Tab.Navigator {...{ screenOptions }}>
-----------------------
<Tab.Navigator tabBar={props => <CustomTabBar {...props} />}>
  {...}
</Tab.Navigator>

How to play a Lottie animation only once in LottieView?

copy iconCopydownload iconDownload
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} />
    );
};

Gradle Sync failed: A problem occurred evaluating settings

copy iconCopydownload iconDownload
//apply from: new File(["node", "--print", "require.resolve('react-native-unimodules/package.json')"].execute().text.trim(), "../gradle.groovy"); includeUnimodulesProjects()
apply from: file("../node_modules/react-native-unimodules/gradle.groovy"); includeUnimodulesProjects()
apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
//apply from: new File(["node", "--print", "require.resolve('@react-native-community/cli-platform-android/package.json')"].execute().text.trim(), "../native_modules.gradle"); applyNativeModulesSettingsGradle(settings)

How to use Lottie Json file with arrow function in React-Native

copy iconCopydownload iconDownload
import React from 'react';
import LottieView from 'lottie-react-native';
    
const App = () => {
    
  return(
    <View style={{height: '100%', width: '100%'}}>
      <LottieView source={require('./lotties/rocket.json')} autoPlay loop />
    </View>
   );

}

export default App;
-----------------------
const App = () => {
  render(); {
    return(
      <LottieView source={require('./lotties/rocket.json')} autoPlay loop />
    );
  }
}
const App = () => {
    return(
      <LottieView source={require('./lotties/rocket.json')} autoPlay loop />
    );
}
-----------------------
const App = () => {
  render(); {
    return(
      <LottieView source={require('./lotties/rocket.json')} autoPlay loop />
    );
  }
}
const App = () => {
    return(
      <LottieView source={require('./lotties/rocket.json')} autoPlay loop />
    );
}

No podspec found for `react-native-image-picker` in `../node_modules/react-native-image-picker`

copy iconCopydownload iconDownload
  pod 'react-native-image-picker', :path => '../node_modules/react-native-image-picker'

TypeError: undefined is not an object (evaluating '_this.props.card = card') - React Native with EXPO

copy iconCopydownload iconDownload
  const cardFlip = useRef();
 
  return (
    <View style={styles.container}>
      <CardFlip style={styles.cardContainer} ref={cardFlip}>
        <TouchableOpacity style={styles.card} onPress={() => cardFlip.current.flip()}>
          <Image source={Front} style={styles.cardContainer}></Image>
        </TouchableOpacity>
        <TouchableOpacity style={styles.card} onPress={() => cardFlip.current.flip()}>
          <Image source={Back} style={styles.cardContainer}></Image>
        </TouchableOpacity>
      </CardFlip>

React Native FlatList makes app extremely slow after 10 elements

copy iconCopydownload iconDownload
useEffect(() => {
    getRecordedEventsTable(storageKey).then((res) => {
        setTimeArr(res)
    })

  }, [timeArr, timerOn])
-----------------------
  const [timerStateChanged, setTimerStateChanged] = useState(false);

  return (
    <View style={styles.container}>
      <Timer setTimerStateChanged={setTimerStateChanged} />
      <View
        style={{
          borderBottomColor: "grey",
          borderBottomWidth: 1,
        }}
      />
      <TimeTable timerOn={timerStateChanged} />
    </View>
  );
};

CocoaPods could not find compatible versions for pod &quot;React/Core&quot;

copy iconCopydownload iconDownload
s.dependency 'React/Core'
s.dependency 'React-Core'
-----------------------
s.dependency 'React/Core'
s.dependency 'React-Core'

Community Discussions

Trending Discussions on lottie-react-native
  • require cycle: src\components\Login\Login.tsx -&gt; src\components\Login\index.ts -&gt; src\components\Login\Login.tsx
  • Why do I get Failed prop type: Invalid prop `onAnimationFinish` of type `object` supplied to `LottieView`, expected a `funtion`
  • this permision (android.permission.QUERY_ALL_PACKAGES) was automatically added to Manifest
  • React Native-Styling Tab Navigator
  • How to play a Lottie animation only once in LottieView?
  • Gradle Sync failed: A problem occurred evaluating settings
  • How to use Lottie Json file with arrow function in React-Native
  • No podspec found for `react-native-image-picker` in `../node_modules/react-native-image-picker`
  • TypeError: undefined is not an object (evaluating '_this.props.card = card') - React Native with EXPO
  • CocoaPods could not find compatible versions for pod &quot;Firebase/Everything&quot;
Trending Discussions on lottie-react-native

QUESTION

require cycle: src\components\Login\Login.tsx -&gt; src\components\Login\index.ts -&gt; src\components\Login\Login.tsx

Asked 2022-Apr-03 at 15:35

What I am doing wrong and why I get the error message:

Require cycle: src\components\Login\Login.tsx -> src\components\Login\index.ts -> src\components\Login\Login.tsx

Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.

Login:

const Login = () => {
 ...
};

export default Login;

Styles:

export const s = StyleSheet.create({...})

Model.ts

interface ILogin {
 test: boolean;
}

index.ts

import Login from "./Login";
import { ILogin } from "./Model";
import { s } from './Style';

export {
  Login,
  ILogin,
  s
};

can anyone pls help me to solve this issue ?

€: my imports in login:

import React from 'react';
import { Text, View, Image, Dimensions } from 'react-native';
import { Button } from '../Button';
import { Input } from '../Input';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
import LottoView from 'lottie-react-native';
import Ionicons from '@expo/vector-icons/Ionicons';
import Feather from '@expo/vector-icons/Feather';
import { InputStyles } from '../Input';
import { ButtonStyles } from '../Button';
import { globalStyles } from '../../shared/GlobalStyles';
import { useTranslation } from 'react-i18next';
import { useNavigation } from '@react-navigation/native';
import { ILogin } from './Model';
import { s } from './Style';

ANSWER

Answered 2022-Apr-03 at 15:35

The cycle means your login.tsx imports something from index.tsx/./, which in turn imports your login.tsx again. Therefore your login.tsx kind of depends on itself and to resolve the cycle, you should replace the import … from './' through explicitly importing the desired file instead.

Source https://stackoverflow.com/questions/71726770

Community Discussions, Code Snippets contain sources that include Stack Exchange Network

Vulnerabilities

No vulnerabilities reported

Install lottie-react-native

You can install using 'npm i lottie-react-native' or download it from GitHub, npm.
You can use lottie-react-native like any standard Java library. Please include the the jar files in your classpath. You can also use any IDE and you can run and debug the lottie-react-native component as you would do with any other Java program. Best practice is to use a build tool that supports dependency management such as Maven or Gradle. For Maven installation, please refer maven.apache.org. For Gradle installation, please refer gradle.org .

Support

For any new features, suggestions and bugs create an issue on GitHub. If you have any questions check and ask questions on community page Stack Overflow .

DOWNLOAD this Library from

Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from
over 430 million Knowledge Items
Find more libraries
Reuse Solution Kits and Libraries Curated by Popular Use Cases

Save this library and start creating your kit

Share this Page

share link
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from
over 430 million Knowledge Items
Find more libraries
Reuse Solution Kits and Libraries Curated by Popular Use Cases

Save this library and start creating your kit

  • © 2022 Open Weaver Inc.