CODEWITHSUNDEEP
androidreact-nativeactivity-indicator
Wathsala De Silva
Wathsala De Silva

Reputation: 153

ActivityIndicator not spinning or animated only static image on Android

Activity Indicator in react native working fine on IOS but its not spinning or animating on android, any help ??? 

<View style{{marginLeft:0,width:60,height:60,borderRadius: 30,justifyContent:"center",alignItems:"center", backgroundColor:'#eee', borderColor:"#fff", borderWidth:1 }}>
    <ActivityIndicator size="small" animating={true}/>
</View>

enter image description here

Upvotes: 5

Views: 3093

Answers (5)

Mahmoud Abd Al-Aziz
Mahmoud Abd Al-Aziz

Reputation: 109

The solution with steps:

Go to the Developer options in the settings

Steps:

1- Settings

2- System

3- Developer Options [if not available search on how to activate developer options/developer mode in your Android phone]

4- In the Developer Options page, Search for(Scroll to) Drawing Section

5- Activate

  • Window Animation Scale.
  • Transition Animation Scale.
  • Animator Duration Scale.

[For me I choose Animation scale 0.5x in the three options]

Now, go back to the expo app and reload.

Upvotes: 0

Leo Heinsaar
Leo Heinsaar

Reputation: 4057

You may need to enable the animations if they are turned off on your emulator or real device.

On Android devices (including emulators), you can enable them as follows:

  1. Go to the Settings
  2. Scroll down and tap on About phone or About device
  3. Tap Build number multiple times (usually at least five) until it says Developer mode enabled
  4. Go back to Settings, where you should now see Developer options, tap it
  5. Scroll down to the Drawing section
  6. There, tap each of the following:
  • Window animation scale
  • Transition animation scale
  • Animator duration scale

and set animations to a desired speed. By default, these options are set to 1x, which means that animations will be played at their normal speed. If for any reason you need speeds slower or faster, choose one of the values smaller or greater than 1x.

Upvotes: 0

jonArzelus
jonArzelus

Reputation: 156

I faced this issue too and the cause is that I had the animations disabled (scaled to x0) in developer options. If you change this configuration (animation scale) or disable developer options it should fix your issue. Hope it helps

Upvotes: 14

Rajendran Nadar
Rajendran Nadar

Reputation: 5438

Check this out

<View
    style={[
       StyleSheet.absoluteFill, {
          backgroundColor: 'rgba(0,0,0,0.4)',
          alignItems: 'center',
          justifyContent: 'center',
          zIndex: 99,
       },
    ]}>
    <ActivityIndicator color="#fff" />
 </View>

Still facing any issue?? check the live demo

https://snack.expo.io/@raajnadar/activityindicator-demo

Upvotes: 0

Sarmad Shah
Sarmad Shah

Reputation: 3805

I implemented the same code in my react native project...worked for me

<View style={{ marginLeft:0, width:60,height:60,borderRadius: 30,justifyContent:"center",alignItems:"center", backgroundColor:'#eee', borderColor:"#fff", borderWidth:1 }}>
    <ActivityIndicator size="small" animating />
  </View>

By the way you forgot = sign after style (First line), my guess is this problem is not due to this view, maybe some parent component.

Upvotes: -1

Related Questions