React Native Module 3: Styling and Layout | Complete Guide

Module 3: Styling and Layout

Course Overview: In this module, you will learn how to style and layout React Native apps. We will cover the StyleSheet API, Flexbox for responsive layouts, and techniques to make your UI adaptive for different screen sizes and orientations.

✅ Using StyleSheet for Styling

React Native uses the StyleSheet API to define component styles. Styles are written as JavaScript objects rather than traditional CSS.

Example:

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

const StyledComponent = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.heading}>Welcome to React Native</Text>
      <Text style={styles.paragraph}>Styling in React Native is done via StyleSheet objects.</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#f5f5f5'
  },
  heading: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#007bff',
    marginBottom: 10
  },
  paragraph: {
    fontSize: 16,
    color: '#333'
  }
});

export default StyledComponent;

Tips:

• Always define reusable styles in StyleSheet.create.
• Use camelCase instead of kebab-case for property names.
• StyleSheet improves performance compared to inline styles.

✅ Flexbox for Layout Design

React Native uses Flexbox to design layouts. Flexbox allows you to create flexible and responsive UI elements.

Key Flexbox properties:

• flexDirection: ‘row’ or ‘column’ (default column)
• justifyContent: alignment along main axis (flex-start, center, space-between, etc.)
• alignItems: alignment along cross axis (flex-start, center, stretch, etc.)
• flex: defines how much space a component should take relative to siblings

Example of Flexbox layout:

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

const FlexLayout = () => {
  return (
    <View style={styles.container}>
      <View style={styles.box}><Text>Box 1</Text></View>
      <View style={styles.box}><Text>Box 2</Text></View>
      <View style={styles.box}><Text>Box 3</Text></View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
    padding: 20
  },
  box: {
    width: 80,
    height: 80,
    backgroundColor: '#007bff',
    justifyContent: 'center',
    alignItems: 'center'
  }
});

export default FlexLayout;

This creates three evenly spaced boxes aligned horizontally, demonstrating flexDirection, justifyContent, and alignItems.

✅ Responsive Design Techniques

Mobile screens vary widely. React Native offers tools to build adaptive layouts:

• Dimensions API: Get device width and height.
• Percentage-based width/height: Use width: '80%' for relative sizing.
• AspectRatio: Maintain consistent shape for components.

Example:

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

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

const ResponsiveBox = () => {
  return (
    <View style={styles.container}>
      <View style={styles.box}>
        <Text>Width: {width} Height: {height}</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  box: {
    width: '80%',
    height: 200,
    backgroundColor: '#28a745',
    justifyContent: 'center',
    alignItems: 'center'
  }
});

export default ResponsiveBox;

Additional tips:

• Combine Flexbox with percentages for truly responsive layouts.
• Use SafeAreaView to respect notches and status bars.
• Test your UI on multiple screen sizes or simulators.

✅ Summary

Module 3 equips you with:

• Styling techniques using StyleSheet and inline styles.
• Flexbox layout principles for responsive designs.
• Responsive design strategies using dimensions, percentages, and aspectRatio.
• Practical examples and reusable components for building real-world apps.

Mastering styling and layout ensures your React Native apps look great across all devices.