0

I am having this react-native-paper button:

      <Button
        disabled={loading}
        icon="refresh"
        mode="contained"
        onPress={this.refreshData.bind(this)}
      >
        Refresh
      </Button>

How can I make the icon spin when loading=true?

Dimitri Kopriwa
  • 13,139
  • 27
  • 98
  • 204

1 Answers1

3

for the spinning icon do this.

declare one variable refreshing any boolean value when data refresh value set to be true and icon spinning start.

      <Button
        loading={loading}
        disabled={loading}
        icon="refresh"
        mode="contained"
        onPress={this.refreshData.bind(this)}
      >
        Refresh
      </Button>

react-native-paper button have props like.. loading it's simply spinning icon

here snack link

rajan tank
  • 217
  • 1
  • 3
  • Using `loading` prop I am not able to use the refresh icon. Using the refresh icon I am not able to sping. This example is exactly what I have posted, except you use two variables instead of one. – Dimitri Kopriwa Feb 18 '20 at 11:32
  • can you just check update code you control both disabled and loading by only one variable and please check working example visit snack link – rajan tank Feb 18 '20 at 12:08
  • yes it work. the issue is just to use a different icon than the default spinner and to make the new icon rotate. For instance, how can I make the icon named `refresh` rotate ? – Dimitri Kopriwa Feb 18 '20 at 13:40
  • At first, I downvoted but after reading the comments I upvoted. this works. thanks @rajantank – Angel S. Moreno Jun 26 '23 at 04:39