vitalets/react-native-extended-stylesheet

Re-build stylesheets on hot reload

Kerumen opened this issue · 16 comments

Kerumen commented

Is it possible?

I tried the following but it's not working.

if (module.hot) {
  module.hot.accept(() => {
    EStyleSheet.build();
  });
}
vitalets commented

hi,
it should be possible after #7
What error message you are getting?

Kerumen commented

I don't have any error message. It's just not working silently.

vitalets commented

I think styles are re-calculated, but components are not re-rendered automatically (because EStyleSheet.build(); does not force re-render, it's just re-calculates styles).
Could you check it somehow? Maybe call forceUpdate() on some component after EStyleSheet.build() caused by hot reload?

Kerumen commented

Yup, you were right. Any ideas about how can I force the rerender ?
I can't put a forceUpdate in each component..

vitalets commented

Agree. It's not the solution to manually update components.
Currently i'm working on re-render components on orientation change #9 and in fact it is the same task.
I think we will wrap top components into mixin that will keep them update on an style changes (no matter it was hot reload or orientation change)
So waiting for #9 here..

Kerumen commented

Okey I will watch #9, thanks :)

gastonmorixe commented

Any updates on this? I have styles.js file and it is not updating on hot reload.

vitalets commented

@gastonmorixe Could you provide a simple snippet demonstrating it?

alvinwoon commented

+1. HMR is broken for some reason. Using it via Expo tho.

vitalets commented

I'll keep this open to not forget about hot reload.

vitalets commented

Released support of HMR in 0.8.0. Also added a docs section.
Feel free to reopen in case of any issues.

corysimmons commented

@vitalets Non-support for HMR is still mentioned in README under caveats. https://github.com/vitalets/react-native-extended-stylesheet#caveats

If you're happy with 0.8+ implementation of it, can we remove that warning from README?

gastonmorixe commented

is HMR working when styles are in a external file? It's not working for me (in React Native 0.53)

vitalets commented

@gastonmorixe Could you show some demonstrating code if possible?

joelgetaction commented

NOTE: This code:

module.hot.accept(() => {
	      EStyleSheet.clearCache();
	      EStyleSheet.build(); // force style re-calculation
	    });

will crash release builds instantly on launch that are uploaded and distributed via TestFlight, so be sure to exclude it from your release builds.

  • 👍1
vitalets commented

@joelgetaction Could you show the crash trace?