I am importing EStyleSheet in my entrypoint, App.jsx, and calling build.
Each of my components has it's own file for styles that is imported into that specific component
I have converted all my component stylesheets over to EStyleSheet.
Expected Behavior
I would expect the styles to be calculated when the app loads.
Actual Behavior
When the app loads, any components that are using EStyleSheet look unstyled. If I force a fast refresh to happen, it seems like the build takes effect, at least for components currently rendered.
If I put EStyleSheet.build() above EStyleSheet.create({...}) in one of my stylesheet files, then it fixes that specific file and causes it to render properly when the app loads.
Show the code
App.jsx:
import React from 'react';
import { Dimensions } from 'react-native';
import EStyleSheet from 'react-native-extended-stylesheet';
const { width } = Dimensions.get('window');
EStyleSheet.build({ $rem: width / 380 });
import App from './src';
import { SplashProvider } from './src/components/Splash';
export default () => (
<SplashProvider>
<App />
</SplashProvider>
);
example styles.js file:
import EStyleSheet from 'react-native-extended-stylesheet';
import { passportNavHeight, adjustedContentHeight, screenWidth } from '../../constants/Screen';
const { width } = Dimensions.get('screen');
// without this line, it does not build unless I force a fast refresh to happen while that component is in view, and then it is only for that component
EStyleSheet.build({ $rem: width / 380 });
export default EStyleSheet.create({...})
Steps to Reproduce
I am importing EStyleSheet in my entrypoint, App.jsx, and calling build. Each of my components has it's own file for styles that is imported into that specific component I have converted all my component stylesheets over to EStyleSheet.
Expected Behavior
I would expect the styles to be calculated when the app loads.
Actual Behavior
When the app loads, any components that are using EStyleSheet look unstyled. If I force a fast refresh to happen, it seems like the build takes effect, at least for components currently rendered.
If I put EStyleSheet.build() above EStyleSheet.create({...}) in one of my stylesheet files, then it fixes that specific file and causes it to render properly when the app loads.
Show the code
App.jsx:
example styles.js file:
Environment
System: OS: macOS 10.15.3 CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz Memory: 803.03 MB / 16.00 GB Shell: 3.2.57 - /bin/bash Binaries: Node: 10.15.3 - ~/.nvm/versions/node/v10.15.3/bin/node npm: 6.4.1 - ~/.nvm/versions/node/v10.15.3/bin/npm SDKs: iOS SDK: Platforms: iOS 13.4, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2 IDEs: Android Studio: 3.6 AI-192.7142.36.36.6241897 Xcode: 11.4/11N132i - /usr/bin/xcodebuild npmPackages: react: ~16.9.0 => 16.9.0 react-native: https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz => 0.61.4 npmGlobalPackages: react-native: 0.61.5