0Pricing
React Academy · Lesson

Styling with StyleSheet API & Flexbox

Write mobile styles using StyleSheet.create and Flexbox without CSS class names.

Styling with StyleSheet API & Flexbox is a free React Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

No CSS in React Native

React Native uses a JavaScript styling API — no CSS files, no class names, no cascading. Styles are JavaScript objects applied via the style prop.

StyleSheet.create()

Wrap style objects in StyleSheet.create() for better performance (styles are validated and optimized once) and IDE autocomplete.

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

function Card() {
  return (
    <View style={styles.card}>
      <Text style={styles.title}>Hello</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  card: { padding: 16, backgroundColor: '#fff', borderRadius: 8, shadowColor: '#000', shadowOpacity: 0.1, elevation: 2 },
  title: { fontSize: 18, fontWeight: 'bold', color: '#111' },
});

Inline Styles

Apply styles directly via the style prop. Array syntax merges multiple style objects — later styles override earlier ones.

<View style={{ padding: 16, backgroundColor: '#f5f5f5' }} />

// Array merging:
<Text style={[styles.base, isActive && styles.active, { marginTop: 8 }]} />

Flexbox in React Native

React Native uses Flexbox by default for layout, but with different defaults than the web: flexDirection defaults to 'column' (not 'row'), and flex: 1 fills available space.

const styles = StyleSheet.create({
  container: {
    flex: 1,                   // fill available space
    flexDirection: 'column',   // default in RN (web default is 'row')
    justifyContent: 'center',  // main axis alignment
    alignItems: 'center',      // cross axis alignment
  },
});

Row Layout

Use flexDirection: 'row' to lay children out horizontally, mimicking CSS display: flex; flex-direction: row.

const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 12, // gap is supported in RN 0.71+
  },
});

<View style={styles.row}>
  <Image source={avatar} />
  <Text>{username}</Text>
</View>

flex vs width/height

Use flex: N for proportional sizing. flex: 1 fills all remaining space; flex: 2 gets double the space of flex: 1 siblings.

// Sidebar takes 1/3, content takes 2/3:
<View style={{ flexDirection: 'row', flex: 1 }}>
  <View style={{ flex: 1, backgroundColor: '#eee' }}>Sidebar</View>
  <View style={{ flex: 2 }}>Content</View>
</View>

Absolute Positioning

Use position: 'absolute' with top, right, bottom, left for overlay elements — identical to CSS absolute positioning within a relative parent.

const badge = StyleSheet.create({
  badge: {
    position: 'absolute',
    top: -4,
    right: -4,
    width: 16,
    height: 16,
    borderRadius: 8,
    backgroundColor: 'red',
  },
});

Platform-Specific Styles

Use Platform.OS or Platform.select() to apply different styles on iOS and Android.

import { Platform } from 'react-native';

const styles = StyleSheet.create({
  shadow: {
    ...Platform.select({
      ios: { shadowColor: '#000', shadowOpacity: 0.2, shadowRadius: 4 },
      android: { elevation: 4 },
    }),
  },
});

Colors

React Native accepts CSS color strings (hex, rgb, named) and the PlatformColor API for system colors.

import { PlatformColor } from 'react-native';

// System color — adapts to dark mode automatically:
const labelColor = PlatformColor('label', '#000'); // iOS 'label' semantic color

Dynamic Styles with Props

Compute styles from props inside the component. Pass a function to StyleSheet or compute the style object inline.

function Badge({ color, size = 16 }: { color: string; size?: number }) {
  return (
    <View
      style={[
        styles.badge,
        { backgroundColor: color, width: size, height: size, borderRadius: size / 2 },
      ]}
    />
  );
}

const styles = StyleSheet.create({ badge: { position: 'absolute' } });

Quick Check

What is the default flexDirection in React Native (different from the web)?

Recap

Use StyleSheet.create() for optimized styles and apply them via the style prop. React Native Flexbox defaults to flexDirection: 'column' and flex: 1 fills remaining space. Use Platform.select() for OS-specific shadow styles.

Frequently asked questions

Is the “Styling with StyleSheet API & Flexbox” lesson free?

Yes — the full text of “Styling with StyleSheet API & Flexbox” is free to read here on the web, and the React Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.

What will I learn in “Styling with StyleSheet API & Flexbox”?

Write mobile styles using StyleSheet.create and Flexbox without CSS class names. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start React Academy?

No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Styling with StyleSheet API & Flexbox” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this React Academy lesson?

Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. React Native Core Components vs Web DOM
  2. Styling with StyleSheet API & Flexbox
  3. Navigation with Expo Router
  4. Accessing Device APIs: Camera, Location & Push Notifications
← Back to React Academy