RN Globalize not working when nested inside HoC about react-native-globalize HOT 7 CLOSED

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

from react-native-globalize.

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.

from react-native-globalize.

@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.

from react-native-globalize.

@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.

from react-native-globalize.

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

from react-native-globalize.

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.

from react-native-globalize.

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

from react-native-globalize.