React Native Basics›Core· 35 min read

Styling: StyleSheet vs CSS

No CSS files here — you style with plain JavaScript objects, using camelCase property names.

What you will learn

Write styles as JavaScript objects
Use StyleSheet.create to organise them
Map CSS names to React Native names

Styles are objects, not CSS

In React Native there are no .css files. You write styles as JavaScript objects and pass them to a component’s style prop. Property names are camelCase and most values are numbers (no px).

CSS (web)	React Native
`background-color: blue;`	`backgroundColor: 'blue'`
`font-size: 20px;`	`fontSize: 20`
`padding: 16px;`	`padding: 16`
`border-radius: 8px;`	`borderRadius: 8`
`margin-top: 10px;`	`marginTop: 10`

StyleSheet keeps it tidy

You can write styles inline, but it gets messy fast. StyleSheet.create lets you name your styles in one place and reuse them — like a small stylesheet living inside your component file.

StyleSheet.create names reusable style objects

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

export default function App() {
  return (
    <View style={styles.card}>
      <Text style={styles.title}>Welcome back!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  card: { backgroundColor: '#1e90ff', padding: 16, borderRadius: 8 },
  title: { color: 'white', fontSize: 20, fontWeight: 'bold' },
});

Note: Output: A blue rounded box with white bold text: Welcome back! The card style colours and rounds the box; the title style makes the text white, large and bold.

Tip: You can combine styles by passing an array: style={[styles.title, { color: 'red' }]}. The later items win, so you can override one property without rewriting the whole style.

Watch out: Watch the small differences: names are camelCase (backgroundColor, not background-color), string values need quotes, and there is no px — you just write the number.

Q. How do you write the CSS property font-size: 18px in React Native?

Answer: React Native uses camelCase names and plain numbers (no px): fontSize: 18.

✍️ Practice

Rewrite three CSS rules you know as React Native style objects.
Make a StyleSheet with a box style (padding, background colour, rounded corners) and apply it to a View.

🏠 Homework

Style the profile card from the last lesson: give it padding, a background colour, rounded corners and bold name text.