0Pricing
React Academy · Lesson

Styling with StyleSheet API & Flexbox

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

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' },
});

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