How to create global styles with React Native?

Sometimes, we want to create global styles with React Native.

In this article, we’ll look at how to create global styles with React Native.

How to create global styles with React Native?

To create global styles with React Native, we can create a module that exports the stylesheet object.

For instance, we write:

styles.js

import { StyleSheet } from 'react-native';

export default StyleSheet.create({
  alwaysRed: {
    backgroundColor: 'red',
    height: 100,
    width: 100,
  },
});

App.js

import * as React from 'react';
import { View, Text, Button } from 'react-native';
import { Card } from 'react-native-paper';
import styles from './styles';

const App = () => {
  return (
    <View>
      <Text style={styles.alwaysRed}>hello</Text>
    </View>
  );
};
export default App;

We call StyleSheet.create in styles.js to create a stylesheet object.

Then we import it with import styles from './styles'; in App.js.

Next, we apply the styles to the Text component by setting style to styles.alwaysRed.

Conclusion

To create global styles with React Native, we can create a module that exports the stylesheet object.