How can i display animation on Button when screen is loading in react-native?

Question

How can i display animation on Button when screen is loading in react-native ?

I want to apply animation on Button and display it's effect when it is loading in screen.so please help me.How i can achieve this functionality in react-native.

Answer 1

Use this spinner button library and change your flag according to the api response.

Answer 2

Using react-native-animatable and react-native-button you can achieve the animation on a button , One of the simple expression is as below

<View style={styles.container}>
     <Button onPress={this.onPress}>
          <Animatable.Text 
               animation="pulse"
               easing="ease-out" 
               iterationCount="infinite" 
               style={{ textAlign: 'center', fontSize: 100 }}>
                  OK
         </Animatable.Text>
      </Button>
 </View>

You can set state of isLoading and set iterationCount to 0 when the loading completes

Answer 3

<View style={styles.container}>
     <Button onPress={this.onPress}>
{this.state.isLoading ? 
<React.Fragment>
          <Text style={{ textAlign: 'center', fontSize: 100 }}>
                  Loading ...
         </Text>


<ActivityIndicator/>

</React.Fragment> : <Text>Press me <Text>
      </Button>
 </View>