React Native support

[naffiq]

Any plans on creating component for react-native?

[mironov]

@naffiq Sorry, I'm not using react-native in my projects and can't allocate time to make the component react-native-ready. PRs are very welcome!

Most of the logic will be the same. We need to rewrite part of the code responsible for building style of the loading bar and the rendering itself.

[duranmla]

I was starting to do this but playing around in my local in a sort of monkey patching process, nevertheless, as I was just playing when I try to commit my solution in a fork I couldn't make it work. Adding the following snippet to the package loading_bar should work:

render() {
    if (this.props.reactNative) {
      const RNComponents = require('react-native')
      const { status, percent } = this.state

      return status === 'hidden' ? (
        <RNComponents.View />
      ) : (
        <RNComponents.ProgressBarAndroid
          styleAttr="Horizontal"
          indeterminate={false}
          progress={percent / 100}
        />
      )
    }

    if (this.state.status === 'hidden') {
      return <div />
    }

    return (
      <div>
        <div style={this.buildStyle()} className={this.props.className} />
        <div style={{ display: 'table', clear: 'both' }} />
      </div>
    )
  }

But currently in my application the state is not being updated so the progress bar is not being shown, the middleware is in place and the reducer too, the actions are being called but I not sure why the state is not being updated, not sure what happen there.

[cullsin]

Hello,

Thanks for the awesome plugin. I would like to do to React Native. As you correctly mentioned, Only the view part needs to be updated. I am willing to take it forward to this plugin. Can you please guide me.

Raja K

[mironov]

@cullsin I think what you can do here is to import LoadingBar and extend it with react-native specific code for render. I haven't tried that but I think the following would work:

import LoadingBar from 'react-redux-loading-bar'

class LoadingBarNative extends LoadingBar {
  render() {
    const { status } = this.state
    const { direction, className } = this.props
    if (status === 'hidden') {
      return <View />
    }

    return (
      <View  style={{ ... }} />
    )
  }
}

One step forward would be to extract the current logic into a separate base class and then have LoadingBarDom and LoadingBarNative extending that base class.