CODEWITHSUNDEEP
react-nativereact-native-iosreact-native-animatable
Raghusingh
Raghusingh

Reputation: 418

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

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.

Upvotes: 1

Views: 774

Answers (3)

Rishav Kumar
Rishav Kumar

Reputation: 5450

<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>

Upvotes: 1

Nishant Patel
Nishant Patel

Reputation: 1406

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

Upvotes: 1

Jaydeep Patel
Jaydeep Patel

Reputation: 313

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

Upvotes: 2

Related Questions