StyleSheet.create in React Native

Introduction

StyleSheet.create helps you organize and optimize styles in React Native apps. It makes your styles easier to read and faster to use.

When you want to keep your styles neat and separate from your UI code.

When you need to reuse the same style in multiple places in your app.

When you want to improve app performance by avoiding creating new style objects on every render.

When you want to clearly see all your styles in one place for easier editing.

Syntax

React Native

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

Use StyleSheet.create to define a set of named styles as an object.

Each style is an object with CSS-like properties but uses camelCase names.

Examples

This creates a style named 'button' with blue background and padding.

React Native

const styles = StyleSheet.create({
  button: {
    backgroundColor: 'blue',
    padding: 10
  }
});

Multiple styles can be defined in one StyleSheet object.

React Native

const styles = StyleSheet.create({
  title: {
    fontWeight: 'bold',
    fontSize: 24
  },
  subtitle: {
    fontSize: 18,
    color: 'gray'
  }
});

Sample App

This app shows two text lines styled using StyleSheet.create. The container centers content with a light gray background. The title is big and bold, the subtitle is smaller and gray.

React Native

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 simple example.</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',
    marginTop: 8
  }
});

Important Notes

Always use camelCase for style property names, like backgroundColor instead of background-color.

StyleSheet.create helps React Native optimize style objects internally for better performance.

You can still use inline styles, but StyleSheet.create is recommended for cleaner and faster code.

Summary

StyleSheet.create organizes styles into named objects for easy reuse.

It improves app performance by creating static style objects.

Use it to keep your UI code clean and your styles easy to manage.