Code with Shrut

Stylesheet in React Native

Shrutika Dorugade's photo
Shrutika Dorugade
·

4 min read

Hey guys, what's up? I hope you all are doing well. So let's move one step ahead and understand a bit about styling to make our Hello World app a little bit eye-catchy.

In case you haven't developed the Hello World app yet then please check out my previous article and build it quickly to follow me along. So let's get started.

So friends, till now we have written below lines of code in our App.tsx file:

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

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

export default App;

  • As of now with this code, our Hello World is getting displayed on the very top left of the screen and it's not so readable.

  • So we will use the StyleSheet component provided by react-native to bring it to the center of the screen.

Understanding the behavior of TypeScript

As you know, our App component file's extension is .tsx (i.e. TypeScript). TypeScript is a strongly typed language that helps us to write less buggy code by informing us about errors at compile time as soon as we write code in VS code.

  • Let's make our App function strongly typed by mentioning the return type which it's going to return. To do it simply write below code:
import {SafeAreaView, View, Text} from 'react-native';

function App(): JSX.Element {
  return (
    <SafeAreaView>
      <View>
        <Text>Hello World!!!</Text>
      </View>
    </SafeAreaView>
  );
}

export default App;
  • By mentioning JSX.Element we are telling that our App component will return one JSX element. Now remember if you don't return the JSX element then TypeScript will give you compile time error as shown below:

We will majorly use TypeScript from now onwards but if you are new to TypeScript then don't be afraid, it's not much difficult. If you know JavaScript then it would be quite easy for you.

StyleSheet

Now let's come to today's main topic i.e. StyleSheet. So firstly let's import the StyleSheet component so that we can use it in our app.

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

If you see our App component, then we have two main components in it i.e. View and Text. Let's create a style for these two components. Just after the App component, write the below lines of code.

const styles = StyleSheet.create({
  container: {
    height: '100%',
    backgroundColor: 'green',
    alignItems: 'center'
  },
  text: {
    color: '#EDEADE',
    fontSize: 40
  }
});

  • Let's understand the above code step by step:

    1. The first line says, hey I would like to create styles using StyleSheet.create method. You can give any name (styles or myStyles or coolStyles, etc)

    2. The create method takes one object which will have a set of styles.

    3. For example, here I am saying hey I need two styles namely container and text.

    4. For each of them, I have mentioned the style which I want to give.

    5. You can play around with this and create your own styles to understand it much better.

  • Now it's time to apply these styles to our component. Let's see how to do it.

function App(): JSX.Element {
  return (
    <SafeAreaView>
      <View style={styles.container}>
        <Text style={styles.text}>
          Hello World!!!
        </Text>
      </View>
    </SafeAreaView>
  );
}
  • As you can see above, inside the component which you would like to style, just mention a style attribute with styles that you created as the value of the attribute.

Understanding left-right and top-bottom alignment

  • With the above style, if you run your application then it will bring your text to the top center because the property alignItems of the container have left to right alignment.

  • Meaning if you mention the center value then it will bring it to the center from left to right of the screen. Not from top to bottom.

  • To bring the text to the center even from top to bottom, you need to have justifyContent property as shown below:

container: {
    height: '100%',
    backgroundColor: 'green',
    alignItems: 'center',
    justifyContent: 'center'
}
  • We have other values as well for both alignItems and justifyContent, play around with them so that you will get more understanding.

Alright, with all of the above stuff our final App.tsx file will look something like this:

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

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

const styles = StyleSheet.create({
  container: {
    height: '100%',
    backgroundColor: 'green',
    alignItems: 'center',
    justifyContent: 'center'
  },
  text: {
    color: '#EDEADE',
    fontSize: 40
  }
});

export default App;

You can style it, even more, better by playing around with it. I just wanted to give you a brief description of StyleSheet so just discussed about basic styles. But in future articles we will definitely explore it more.

I hope this helped you to understand how to style react native components. I will catch you up in our next article. Till that time, style your Hello World app.

Special thanks to Hitesh Choudhary !!!

StyleSheetReact Nativeandroid app development