How to use it along `react-native-elements` ThemeProvider?

diosney commented 5 years ago

Steps to Reproduce

Install both react-native-elements and react-native-extended-stylesheet.
Follow the steps at: https://react-native-training.github.io/react-native-elements/docs/customization.html to use the default global Themes.
In the Global themes configuration, which is a regular object, not a StyleSheet object, try to set some values to 'rem' values using EStyleSheet.create(), like the following:

export const THEME_STYLES = {
  Header  : {
    backgroundColor: '#c22525',
    icon           : {
      type: DEFAULT_ICON_TYPE
    }
  },
  Button  : {
    raised        : true,
    type          : 'clear',
    containerStyle: EStyleSheet.create({
      marginBottom: '30rem',
      width       : '95%'
    }),
...

When the app gets compiled, it complains that 'rem' is not a recognized value, so it doesn't get compiled.

Expected Behavior

A way to get the compiled styles with the proper values (not 'rem').

Show the code

This is an extract of the relevant section of the App.tsx file:

EStyleSheet.build({
  $rem: REM
});

export default class App extends React.Component {
  async render() {
    return (
      <ThemeProvider theme={THEME_STYLES}>
        <StatusBar backgroundColor="#c22525" barStyle="light-content" />

        <AppNavigator />
      </ThemeProvider>
    );
  }
}

The imported THEME_STYLES:

xport const THEME_STYLES = {
  Header  : {
    backgroundColor: '#c22525',
    icon           : {
      type: DEFAULT_ICON_TYPE
    }
  },
  Button  : {
    raised        : true,
    type          : 'clear',
    containerStyle: EStyleSheet.create({
      marginBottom: '30rem',
      width       : '95%'
    })

Environment

info Fetching system and libraries information... System: OS: Linux 4.15 Ubuntu 18.04.2 LTS (Bionic Beaver) CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz Memory: 498.14 MB / 15.47 GB Shell: 4.4.20 - /bin/bash Binaries: Node: 10.14.0 - ~/.nvm/versions/node/v10.14.0/bin/node npm: 6.10.2 - ~/.nvm/versions/node/v10.14.0/bin/npm SDKs: Android SDK: Android NDK: 19.0.5232133 npmPackages: react: 16.8.6 => 16.8.6 react-native: 0.60.4 => 0.60.4 npmGlobalPackages: react-native-asset: 2.0.0 react-native-cli: 2.0.1

diosney commented 5 years ago

I could separate the global styles into components with the styles baked in, but I wanted to know if there was a better way to get the compiled styles with the correct values before passing them to the theme provider.

stale[bot] commented 5 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

diosney commented 5 years ago

Anything?

stale[bot] commented 4 years ago

Is this still relevant? If so, what is blocking it? Is there anything you can do to help move it forward?

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

vitalets commented 4 years ago

@diosney good point. EStyleSheet.create() as object property seems good for storing compiled styles. Could you clarify what actually you feel can be improved?

vitalets / react-native-extended-stylesheet