ActivityIndicator not spinning or animated only static image on Android

Question

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>

Teamwork

tried adding flex: 1 to your view? – Alimony

I added flex:1, but still the same !!! – Teamwork

its visible but not spinning, I added a image to this question too, – Teamwork

After sending a edit suggestion I saw an image linked! My bad – Yean

Answer 1

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

Uncertain

This comment was extremely helpful. I tried a bunch of different solutions. None of them worked until I turned on animations in the developer options! – Alienage

Lol, now that you mentioned it... I have the same settings. – Uniseptate

The question is, who did it? The answer is Google. They never fail to disappoint us, do they? :D – Oldworld

Answer 2

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

Yean

check the live demo you need to import some packages – Yean

And @WathsalaDeSilva try running my live demo on you hardware device, If that works than you are doing some mistake in you script. – Yean

import { View, ActivityIndicator, StyleSheet } from 'react-native'; you need to add the StyleSheet – Yean

I already added those packages but not animating the indicator on android – Teamwork

This means you are going wrong somewhere else my solution should fix the issue! – Yean

Answer 3

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.

Leavening

Answer 4

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.

Easterly

Answer 5

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.

Alimony

in my code it has "=" mark , I messed up copying that code, my bad!!! I added "=" mark and that is not the issue, – Teamwork