I have a lottiefile attached in this post, which I'm trying to render in my RN app. Issue
Animation of the lottiefile looks different in android device than it should. Moreover, the animation works perfectly in iOS emulator. Type of app
React Native CLI. Screenshots
 Lottiefile URL
https://lottiefiles.com/109043-spinning-wheel React Native code import React, { useRef, useState } from 'react';import type {Node} from 'react';import { SafeAreaView, useColorScheme, Button, Animated,} from 'react-native';import LottieView from 'lottie-react-native';import { Colors,} from 'react-native/Libraries/NewAppScreen';import { GestureHandlerRootView } from 'react-native-gesture-handler';const App: () => Node = () => { const isDarkMode = useColorScheme() === 'dark'; const inputEl = useRef(new Animated.Value(0)).current; const [progress, setProgress] = useState(0) const backgroundStyle = { backgroundColor: isDarkMode ? Colors.darker : Colors.lighter, }; const handlePress = () => { Animated.timing(inputEl, { toValue: progress, duration: 1000, useNativeDriver: true }).start() setProgress(progress === 0 ? Math.random() : 0) } return ( <GestureHandlerRootView style={{ flex: 1 }}> <SafeAreaView style={backgroundStyle}> <LottieView source={require('./wheel1.json')} progress={inputEl} style={{ width: '100%' }} resizeMode='cover' /> <Button onPress={() => handlePress()} title={'Start'}> start </Button> </SafeAreaView> </GestureHandlerRootView> );};export default App;
Package.json { "name": "awesomeproject", "version": "0.0.1", "private": true, "scripts": { "android": "react-native run-android", "ios": "react-native run-ios", "start": "react-native start", "test": "jest", "lint": "eslint ." }, "dependencies": { "lottie-ios": "^3.2.3", "lottie-react-native": "^4.1.3", "react": "17.0.1", "react-native": "0.64.1", "react-native-config": "^1.4.5", "react-native-gesture-handler": "^2.4.2", "react-native-reanimated": "^2.8.0" }, "devDependencies": { "@babel/core": "^7.12.9", "@babel/runtime": "^7.12.5", "@react-native-community/eslint-config": "^2.0.0", "babel-jest": "^26.6.3", "eslint": "7.14.0", "jest": "^26.6.3", "metro-react-native-babel-preset": "^0.64.0", "react-test-renderer": "17.0.1" }, "jest": { "preset": "react-native" }}
|
