RN Globalize not working when nested inside HoC

[haydump]

Reproducible demo repo:

Expo React native project.

https://github.com/haydump/test-globalize-hoc

Description

When nested with higher-order-component functions (for example connect from redux, and various from recompose), Components (FomattedMessages, etc..) will only render once with initial FormattedWrapper's locale, and won't re-render when locale changes

Environment

expo         v19
react-native 0.46
redux        3.7.2
recompose    0.25.0

Steps to Reproduce

Clone demo repo, yarn install or npm install. Open Expo XDE, open repo project. Then run on Simulator or Devices of your choice.
In App.js

      <Provider store={store}>
        <LocalizationWrapper>
          <View style={{flex: 1}}>
            <ExampleComponent style={{flex: 1, alignItems: 'center', justifyContent: 'center'}} />
            <ExampleHoC style={{flex: 1, alignItems: 'center', justifyContent: 'center'}} />
          </View>
        </LocalizationWrapper>
      </Provider>

• LocalizationWrapper is FormattedWrapper wrapped with reducer to store and change locale.
• ExampleComponent is a normal React component.
• ExampleHoC is ExampleComponent wrapped in a simple connect from redux, no new props is added.

Actual Behavior

When run, a saga will start changing locale between en, th, zh every second.
ExampleComponent will change text accordingly, while ExampleHoC stays the same.

Expected Behavior

Higher-order-component ExampleHoC should re-render similar to ExampleComponent

[haydump]

@joshswan I've tried to debug the problem but still haven't found the cause yet. Hope you can help.

[joshswan]

This is related to this React issue. Basically your HoC is implementing a shouldComponentUpdate that is only looking at it's own props and not considering the fact that the context changes affect children down the line. It's difficult to say what a good solution would be at this time, though I can say that simply pulling in the locale in the connect of the HoC solves the issue since it then knows that something changed and re-renders. Obviously a total hack but at least it pins down the issue.

[haydump]

@joshswan Thank you, it works. I thought I had to pass context properly somehow between HoC. Now simply adding locale from reducer in connect map state solves the problem.

[haydump]

@joshswan Hi, could you take a look again in the demo repo? (I've add more example code)

I've encountered the same error when globalize Components is nested inside a Navigator from react-navigation. Setting new prop doesn't make the component re-render in anyway.

I don't think it's the same issue as with contextand shouldComponentUpdate above, since new locale is passed to Component correctly when new prop is added and Component is not nested inside Navigator.

[haydump]

I can finally solve the issue with Navigators by passing outer globalize context in screenProps, then provide it back for screens inside Navigators. This is due to react-navigation has their own context, which is navigation, and it causes issue somehow with other context. Logging inside Formatted components I can see that they rerender when locale is changed from outside (Redux), but some how globalize context & its locale stays the same value

[joshswan]

Unfortunately I don't have much experience with react-navigation. It seems weird that changes in context would not be propagated down. Frankly, in your situation, I'd probably just implement a small HoC that injects appropriate values from state where necessary and maybe tweaks the shouldComponentUpdate method to look at context. Then you can just wrap components with something like withGlobalize(MyComponent) to minimize the repetition and make sure things work as expected.

[haydump]

Yes, that what I've done to solve the issue. Thank you for the help.