React Native EStyleSheet how to apply multiple styles

Question

I'm new to React Native EStyleSheet lib. I find it's really cool, but one thing that I can't figure out is, how to apply multiple styles to a single element just like I used to do with regular styles with style={{...styles.style1, ...styles.style2}}?

render() {
    return <View style={estyles.container}>
        <View style={{...estyles.container, ...estyles.containerInner}}>
            <Text>Hello, World!</View>
        </View>
    <View>

}

const estyles = EStyleSheet.create({
    container: {
        padding: '2%',
        borderStyle: 'solid',
        borderRadius: 1,
        borderWidth: 1,
        borderColor: 'black'
    },
    containerInner: {
        padding: '5%'
    }
});

Try `style={[estyles.container, estyles.containerInner]}` – Pritish Vaidya Nov 18 '18 at 21:41 — Pritish Vaidya, Nov 18 '18 at 21:41

score 1 · Answer 1 · answered Feb 11 '19 at 09:27

1

You can use array of styles to apply multiple styles to single view

example

<View style={[styles.container, styles.view,...]}>
</View>

answered Feb 11 '19 at 09:27

Paras Korat

2,011
2
18
36

score 0 · Answer 2 · answered Nov 18 '18 at 23:43

you can used in style array of styles for example:

render() {
    return <View style={estyles.container}>
        <View style={[estyles.container,estyles.containerInner]}>
            <Text>Hello, World!</View>
        </View>
    <View>

}

const estyles = EStyleSheet.create({
    container: {
        padding: '2%',
        borderStyle: 'solid',
        borderRadius: 1,
        borderWidth: 1,
        borderColor: 'black'
    },
    containerInner: {
        padding: '5%'
    }
});

this => [estyles.container,estyles.containerInner] can used

React Native EStyleSheet how to apply multiple styles

2 Answers2