In the previous tutorial, you learned how to build a simple user interface using the three fundamental React Native components: View, Text, and Image.

Although the application works, it still looks plain.

In this tutorial, you'll learn how to use the StyleSheet API to improve the appearance of your application. You'll learn how to:

• Change text colors

• Add background colors

• Control spacing with padding and margin

• Adjust font sizes

• Create a clean, attractive layout

These styling techniques are used in almost every React Native application.

---

Prerequisites

Before starting, make sure:

• You have completed the previous tutorial.

• Your React Native project is running.

• The Expo development server is active.

If necessary, start the application.

npm run web

---

Step 1: Understanding StyleSheet

In React Native, the appearance of components is controlled using the StyleSheet API.

A StyleSheet is simply a collection of styles.

const styles = StyleSheet.create({

});

Each style is given a name.

const styles = StyleSheet.create({

  title: {

  },

  container: {

  }

});

You can then apply these styles using the style property.

<Text style={styles.title}>
    Hello React Native
</Text>

---

Step 2: Create a Simple Screen

Replace the contents of App.tsx with the following code.

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

export default function App() {
  return (
    <View style={styles.container}>

      <Text style={styles.heading}>
        My First Styled App
      </Text>

      <Text style={styles.description}>
        Welcome to React Native!
      </Text>

    </View>
  );
}

const styles = StyleSheet.create({

  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },

  heading: {
    fontSize: 28,
  },

  description: {
    fontSize: 18,
  },

});

Your application should display two centered lines of text.

---

Changing Text Colors

Use the color property to change the color of text.

heading: {
  fontSize: 28,
  color: 'blue',
}

You can use:

color: 'red'
color: 'green'
color: 'purple'

or hexadecimal colors.

color: '#1E88E5'

Experiment with different colors and observe the results.

---

Adding Background Colors

You can change the background color of any component.

For example, change the application's background.

container: {
  flex: 1,
  justifyContent: 'center',
  alignItems: 'center',
  backgroundColor: '#E3F2FD',
}

You can also add a background color to the heading.

heading: {
  backgroundColor: '#1565C0',
  color: 'white',
}

Notice how the text now appears inside a colored rectangle.

---

Controlling Spacing with Padding

Padding adds space inside a component.

heading: {
  backgroundColor: '#1565C0',
  color: 'white',
  padding: 10,
}

Without padding, the text touches the edges.

With padding, the text has breathing room and becomes much easier to read.

---

Controlling Spacing with Margin

Margin adds space outside a component.

For example,

heading: {
  marginBottom: 20,
}

Now there is more space between the heading and the description.

You can also use:

marginTop
marginLeft
marginRight
marginBottom

Or apply the same spacing on every side.

margin: 20

---

Adjusting Font Sizes

The fontSize property changes the size of text.

heading: {
  fontSize: 32,
}

Larger values produce larger text.

You can also make text bold.

heading: {
  fontSize: 32,
  fontWeight: 'bold',
}

Experiment with different font sizes until you find one that looks good.

---

Aligning Text

The textAlign property controls horizontal alignment.

description: {
  textAlign: 'center',
}

Other values include:

textAlign: 'left'

textAlign: 'right'

This property is especially useful for longer paragraphs.

---

A Better Looking Screen

Update your styles as follows.

const styles = StyleSheet.create({

  container: {
    flex: 1,
    backgroundColor: '#F5F5F5',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },

  heading: {
    fontSize: 32,
    fontWeight: 'bold',
    color: '#1565C0',
    marginBottom: 20,
  },

  description: {
    fontSize: 18,
    textAlign: 'center',
    color: '#555',
  },

});

Notice how just a few styling changes make the application look much more polished.

---

Common Style Properties

Here are some of the most frequently used style properties.

Property	Purpose
color	Changes text color
backgroundColor	Changes the background color
fontSize	Changes text size
fontWeight	Makes text bold
padding	Adds space inside a component
margin	Adds space outside a component
textAlign	Aligns text horizontally
width	Sets component width
height	Sets component height

You'll use these properties in almost every React Native application.

---

Practice Exercises

Exercise 1

Change the application's background color.

Try:

backgroundColor: '#FFF8E1'

---

Exercise 2

Make the heading larger.

fontSize: 40

---

Exercise 3

Change the heading color.

color: '#D32F2F'

---

Exercise 4

Add more space between the heading and the description.

marginBottom: 40

---

Exercise 5

Increase the padding around the screen.

padding: 40

Observe how each change affects the layout.

---

Complete Example

After completing the exercises, your application might look like this.

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.heading}>
        My First Styled App
      </Text>

      <Text style={styles.description}>
        Welcome to React Native!
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({

  container: {
    flex: 1,
    backgroundColor: '#F5F5F5',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 30,
  },

  heading: {
    fontSize: 32,
    fontWeight: 'bold',
    color: '#1565C0',
    marginBottom: 20,
  },

  description: {
    fontSize: 18,
    color: '#555',
    textAlign: 'center',
  },

});

---

Summary

In this tutorial, you learned how to style React Native applications using the StyleSheet API.

You explored how to:

• Change text colors with color

• Add background colors with backgroundColor

• Create spacing using padding and margin

• Adjust font sizes using fontSize

• Improve layouts with alignment and spacing

Although the examples were simple, these same techniques are used in professional React Native applications.