Common styles ?

[deadcoder0904]

Is there any way to create Common styles since I'm repeating a lot of code.

Currently, my approach is

<View style={[styles.commonStyle, styles.A]} />
<View style={[styles.commonStyle, styles.B]} />

But, I think the following approach would be much better

EStylesheet.create({
    $commonStyles: {
        margin: 10,
        padding: 10,
    },
    A: {
        ...$commonStyles,
        color: 'red',
    },
    B: {
        ...$commonStyles,
        color: 'green',
    },
})

So that in my component I will only do this -

<View style={styles.A} />
<View style={styles.B} />

Someway the Component would be much more readable. What do u think @vitalets ❔

[vitalets]

hi @deadcoder0904 !

I got your idea. Maybe like this:

const commonStyles = {
    margin: 10,
    padding: 10,
};
const styles = EStylesheet.create({
    A: {
        ...commonStyles,
    color: 'red',
    },
    B: {
    ...commonStyles,
    color: 'green',
    },
});

[deadcoder0904]

Yaa I thought about that too, but then I might create a lot of objects

[vitalets]

From the performance perspective creating many little sheets that just serve as commons looks not good - as each real sheet causes style creation on native side that anyway takes some resources. I think storing common parts in helper objects is ok: you don't create unneeded sheets and can always group them to have more clean code:

const commonStyles = {
    button: {
        margin: 10,
        padding: 10,
    },
    link: {
        color: 'blue'
    }
};
const styles = EStylesheet.create({
    A: {
        ...commonStyles.button,
    color: 'red',
    },
    B: {
    ...commonStyles.button,
    color: 'green',
    },
});

[deadcoder0904]

Cool enough 👍

[anisimov74]

@vitalets thanks for the library! It's really helpful. Regarding this common style. I see no way to create common styles that use color variables. An example:

export const commonStyle = {
 height: 1,
 backgroundColor: '$background'
}

Any idea how to make this possible?