How to Use StyleSheet in React Native: Simple Guide

In React Native, use StyleSheet.create() to define styles as JavaScript objects for your components. This method improves performance and keeps styles organized by creating a style reference you apply via the style prop.

Syntax

The StyleSheet.create() method takes an object where keys are style names and values are style properties. You then use these style names in your components with the style prop.

Example parts:

• StyleSheet.create: Creates a style object.
• Style names: Keys like container or text.
• Style properties: CSS-like properties such as backgroundColor, fontSize.
• Usage: Apply styles with style={styles.container}.

javascript

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'white',
    padding: 10
  },
  text: {
    fontSize: 16,
    color: 'black'
  }
});

Example

This example shows a simple React Native component styled using StyleSheet.create(). It demonstrates how to define styles and apply them to View and Text components.

javascript

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Hello, StyleSheet!</Text>
      <Text style={styles.subtitle}>This is a styled text.</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f0f0f0'
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333'
  },
  subtitle: {
    fontSize: 16,
    color: '#666'
  }
});

Output

A full screen with a light gray background, centered text: a large bold dark gray title 'Hello, StyleSheet!' and below it a smaller lighter gray subtitle 'This is a styled text.'

Common Pitfalls

Common mistakes when using StyleSheet include:

• Not using StyleSheet.create() and defining styles as plain objects, which can hurt performance.
• Passing an array of styles incorrectly or forgetting to wrap multiple styles in an array.
• Using invalid style property names or values that React Native does not support.
• Trying to use CSS syntax like hyphenated properties (background-color) instead of camelCase (backgroundColor).

javascript

/* Wrong: plain object without StyleSheet.create */
const stylesWrong = {
  container: {
    backgroundColor: 'blue'
  }
};

/* Right: use StyleSheet.create */
import { StyleSheet } from 'react-native';
const stylesRight = StyleSheet.create({
  container: {
    backgroundColor: 'blue'
  }
});

Quick Reference

Remember these tips when using StyleSheet in React Native:

• Always use StyleSheet.create() for better performance.
• Use camelCase for style property names.
• Apply styles with the style prop.
• You can combine multiple styles by passing an array to style.
• Use flexbox properties for layout.

Key Takeaways

Use StyleSheet.create() to define styles for better performance and organization.

Apply styles to components using the style prop with the style name from your StyleSheet.

Always use camelCase for style properties, not CSS hyphenated names.

Combine multiple styles by passing an array to the style prop.

Avoid defining styles as plain objects outside StyleSheet.create to prevent performance issues.