ReactNative ActivityIndicator not showing when animating property initiate false

Question

I\'m playing with react native and got a strange behaviour.

When I try to show a ActitvityIndicator for Android setting its animating property

Answer 1

In my case, for react native version 0.59.10 , the size property type is different for Android and iOS, so for that I had to make a Platform check as following and it worked.

<ActivityIndicator 
                size={Platform.OS === "ios" ? 0 : "large"} //This platform check worked.
                color={props.color} 
                animating={props.animating}
                style={props.style}
                />

Answer 2

I tried a different approach which I think that it is a more "react way" to solve problems. So, the problems with the opacity solution is that If you just set it to 0, it still will be a animation, so it is not the best solution thinking in your app performance.

I created a separated component that I called <Loading/>, here is the code:

import { ActivityIndicator } from "react-native"
import React from "react"
import PropTypes from "prop-types"

const Loading = (props) =>
    props.animating
        ? <ActivityIndicator style={props.style} 
               importantForAccessibility='auto' size={props.size} 
                     color={props.size} /> : null

Loading.propTypes = {
    animating: PropTypes.bool.isRequired,
    style: PropTypes.oneOfType([PropTypes.style, PropTypes.object]),
}

export default Loading

Usage:

<Loading animating={true} importantForAccessibility='auto' size="large" color="#A02BFF" style={styles.loading} />

That way it will avoid to create a animation when it is not a necessity, you will create separated component that can be removed easily at the point that the ActivityIndicator issue becomes solved in the future by replacing it to the original ActivityIndicator native component.

Answer 3

If in your project you can use third party components, I recommend the use of react-native-loading-spinner-overlay

Solved easily our problems, beacause this component use a similar way to show or hide the Activity with the property visible.

Answer 4

The transition of animating from false to true is too slow on Android. But you can force a re-render using the key prop:

<ActivityIndicator
  key={`${props.animating}`}
  animating={props.animating}
/>

When props.animating changes from false to true, they key also changes. This forces a re-render, meaning that a new component is rendered with animating = true, which will instantly start your spinner.