Outlining using global stylesheet doesnt work

[ivnnv]

Hi, Im moving most of my local styles to a global file which is shared across the app (in a kind of bootstrap-like library) and loading this styles file in App.js. Everything works fine except the outlining, which still working for local styles, but not for the ones on the global shared file.

App.js

import React from 'react';
import ESS from './Styles';
...

Styles.js

import EStyleSheet from 'react-native-extended-stylesheet';

const { width, height } = Dimensions.get('window');

export default EStyleSheet.build({
    $outline: 1,

    // $w50: {
        width: width * 0.5,
    },
});

Component.js // outlining wont work here!

import EStyleSheet from 'react-native-extended-stylesheet';
...
<View style={EStyleSheet.value('$w50') />
<View style={EStyleSheet.value('$w50') />

So... It is any way to make the outlining work using this configuration?

[vitalets]

Hi! So you need to outline all components when setting global $outline, right?

[ivnnv]

That is, need to outline any component using any global style (EStyleSheet.value('$abc')) from Styles.js

[vitalets]

I've got your point. You are using style as a function feature. Frankly speaking, I'm not a fan of it because it makes styles less declarative. It's better to pass in EStyleSheet.build() only variables and store common styles as separate module.

What about this solution: main.js

const { width, height } = Dimensions.get('window');
EStyleSheet.build({
    $width: width
});

common-styles.js

export default EStyleSheet.create({
  w50: {
    width: '$width * 0.5',
  }  
});

component.js

import commonStyles from './common-styles';
...
<View style={commonStyles.w50} />

Then, you can easily enable outline in all common styles: common-styles.js

export default EStyleSheet.create({
  $outline: 1, // <-- outline all common styles
  w50: {
    width: '$width * 0.5',
  }  
});

Or enable outline in all styles created with EStyleSheet: main.js

EStyleSheet.build({
    $outline: 1, // <-- outline all styles
    ...
});

[ivnnv]

Your suggestion not only works like a charm but also it really feels the way it should be, so thank you very much for pointing me out in the right direction, i have refactored all my code and now its much easier to write and read when combining multiple styles like: <View style={[ESS.w50, ESS.bgBlack]}

And also thanks for creating and maintaining this great component! 👌

[vitalets]

You are welcome! 😉