react-native-extended-stylesheet: Global styles 'Unresolved variable' error

Hi,

I’m trying to get all my style values in EStyleSheet.build({...}); but I’m experiencing some troubles with the error “Unresolved variable: $<VAR_NAME>”.

Here’s my code:

// style.js
const COLORS = {
    $ORANGE: '#D57C4C',
    $PURPLE: '#B36892',
    $WHITE: '#FFFFFF',
    $BLACK: '#000000',
    $GREY: '#C1C1C1',
    $LIGHT_GREY: '#EAEBED',
    $DEFAULT_IOS_BLUE: '#0e7afe',
};

const FONTS = {
    $FONT_XL: 20,
    $FONT_L: 17,
    $FONT_M: 14,
    $FONT_S: 12,
    $FONT_XS: 10,
};

const ICONS = {
    $ICON_XL: 30,
    $ICON_L: 25,
    $ICON_M: 20,
    $ICON_S: 15,
};

const VALUES = {
    $RAD: 4,
};

export default {
    ...COLORS,
    ...FONTS,
    ...ICONS,
    ...VALUES
};

// app.js, entry file

EStyleSheet.build({
    ...globalStyleVars
});

// my component code style
const styles = EStyleSheet.create({
    $padding: 10,

    container: {
        justifyContent: 'flex-start',
        alignItems: 'center',
        paddingLeft: '$padding',
        paddingRight: '$padding',

        borderStyle: 'solid',
        borderBottomColor: '$ORANGE',
        borderBottomWidth: 4,

    },

    inputContainer: {
        flex: 1,
        flexDirection: 'row',
        marginRight: 10
    },

    inputWrapper: {
        $padding: 5,
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'flex-start',
        alignItems: 'center',
        alignSelf: 'stretch',

        paddingLeft: '$padding',
        paddingRight: '$padding',

        backgroundColor: '$LIGHT_GREY',
        borderRadius: '$RAD',
        height: 25,
    },

    input: {
        flex: 1,
        paddingLeft: 8,
        fontSize: 14,
        padding: 0,
    },

    icon: {
        width: 15,
        height: 15
    },

    buttonContainer: {
        justifyContent: 'center',
        alignItems: 'center',
    },

    text: {
        color: '$DEFAULT_IOS_BLUE',
        alignSelf: 'stretch',
        paddingTop: 10,
        paddingBottom: 10
    },
});

And, the weird thing is that If I remove $RAD, it works with the others values ($ORANGE etc…)

Thank you for your help !

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 21 (9 by maintainers)

Links to this issue

react-native-extended-stylesheet - npm

Most upvoted comments

@golestanirad It seems that EStyleSheet.create() is not applied to headerTitleStyle: { ... }. If StackNavigator does not call EStyleSheet.create() inside, you should add it explicitly:

headerTitleStyle: EStyleSheet.create({   // <-- note this
    alignSelf: 'center',
    borderWidth: 2,
    borderColor: 'yellow',  
    color: () => EStyleSheet.value('$headerTitleColor'),
}),

vitalets on Feb 2, 2018

I also want to point this out, for futures devs with the same issue.

https://github.com/vitalets/react-native-extended-stylesheet#value

Please note that in most cases EStyleSheet.value() should be used inside function, not directly:

const styles = EStyleSheet.create({
    button1: {
        width: () => EStyleSheet.value('$contentWidth') + 10 // <-- Correct!
    },
    button2: {
        width: EStyleSheet.value('$contentWidth') + 10 // <-- Incorrect. Because EStyleSheet.build() may occur later and $contentWidth will be undefined at this moment.
    }
});

BlaShadow on Nov 17, 2018

@golestanirad I think it’s because EStyleSheet.build() actually occurs after you try to get value of variable. Have a look on this:

// app.js
EStyleSheet.build({   
    $currencyFontColor: 'hsl(45, 100%, 94%)',
});

const styles = EStyleSheet.create({
   underlayColor: Color(EStyleSheet.value('$currencyFontColor')).darken(0.5),
});

It works. But if we change the order:

const styles = EStyleSheet.create({
   underlayColor: Color(EStyleSheet.value('$currencyFontColor')).darken(0.5),
});

EStyleSheet.build({   
    $currencyFontColor: 'hsl(45, 100%, 94%)',
});

It throws Unresolved variable: ....

The solution is to wrap property with EStyleSheet.value into function. EStyleSheet guarantees that such function will be called after the styles build:

const styles = EStyleSheet.create({
   underlayColor: () => Color(EStyleSheet.value('$currencyFontColor')).darken(0.5),
});

EStyleSheet.build({   
    $currencyFontColor: 'hsl(45, 100%, 94%)',
});

vitalets on Jan 22, 2018