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?

Solution 1

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

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

Solution 2

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

Solution 3

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

Solution 4

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';
}

Solution 5

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

View more solutions

Comments

[Kolyunya]

That is absolutely ridiculous, this property does not have a default value...

[srayner]

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.