How to combine external and inline styles with React Native?

Sometimes, we want to combine external and inline styles with React Native.

In this article, we’ll look at how to combine external and inline styles with React Native.

How to combine external and inline styles with React Native?

To combine external and inline styles with React Native, we can put all the style objects in an array.

For instance, we write:

import * as React from 'react';
import { View, TouchableHighlight, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import { Card } from 'react-native-paper';
import { Icon } from 'react-native-elements';

const styles = StyleSheet.create({
  button: {
    width: 100,
  },
});

export default function App() {
  return (
    <View>
      <TouchableHighlight style={[styles.button, { backgroundColor: 'yellow' }]}>
        <Icon name="chevron-right" size={30} color="#01a699" />
      </TouchableHighlight>
    </View>
  );
}

to combine the styles.button styles with the backgroundColor style.

Therefore, TouchableHighlight has width 100px and background color yellow.

Conclusion

To combine external and inline styles with React Native, we can put all the style objects in an array.