How to Style in React Native: Syntax, Examples, and Tips

In React Native, you style components using the StyleSheet.create method or inline styles with JavaScript objects. Styles are applied via the style prop, which accepts an object or an array of objects defining layout, colors, fonts, and more.

Syntax

React Native styles are JavaScript objects that define visual properties. You create styles using StyleSheet.create for better performance and readability. Each style is an object with keys as style names and values as style rules.

The style prop on components accepts a style object or an array of style objects to apply multiple styles.

react_native

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

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

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

Output

A full-screen white background with centered blue text saying 'Hello, styled world!'

Example

This example shows how to create and apply styles to a simple screen with a container and text. It demonstrates using StyleSheet.create and the style prop.

react_native

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Welcome to React Native Styling!</Text>
      <Text style={styles.subtitle}>Simple and powerful.</Text>
    </View>
  );
}

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

Output

A gray background screen with centered bold dark text 'Welcome to React Native Styling!' and smaller gray subtitle below it.

Common Pitfalls

Common mistakes when styling in React Native include:

• Using CSS syntax like hyphenated properties (e.g., background-color) instead of camelCase (backgroundColor).
• Passing a string instead of an object to the style prop.
• Not using StyleSheet.create which can hurt performance.
• Forgetting that units like px are not used; numbers are unitless and represent density-independent pixels.

react_native

/* Wrong: Using CSS syntax and string style */
<Text style={{color: 'red', fontSize: 20}}>Wrong Style</Text>

/* Right: Using camelCase and object */
<Text style={{ color: 'red', fontSize: 20 }}>Correct Style</Text>

Output

The first Text will cause an error or no style applied; the second Text will show red text with font size 20.

Quick Reference

Here are some key style properties in React Native:

Property	Description	Example Value
backgroundColor	Sets background color	'#fff' or 'red'
color	Text color	'blue'
fontSize	Text size	16
margin	Outer spacing	10
padding	Inner spacing	8
flex	Flex grow/shrink	1
alignItems	Align children horizontally	'center'
justifyContent	Align children vertically	'space-between'
borderRadius	Rounded corners	5

Key Takeaways

Use StyleSheet.create to define styles as JavaScript objects with camelCase properties.

Apply styles via the style prop, which accepts objects or arrays of objects.

Avoid CSS syntax and units like px; React Native uses unitless numbers for sizes.

Common style properties include backgroundColor, color, fontSize, margin, and flex.

Test styles on different screen sizes to ensure responsive layouts.