FIX: Animations woulndt autoPlay

screen/lnd/lnurlAuth.js

@@ -11,8 +11,8 @@ import loc from '../../loc';
 import { BlueStorageContext } from '../../blue_modules/storage-context';
 import { useNavigation, useRoute, useTheme } from '@react-navigation/native';
 import selectWallet from '../../helpers/select-wallet';
-import LottieView from 'lottie-react-native';
 import url from 'url';
+import { SuccessView } from '../send/success';
 
 const AuthState = {
   USER_PROMPT: 0,
@@ -105,7 +105,7 @@ const LnurlAuth = () => {
       {authState === AuthState.SUCCESS && (
         <BlueCard>
           <View style={styles.iconContainer}>
-            <LottieView style={styles.icon} source={require('../../img/bluenice.json')} autoPlay loop={false} />
+            <SuccessView />
           </View>
           <BlueSpacing20 />
           <BlueText style={styles.alignSelfCenter}>
@@ -157,10 +157,6 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
-  icon: {
-    width: 400,
-    height: 400,
-  },
   walletSelectRoot: {
     alignItems: 'center',
     justifyContent: 'flex-end',

screen/lnd/lnurlPaySuccess.js

@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import LottieView from 'lottie-react-native';
 import { View, Text, Linking, StyleSheet, Image, ScrollView } from 'react-native';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { Icon } from 'react-native-elements';
@@ -9,6 +8,7 @@ import { BlueButton, BlueButtonLink, BlueCard, BlueLoading, BlueSpacing20, BlueT
 import navigationStyle from '../../components/navigationStyle';
 import Lnurl from '../../class/lnurl';
 import loc from '../../loc';
+import { SuccessView } from '../send/success';
 
 export default class LnurlPaySuccess extends Component {
   constructor(props) {
@@ -77,7 +77,7 @@ export default class LnurlPaySuccess extends Component {
         <ScrollView>
           {justPaid ? (
             <View style={styles.iconContainer}>
-              <LottieView style={styles.icon} source={require('../../img/bluenice.json')} autoPlay loop={false} />
+              <SuccessView />
             </View>
           ) : (
             <View style={styles.iconContainer}>
@@ -177,10 +177,6 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
-  icon: {
-    width: 400,
-    height: 400,
-  },
   successContainer: {
     marginTop: 10,
   },

screen/receive/details.js

@@ -11,7 +11,6 @@ import {
   TextInput,
   View,
 } from 'react-native';
-import LottieView from 'lottie-react-native';
 import { useNavigation, useRoute, useTheme, useFocusEffect } from '@react-navigation/native';
 import Share from 'react-native-share';
 
@@ -39,6 +38,7 @@ import Notifications from '../../blue_modules/notifications';
 import ReactNativeHapticFeedback from 'react-native-haptic-feedback';
 import { TransactionPendingIconBig } from '../../components/TransactionPendingIconBig';
 import * as BlueElectrum from '../../blue_modules/BlueElectrum';
+import { SuccessView } from '../send/success';
 const currency = require('../../blue_modules/currency');
 
 const ReceiveDetails = () => {
@@ -202,7 +202,7 @@ const ReceiveDetails = () => {
               </BlueText>
             </>
           )}
-          <LottieView style={styles.icon} source={require('../../img/bluenice.json')} autoPlay loop={false} />
+          <SuccessView />
           <BlueText style={[styles.label, stylesHook.label]} numberOfLines={1}>
             {displayBalance}
           </BlueText>
@@ -539,10 +539,6 @@ const styles = StyleSheet.create({
     marginHorizontal: 8,
     minHeight: 33,
   },
-  icon: {
-    width: 400,
-    height: 400,
-  },
 });
 
 ReceiveDetails.navigationOptions = navigationStyle(

screen/send/success.js

@@ -65,12 +65,17 @@ export const SuccessView = ({ amount, amountUnit, fee, invoiceDescription, shoul
   });
 
   useEffect(() => {
-    if (shouldAnimate) {
-      animationRef.current.reset();
-      animationRef.current.resume();
+    if (shouldAnimate && animationRef.current) {
+      /*
+      https://github.com/lottie-react-native/lottie-react-native/issues/832#issuecomment-1008209732
+      Temporary workaround until Lottie is fixed.
+      */
+      setTimeout(() => {
+        animationRef.current?.reset();
+        animationRef.current?.play();
+      }, 50);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [colors]);
+  }, [colors, shouldAnimate]);
 
   return (
     <View style={styles.root}>

screen/wallets/addMultisig.js

@@ -50,6 +50,19 @@ const WalletsAddMultisig = () => {
     },
   });
 
+  useEffect(() => {
+    if (loadingAnimation.current) {
+      /*
+      https://github.com/lottie-react-native/lottie-react-native/issues/832#issuecomment-1008209732
+      Temporary workaround until Lottie is fixed.
+      */
+      setTimeout(() => {
+        loadingAnimation.current?.reset();
+        loadingAnimation.current?.play();
+      }, 100);
+    }
+  }, []);
+
   useEffect(() => {
     isAdancedModeEnabled().then(setIsAdvancedModeEnabledRender);
     // eslint-disable-next-line react-hooks/exhaustive-deps