React Native ActivityIndicator not displaying

user_1045043 0
Viewed 16837

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?

activity-indicator react-native android
6 Answers

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

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

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

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

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

user_14073780

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.

user_86783150
Related