Merge / Combine two or more different StyleSheet components in React Native?

Question

I'm separating my styles in the following way:

styles / |-- base.js |-- base.ios.js |-- base.android.js 

Each of them exports a StyleSheet component created as in this example:

import { StyleSheet } from 'react-native';  export default StyleSheet.create({     statusBar: {     height: 20 }); 

How can I merge them so I only have one base style object? I'm looking for something like:

const baseStyles = mergeStyles(baseStyle, platformStyle); 

Answer 1

you are very close:

const baseStyles = [baseStyle, platformStyle]; 

basically any component can cascade styles like this:

<View style={[styles.style1,styles.style2]}></View>