React Native uses JavaScript objects for styling — there is no CSS. Layout is powered by Flexbox.

StyleSheet.create

Always use StyleSheet.create for performance and validation:

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

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#ffffff',
    },
    title: {
        fontSize: 24,
        fontWeight: 'bold',
        color: '#333333',
    },
});

<View style={styles.container}>
    <Text style={styles.title}>Styled Text</Text>
</View>

Combining Styles

Pass an array to merge styles (later entries override earlier ones):

  <Text style={[styles.base, styles.bold, isActive && styles.active]}>
    Dynamic styling
</Text>

Flexbox Layout

Flexbox is the primary layout system. Key properties:

  const styles = StyleSheet.create({
    row: {
        flexDirection: 'row',       // horizontal layout
        justifyContent: 'space-between', // main axis alignment
        alignItems: 'center',       // cross axis alignment
    },
    column: {
        flexDirection: 'column',    // vertical (default)
        flex: 1,                    // fill available space
    },
    centered: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
});

Common Layout Patterns

Header + content + footer:

  <View style={{ flex: 1 }}>
    <View style={{ height: 60, backgroundColor: '#007AFF' }} />
    <View style={{ flex: 1, padding: 16 }}>
        <Text>Main content</Text>
    </View>
    <View style={{ height: 50, backgroundColor: '#eee' }} />
</View>

Equal columns:

  <View style={{ flexDirection: 'row' }}>
    <View style={{ flex: 1, backgroundColor: 'red' }} />
    <View style={{ flex: 1, backgroundColor: 'blue' }} />
</View>

Dimensions 

  import { Dimensions } from 'react-native';

const { width, height } = Dimensions.get('window');
const halfWidth = width / 2;

For responsive layouts, prefer Flexbox over fixed pixel values.

Next: navigate between screens with React Navigation.