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?
Be sure to give the ActivityIndicator
a color. For example:
<ActivityIndicator size="large" color="#0000ff" />