How to Style a component in React Native?

In react native, we use style prop to do apply style on our components. It's similar to how we use CSS on the Web but with some changes. It accepts names that are written in camel case like fontSize rather than font-size.

How to apply style?

To apply a style to a component we need to declare the style object like this style={ } and inside it, we can pass an object or we can pass an array of objects on which we want to apply the style, for example:

<Text style={{ alignItems: 'center' }}>This is style file</Text>

In react native, we can apply the style in three ways.

1. Inline style

2. Block style

3. Inline/block style

React Native Inline style

Here we pass our style within the component and to pass all our style properties into the component we reference it with { }. Let's see with an example:

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { Text, View } from 'react-native';

export default function App() {
  return (
    <View 
     style={{ 
            flex: 1, 
            backgroundColor: 'black', 
            alignItems: 'center', 
            justifyContent: 'center', 
            borderWidth: 5, borderColor: 'yellow'}}>
      <Text style={{ color: 'red', fontSize: 30}}>Style in React Native</Text>
      <StatusBar style="auto" />
    </View>
  );
}

In the code example above, we have applied Inline style in View and Text component.

Here is the output for the above code:

React Native Block style

In Block level style we declare our style in blocks and call these blocks with their names. But to use this technique we need to use the StyleSheet object from react-native just like we use the <style> tag in HTML for declaring CSS. Using this technique will save time because we can define our style at a one place and use it anywhere, any number of time. Let's see with an example:

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.blockstyle}>Block Level style</Text>
      <Text style={styles.blockstyle}>Block Level style</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'black',
    alignItems: 'center',
    justifyContent: 'center',
    borderWidth: 5,
    borderColor: 'yellow'
  },
  blockstyle: {
    fontSize: 30,
    color: 'red'
  },
});

In the code above, we have declared two Text components and then we declare our block style using the StyleSheet component and create two style blocks named container and blockstyle using the create method. Here we apply container style to View and blockstyle to both Text components.

Here is the output of the above code:

React Native Inline/Block style

We can also declare the block level and inline style to the same component by just passing all the style components as an object in the array. Let's see with an example.

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={[styles.blockstyle, { color: 'red'}]}>Style in React Native</Text>
      <Text style={[styles.blockstyle, { color: 'red'}]}>Style in React Native</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'black',
    alignItems: 'center',
    justifyContent: 'center',
    borderWidth: 5,
    borderColor: 'yellow'
  },
  blockstyle: {
    fontSize: 30,
  },
});

In the code above, in the text component we simply pass the array in style component and as a first object, we pass the block level style component and then we pass the inline style to make our text's color red.

So in this tutorial, we learned how to add style to our React native components using both inline style component and block style with code examples.

---