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?

Itinerancy

You'll have to show more than that – Belgae

@D10S, I have edited. Please check – Itinerancy

"It doesn't show anything" - do you see the <Text> component? – Lianneliao

@Lianneliao Only the ActivityIndicator is not appearing. Everything else is appearing as expected. – Itinerancy

Try to change it to <ActivityIndicator size="large" /> – Belgae

@Belgae 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 – Itinerancy

no need to pass animation as it is default (exactly like 'opactiy:1'). Try to remove the text and image check if still nothing. – Belgae

@Belgae When I removed the image and text, the screen is empty. Just the background color. – Itinerancy

Sorry but it's out of my knowledge spectrum. Good luck Vpp man. – Belgae

Answer 1

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

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

Colchicum

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

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. – Rosiorosita

Answer 2

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

Herson

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

Conflagrant

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

Cassatt

Answer 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

Diannadianne

Answer 6

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.

Voigt

Answer 7

I had the same issue on Android. Solved like this: I centered the ActivityIndicator in a View. Before it was on top left corner and not shown. Here is the code:` <View

        style={{
            flex: 1,
            opacity: 1,
            backgroundColor: "wheat",
            alignItems: "center",
            justifyContent: "center",
        }}>
        <ActivityIndicator
            animating={true}
            size='large'
            style={{ opacity: 1 }}
            color='brown'
        />
    </View>`

Disdainful