Styling any application is important to improve its look and feel of any app.

Getting Started

To get started with styling a react native app, you first need to import a component StyleSheet from react-native into your application. You do need to have a basic react-native app up and running :)

import { StyleSheet } from 'react-native';

Now create an object of styles using create() of Stylesheet.

Using StyleSheet.create()

Using StyleSheet.create({}) and assign it to a variable.

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

function App() {
  return (
    <View>
      <Text>Hello World !</Text>
    </View>
  );
}

// creating stylesheet and assigning to styles
const styles = StyleSheet.create({
  container: {
    backgroundColor: '#ff0000',
  },
});

export default App;

Now using the container style on the View component using the style attribute.

<Component style={styles.container}>

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

function App() {
  return (
    <View style={styles.container}>
      <Text>Hello World !</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#ff0000',
  },
});

export default App;

On saving and running the code, you should see the output as

Now let's apply more few more style properties.

alignItems

Add a style name with properties of alignItems and observe the output.

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

function App() {
  return (
    <View style={styles.container}>
      <Text>Hello World !</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#ff0000',
    alignItems: 'center',
  },
});

export default App;

We observe that the text 'Hello World !' will align to the centre on a cross-axis. Here cross-axis is horizontal (left to right) in react-native.

justifyContent

Now add justifyContent property and guess the alignment. If you guessed as vertically centred then you are correct.

Here to see if this property is working correctly, we need to create some space. Let's add flex:1 which will take the entire space across the main axis (vertically)

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

function App() {
  return (
    <View style={styles.container}>
      <Text>Hello World !</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#ff0000',
    flex: 1,
    justifyContent: 'center',
  },
});

export default App;

So the output is as expected i.e, centred on the main axis.

Applying both alignItems: 'center' and justifyContent: 'center' will result in vertically and horizontally centred elements. Check the output.

Theme: useColorScheme

Now let's add a theme by importing useColorScheme. The return value of useColorScheme() indicates the current user-preferred color scheme. In this case, it's light.

import {View, Text, StyleSheet} from 'react-native';
import {useColorScheme} from 'react-native'; // color scheme component

function App() {
  const isDarkMode = useColorScheme() // returns user selected theme

  return (
    <View style={styles.container}>
      <Text>Hello World ! {isDarkMode}</Text> // isDarkMode is 'light'
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
});

export default App;

The expected output for displaying the default color scheme.

Add a condition that if color scheme is light then change the style of the text to background as green and the color as white.

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

function App() {
  const isDarkMode = useColorScheme();

  return (
    <View style={styles.container}>
      <Text style={isDarkMode !== 'light' ? styles.lightText : styles.darkText}>
        Hello World ! {isDarkMode}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  darkText: {
    backgroundColor: 'black',
    color: 'white',
  },
  lightText: {
    backgroundColor: 'white',
    color: 'black',
  },
});

export default App;

Your output should be as

---

And that's how styling is done in react native.

Feel Free to comment for any bugs/ errors.
Stay tuned for more blogs coming your way about React Native.