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.

score 0 · Answer 1 · answered Jan 09 '17 at 18:29

0

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>
  )
}

answered Jan 09 '17 at 18:29

Matt Aft

8,742
3
24
37

Thank you @MattAft . I would try your code tomorrow. Writing the all code would be too long lines. I want an answer like yours! Actually I had tried this way but I must have done something wrong! After I tried this way I can accept the answer. – efkan Jan 09 '17 at 18:38
@efkan ok sounds good, let me know if you have anymore questions or issues when you try it out tomorrow! – Matt Aft Jan 09 '17 at 18:46
I have to accept Wojtek's answer because of its details. Actually your solution and Wojtek's solution similar. – efkan Jan 11 '17 at 05:33

Wojtek Szafraniec · Accepted Answer · 2017-01-10T10:15:29.343

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));

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

2 Answers2

Linked