React Native Styling Basics

React Native uses JavaScript objects to style components. There are no CSS files. Instead, you write styles as key-value pairs inside JavaScript. The property names look familiar — most of them come directly from CSS — but they use camelCase instead of hyphens.

CSS vs React Native Styling

CSS (Web)                    React Native (Mobile)
─────────────────────────────────────────────────
background-color: blue;  →  backgroundColor: 'blue'
font-size: 16px;         →  fontSize: 16
border-radius: 8px;      →  borderRadius: 8
padding-top: 10px;       →  paddingTop: 10
margin-left: 20px;       →  marginLeft: 20

React Native drops the unit labels like px and em. All numbers are in density-independent pixels (dp), which automatically scale to the correct physical size on different screen densities.

Inline Styles

The quickest way to style a component is to pass a JavaScript object directly to the style prop.

<Text style={{ fontSize: 18, color: '#333', fontWeight: 'bold' }}>
  Hello
</Text>

The double curly braces are not a special syntax — the outer { } tells JSX "this is a JavaScript expression", and the inner { } is the JavaScript object containing your styles.

StyleSheet — The Better Way

Inline styles work but they clutter your JSX and run slightly slower. StyleSheet.create lets you define all your styles in one place and gives your code a clean, organised structure.

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

export default function ProfileCard() {
  return (
    <View style={styles.card}>
      <Text style={styles.name}>Jane Doe</Text>
      <Text style={styles.role}>Developer</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  card: {
    backgroundColor: '#ffffff',
    padding: 20,
    borderRadius: 12,
    shadowColor: '#000',
    shadowOpacity: 0.1,
    shadowRadius: 6,
    elevation: 4,       // Android shadow
  },
  name: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#111',
  },
  role: {
    fontSize: 14,
    color: '#666',
    marginTop: 4,
  },
});

┌───────────────────────────────┐
│  Jane Doe          ← styles.name (bold, 20px)
│  Developer         ← styles.role (grey, 14px)
└───────────────────────────────┘
       ↑ styles.card (white bg, rounded corners, shadow)

Common Styling Properties

Colors

React Native accepts colors as named strings, hex codes, RGB values, and RGBA values.

backgroundColor: 'red'          // named color
backgroundColor: '#FF5733'      // hex
backgroundColor: 'rgb(255, 87, 51)'   // RGB
backgroundColor: 'rgba(255, 87, 51, 0.5)'  // RGBA (50% transparent)

Text Styles

fontSize: 16          // text size
fontWeight: 'bold'    // 'normal', 'bold', '100' to '900'
fontStyle: 'italic'   // 'normal' or 'italic'
textAlign: 'center'   // 'left', 'center', 'right'
color: '#333333'      // text color
letterSpacing: 1      // space between letters
lineHeight: 24        // height of each text line

Spacing — Padding and Margin

Padding adds space inside a component. Margin adds space outside a component.

┌─────────────────────────────────────┐
│  MARGIN (space outside the box)     │
│  ┌───────────────────────────────┐  │
│  │  PADDING (space inside box)   │  │
│  │  ┌─────────────────────────┐  │  │
│  │  │      CONTENT            │  │  │
│  │  └─────────────────────────┘  │  │
│  └───────────────────────────────┘  │
└─────────────────────────────────────┘

padding: 16           // all four sides
paddingHorizontal: 20 // left + right only
paddingVertical: 10   // top + bottom only
paddingTop: 8         // top only
margin: 16            // all four sides
marginBottom: 24      // bottom only

Dimensions

width: 200            // fixed width
height: 100           // fixed height
width: '100%'         // full width of parent
flex: 1               // take remaining space (like CSS flex-grow)

Borders

borderWidth: 1              // all sides
borderColor: '#cccccc'      // border color
borderRadius: 8             // rounded corners
borderTopWidth: 2           // top border only
borderBottomLeftRadius: 16  // bottom-left corner only

Shadow (iOS)

shadowColor: '#000000'
shadowOffset: { width: 0, height: 2 }
shadowOpacity: 0.15
shadowRadius: 4

Shadow (Android)

elevation: 4    // Android uses elevation instead of shadow props

To support both platforms, include both shadow props (iOS) and elevation (Android) in your card styles.

Combining Multiple Styles

Pass an array of style objects to the style prop to combine multiple styles. Later items in the array override earlier ones for any conflicting property.

const styles = StyleSheet.create({
  base: { padding: 12, borderRadius: 8 },
  primary: { backgroundColor: '#007AFF' },
  secondary: { backgroundColor: '#6c757d' },
});

{/* Combines base + primary */}
<View style={[styles.base, styles.primary]}>
  <Text>Primary Button</Text>
</View>

{/* Combines base + secondary */}
<View style={[styles.base, styles.secondary]}>
  <Text>Secondary Button</Text>
</View>

Platform-Specific Styling

Sometimes iOS and Android need different values. The Platform API lets you check the current platform and apply the right style.

import { Platform, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    paddingTop: Platform.OS === 'ios' ? 44 : 24,
    // iOS needs extra top padding for the notch area
  },
});

Summary

React Native styling uses JavaScript objects with camelCase property names. StyleSheet.create keeps styles organized and slightly improves performance. You control spacing with padding and margin, shape with borderRadius, and depth with shadow or elevation. Arrays of styles let you mix and override style rules cleanly.