Ui: Impossible to pass array to style prop

[haikov]

According to React Native documentation we can pass style prop as an array. Like this:

<Text style={[styles.red, styles.bigblue]}>red, then bigblue</Text>

But this rule is broken for Shoutem UI components. The following example is not applying any styles to Tile component:

<Tile  style={[styles.container, !this.props.data.isActive && styles.expired]}>
...
</Tile>

Thanks!

[ikalafat]

Hi @gaykov,

Use ... (spread operator) instead of array.

const resolvedStyle = !this.props.data.isActive && styles.expired;

and then in JSX you can do it like below

<Tile style={{ ...styles.container, ...resolvedStyle }}>
...
</Tile>

[haikov]

Thanks @ikalafat. I'm using similar solution currently. But I think that it should be consistent with ReactNative.

[SoHotSoup]

@gaykov thank you for using our toolkit. We were thinking about supporting array styles, but it would have a large impact on performance because merge of styles across the theme then becomes more complex. So in advance of supporting style nesting and overriding through the theme, we don't support style arrays and styles created with StyleSheet.create for now. I see this as the great value for a small price. 😉

[haikov]

@SoHotSoup yeah, it definitely makes sense. Thank you for explanation!