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?

Answer 1

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

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