React Native ActivityIndicator not displaying

Question

Packages that am using:

"@react-native-community/datetimepicker": "^2.6.0",
"@react-native-community/masked-view": "^0.1.10",
"@react-native-firebase/app": "^8.2.0",
"@react-native-firebase/auth": "^8.2.0",
"@react-navigation/drawer": "^5.8.5",
"@react-navigation/native": "^5.7.0",
"@react-navigation/stack": "^5.7.0",
"date-fns": "^2.14.0",
"react": "16.13.1",
"react-native": "0.63.0",
"react-native-gesture-handler": "^1.6.1",
"react-native-razorpay": "^2.1.35",
"react-native-reanimated": "^1.9.0",
"react-native-safe-area-context": "^3.1.1",
"react-native-screens": "^2.9.0",
"react-native-vector-icons": "^7.0.0"

And my ActivityIndicator is placed inside a screen component like this:

import React from 'react'
import { View, Text, ActivityIndicator, StyleSheet, Image } from 'react-native'
   

export default function Loading({navigation}) {
       
    return (
        <View style={styles.container}>
            <Image
                style={styles.main_logo}
                source={require('../assets/logo.png')}
            />
            <Text style={styles.loading_text}>...Loading...</Text>
            <ActivityIndicator animating={true} size="large" style={{opacity:1}}  />
            
        </View>
    )
    
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'red'
  },

  main_logo : {
    width: 100,
    height: 53,
    marginBottom: 20
  },

  loading_text : {
      color: 'white'
  },

  
})

The problem is, it doesn't show the ActivityIndicator. Everything else is appearing. Tested both in real mobile device (Redmi Note 7 Pro) and Android Emulator. Seems to be transparent.

Any fix for this?

@Dan Only the ActivityIndicator is not appearing. Everything else is appearing as expected. — Vpp Man, Jul 17 '20 at 19:15
@D10S no luck. I actually added it without any parameters and since it was not appearing, I googled and found I have to pass the `animating` explicitly. That's why I tried that parameter too. But no luck — Vpp Man, Jul 17 '20 at 19:18
no need to pass animation as it is default (exactly like 'opactiy:1'). Try to remove the text and image check if still nothing. — D10S, Jul 17 '20 at 19:20
@D10S When I removed the image and text, the screen is empty. Just the background color. — Vpp Man, Jul 17 '20 at 19:24
Sorry but it's out of my knowledge spectrum. Good luck Vpp man. — D10S, Jul 17 '20 at 19:31

score 118 · Answer 1 · answered Jul 17 '20 at 20:17

118

Be sure to give the ActivityIndicator a color. For example:

<ActivityIndicator size="large" color="#0000ff" />

answered Jul 17 '20 at 20:17

5eb

14,798
5
21
65

44

That is absolutely ridiculous, this property does not have a default value... – Kolyunya Dec 18 '20 at 09:02
1

I believe it defaults to grey. I guess it could just be bad luck if you are trying to display it on a grey background like I just did. Still, I think the docs should include the color prop in the example. – srayner Feb 16 '22 at 13:51

score 30 · Answer 2 · answered Oct 17 '20 at 13:40

30

On react-native 0.63.3 exist bug, on android without color prop Default color for ActivityIndicator on Android #30057

answered Oct 17 '20 at 13:40

Vasyl Nahuliak

1,912
2
14
32

score 8 · Answer 3 · answered Jan 20 '21 at 11:10

From React Native version 0.63 onwards there is an Android specific bug(https://github.com/facebook/react-native/pull/30057/files) with ActivityIndicator component which is causing the default color of ActivityIndicator to be null and so the component won’t be displayed on the screen. But in IOS platform GREY is passed as the default color and it works fine there.

So for Android, currently we have to explicitly add the color to the ActivityIndicator using the color property(https://reactnative.dev/docs/activityindicator#color) as below. Also if you want to keep your app consistent across platforms this property will ensure that the same color is displayed for the ActivityIndicator in both Android & IOS platforms.

<ActivityIndicator animating={true} size="large" style={{opacity:1}} color="#999999" />

score 6 · Answer 4 · answered Jan 20 '21 at 15:37

My workaround to force default color value for Android somewhere in your root component. Like

import { ActivityIndicator, Platform } from "react-native";

// fix https://github.com/facebook/react-native/issues/30056
if (Platform.OS === 'android') {  
  if (!ActivityIndicator.defaultProps) ActivityIndicator.defaultProps = {};
  ActivityIndicator.defaultProps.color =  'gray';
}

score 2 · Answer 5 · answered Jul 17 '20 at 20:24

try this component

import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Modal,
    ActivityIndicator
} from 'react-native';

const Loader = props => {
    const {
        loading,
        ...attributes
    } = props;

    return (
        <Modal
            transparent={true}
            animationType={'none'}
            visible={loading}
            onRequestClose={() => {console.log('close modal')}}>
            <View style={styles.modalBackground}>
                <View style={styles.activityIndicatorWrapper}>
                    <ActivityIndicator
                        animating={loading} />
                </View>
            </View>
        </Modal>
    )
}

const styles = StyleSheet.create({
    modalBackground: {
        flex: 1,
        alignItems: 'center',
        flexDirection: 'column',
        justifyContent: 'space-around',
        backgroundColor: '#00000040'
    },
    activityIndicatorWrapper: {
        backgroundColor: '#FFFFFF',
        height: 100,
        width: 100,
        borderRadius: 10,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-around'
    }
});

export default Loader;

and call this component like this

<Loader loading={this.state.isLoading} />

this.state.isLoading could be either true or false

score 1 · Answer 6 · answered Mar 12 '21 at 18:22

I had a similar issue (rendering the ActivityIndicator inside a modal) that wasn't resolved with setting the colour prop. However the ActivityIndicator component provided by react-native-paper worked as expected, follow the getting started instuction and then just drop it in place of the standard react-native one. See: https://callstack.github.io/react-native-paper/activity-indicator.html.

React Native ActivityIndicator not displaying

6 Answers6