React Native Progress View iOS 不重新渲染

Question

I am building an app in React Native & REDUX. I am using the Progress View iOS in React Native to show a very simple native looking progress bar. Here is the code:

renderProgressBar() {
    if(!!Platform.OS) {
        switch(Platform.OS) {
            case 'ios':
                return (
                    <ProgressViewIOS
                        progress={(this.props.backgroundData.percentageLoaded || 0)}
                        progressTintColor={globalProgressBarTintColor}
                        trackTintColor={globalProgressBarEmptyTrackTintColor} />
                );

            case 'android':
                return (
                    <ProgressBarAndroid
                        color={globalProgressBarTintColor}
                        progress={(this.props.backgroundData.percentageLoaded || 0)} />
                );

            default:
                return null;
        }

    } else {
        return null;
    }
}

I have paused the app in it's REDUX container as well as in this render method of the view itself and I am 100% positive that all of the progress values are making it in fine. They show up from the reducer in my container being passed into the view. They show up in all render methods as well. They are 0, 0.2, 0.4, 0.666666601, 0.8 and 1.

So what I am saying is that this.props.backgroundData.percentageLoaded will equal these values I have just mentioned. I can pause it and see that the value is certainly there and it is a Number not a string so all should be well. For some reason, even though it renders 5 times, nothing shows up.

It is not behind something else (speaking UI stack wise), because I have set the progress value to 1 and set the colours to red and blue in the bar and it shows up fine. If I keep those crazy red/blue colours and set the progress to all those values I mentioned above they all work individually (hardcoded not the dynamic prop value).

In case anyone wants to know the only React Native lifecycle method I am using is the render and it looks like this:

render() {
    this.titleWidth = this.props.deviceWidth / 2;

    return (
        <View>
            <View style={[
                            styles.navbar,
                            {
                                width: this.props.deviceWidth,
                                justifyContent: (this.props.showBackIcon === false && this.props.showingTitle === false) ? 'flex-end' : 'space-between',
                            }
                        ]}>

                { this.props.showBackIcon ? this.renderBackButton() : null }

                { this.props.showingTitle ? this.renderTitle() : null }

                { this.props.showingIcon ? this.renderRightIconButton() : null }

                { this.props.showingTextButton ? this.renderRightTextButton() : null }

            </View>

            { this.renderProgressBar() }
        </View>
    );  
}

I am stumped. Thoughts anyone? Thanks.

Edit: Also, incase it helps, here is the container code being sent in as props:

const mapStateToProps = (state, props) => {
    return {
        ...safelyBuildPassProps(state.navigation.route.passProps),
        deviceHeight: state.appSettings.deviceOrientation.currDeviceHeight,
        deviceWidth: state.appSettings.deviceOrientation.currDeviceWidth,
        backgroundData: {
            loadingData: state.appSettings.loadingBackgroundData,
            percentageLoaded: state.appSettings.loadingBackgroundDataPercent,
        },
    }
}

Second Edit

I should explain more that this is all based on ASync calls and transformations. All of the processes happen in the client (device) and the processes are these:

• Make call to backend with fetch
• Get response object with success status and send to modelling service
• Modelling service (which is a local ASync function) cleans response object and translates into proper UI results with colours and whatnot
• Once iterating over the array of response objects, divide 100 by length of array and then again by 100 to get the decimal value for the ProgressViewIOS to use.
• Dispatch the percentage just after finishing the transformations on each object
• Dispatch calls rerender on the navbar where the progress bar is and hands it the new percentage as shown in code above.
• Rerender happens (I have paused it here to see it returning proper JSX object and percentages) but nothing on the screen changes in the device

Answer 1

The problem here was that I was attempting to update the progress bar about 20 times in less than a second. It's great to have a progress bar to see the progress on your data crunching, however... if the entire transformation occurs in under a second... you probably don't require a progress bar.

Once I added more time in there, the progress bar had time to update just fine.