vitalets / react-native-extended-stylesheet

Extended StyleSheets for React Native
MIT License
2.93k stars 132 forks source link

build in entrypoint not working, but build in specific stylesheet file works #137

Closed tpiecora closed 4 years ago

tpiecora commented 4 years ago

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:

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({...})

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