Styling in React Native with StyleSheet: A Beginner’s Guide

When you're starting out with React Native, one of the first challenges you'll face is how to style your components. If you come from web development, you’re probably used to writing CSS in separate files and applying styles using class names. In React Native, however, styles are defined as JavaScript objects using the built-in StyleSheet API. In this post, we’ll cover:

• How styling in React Native differs from CSS on the web.

• How to create and organize reusable style objects.

---

Background: CSS vs. React Native StyleSheet

CSS on the Web

In traditional web development, you typically write your styles in a separate CSS file and apply them using class selectors. For example:

styles.css:

.parent {
  color: green;
}

.child {
  font-size: 16px;
}

index.html:

<div class="parent">
  <p class="child">This text is green because it inherits the parent's color.</p>
</div>

How it works:

• Separation: Styles live in separate files.

• Cascading: Child elements automatically inherit certain styles from their parents. In the example above, if the parent has color: green and the child doesn’t override it, the child’s text will be green.

React Native Styling with StyleSheet

React Native doesn’t use external CSS files. Instead, you define styles as JavaScript objects using StyleSheet.create. For example:

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

export default function HomeScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello, World!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 20,
    color: '#000',
  },
});

Key Differences:

• No Cascading:
  In React Native, styles don’t cascade from parent to child. For example, if you set a text color on a parent <View>, that style does not automatically pass down to nested <Text> components. Each component’s style must be defined explicitly.

• JavaScript Objects:
  Styles are defined as JavaScript objects using camelCase (e.g., backgroundColor), not hyphenated names like background-color.

• Inline Composition:
  You can merge multiple style objects by passing an array to the style prop:

    <Text style={[baseTextStyle, customTextStyle]}>Hello!</Text>
  

  This is similar to applying multiple CSS classes.

---

Organizing Your Styles with Common Files

For small projects, you might define styles in the same file as your component. However, as your app grows, it becomes beneficial to organize your styles in separate, reusable modules—much like having shared CSS files.

Example: Common Styles File

Create a file called src/styles/common.js to hold your shared style definitions. Here’s a simple example:

// src/styles/common.js
import { StyleSheet } from 'react-native';

const commonStyles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 10,
  },
  text: {
    fontSize: 20,
    color: '#000',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
  },
});

export default commonStyles;

By placing shared styles in a common file, you can reuse them across multiple components, promoting consistency and making your code easier to maintain.

---

Hello World Using Common Styles

Below is an updated version of a simple HomeScreen component that uses the common styles defined above.

import React from 'react';
import { View, Text } from 'react-native';
import commonStyles from '../src/styles/common';

export default function HomeScreen() {
  return (
    <View style={commonStyles.container}>
      <Text style={commonStyles.title}>Hello, World!</Text>
    </View>
  );
}

What's Happening Here

• Importing Common Styles:
  Instead of defining a local style object, we import commonStyles from our common file.

• Applying Common Styles:
  The outer <View> uses commonStyles.container for layout, and the <Text> uses commonStyles.title for styling. This centralizes the styling and makes it easier to update later.

• Separation of Concerns:
  By separating styles into a common file, our component code remains clean, and any style changes need only be made in one place.

---

Conclusion

React Native’s StyleSheet API provides a powerful yet simple way to style your mobile applications. Although it differs from traditional CSS—particularly in that styles do not cascade automatically—you can still organize and reuse your style definitions by placing them in common files.

• Organization and Reusability:
  Just as separate CSS files help maintain consistency in web development, common style files in React Native allow you to reuse styles across components, making your code easier to manage.

• No Cascading:
  Remember that each component’s style must be defined explicitly, as React Native does not cascade styles from parent to child.

This approach helps you build well-organized, maintainable, and scalable mobile apps. As you gain experience, you can further refine your styling techniques and even explore more advanced patterns.

Happy coding, and enjoy building “stylish” React Native apps!