(Bug) 2764 native checkmark animation not working (#2771)

* fix: spinner checkmark animation for native * update: fix PR comments
GoodDollar · Dec 2, 2020 · aa864d3 · aa864d3
1 parent c316235
commit aa864d3
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 5 deletions.
diff --git a/src/components/common/animations/SpinnerCheckMark/SpinnerCheckMark.js b/src/components/common/animations/SpinnerCheckMark/SpinnerCheckMark.js
@@ -1,4 +1,5 @@
 import React from 'react'
+import { Platform } from 'react-native'
 import Lottie from 'lottie-react-native'
 import { View } from 'react-native-animatable'
 import AnimationBase from '../Base'
@@ -78,7 +79,8 @@ class SpinnerCheckMark extends AnimationBase {
   }
 
   render() {
-    const { height = 196, width = 196, marginTop } = this.props
+    const { width = 196, height, marginTop } = this.props
+    const _height = height !== undefined ? height : Platform.select({ web: 'auto', default: width })
     return (
       <View>
         <Lottie
@@ -88,9 +90,9 @@ class SpinnerCheckMark extends AnimationBase {
           source={this.improveAnimationData(animationData)}
           speed={this.state.speed}
           style={{
-            marginTop: marginTop !== undefined ? marginTop : -height / (isMobileNative ? 6 : 2.4),
             width,
-            height,
+            height: _height,
+            marginTop: marginTop !== undefined ? marginTop : -_height / (isMobileNative ? 6 : 2.4),
           }}
         />
       </View>

diff --git a/src/components/common/form/PhoneNumberInput/PhoneNumberInput.native.js b/src/components/common/form/PhoneNumberInput/PhoneNumberInput.native.js
@@ -88,7 +88,7 @@ export default ({
     countryCode = `+${phoneInputRef.current.getCountryCode()}`
   }
 
-  if (!isUserTypingCountry) {
+  if (!isUserTypingCountry && value) {
     phoneNumber = value.replace(countryCode, '')
   }
 

diff --git a/src/components/dashboard/Claim.js b/src/components/dashboard/Claim.js
@@ -50,7 +50,12 @@ const log = logger.child({ from: 'Claim' })
 
 const LoadingAnimation = ({ success, speed = 3 }) => (
   <View style={{ alignItems: 'center' }}>
-    <SpinnerCheckMark successSpeed={speed} success={success} width={175} height={'auto'} />
+    <SpinnerCheckMark
+      successSpeed={speed}
+      success={success}
+      width={145}
+      marginTop={Platform.select({ web: undefined, default: 5 })}
+    />
   </View>
 )