javascript - Is there any chance to use a component as a global ActivityIndicator on React-Native

Question

Is there any chance to use a component as a global ActivityIndicator which has transparent color and had been created by me on React-Native?

Details:

• I use a redux store to update the UI. So I intend to show an ActivityIndicator by updating the store.
• I've created an ActivityIndicator component with name ActIndicator.
• I have a main App component that contains the app.
• I have a Root component that wraps the ActIndicator and App components.

The ultimate code of render method of Root component looks like the following:

render() {

    if (this.state.showActivityIndicator) {
        return(
            <ActIndicator>
                <App />
            </ActIndicator>
        )
    }

    return (</App>)

}

I've tried several methods but I can not be successful.

I guess my brain is stopped.

I also guess there may be a logic mistake.

Answer 1

I don't think you're supposed to pass App as a child, the way I use it is more like this:

render() {

if (this.state.showActivityIndicator) {
    return(
      <View>
        <ActivityIndicator />
        <App />
      </View>
    )
}

return (<App />)

}

but it would probably be better to set it up like this:

render() {
  return (
    <View>
      <ActivityIndicator animating={this.state.showActivityIndicator} />
      <App />
    </View>
  )
}

Answer 2

const withLoadingOverlay = (Component) => class withLoadingOverlayView extends React.Component {   props: withLoadingOverlayProps

    // Indicator view styles   loadingOverlay = (style) => (
        <View style={[style, styles.someDefaultStyles]}>
          <ActivityIndicator color={someColor} size="large" />
        </View>   )

      render() {
        const { pending, ...passProps } = this.props;
        const { width, height } = Dimensions.get('window');
        return (
          <View style={{ flex: 1 }}>
            <Component {...passProps} />
            {pending && this.loadingOverlay({ width, height })}
          </View>
        );   } };

I used to wrap whole container with HOC and with redux action to set on start pending prop true and on success or fail to set on false so this prop will be consumed by HOC and indicator will be displayed only when pending is set on true.

In container you have to wrap component in connect

export default connect(
  (state) => ({ 
    pending: state.reducer.pending, // pending prop should be here
  }),
  (dispatch) => ({ dispatching redux actions })
)(withLoadingOverlay(WrappedComponent));