Development Fundamentals

This section covers the core development concepts for building React Native applications, including components, styling, layout, and responsive design patterns.

Components and Styling

Core Components

React Native provides platform-specific components that render to native UI elements:

import {
  View, // div equivalent
  Text, // span/p equivalent
  ScrollView, // scrollable container
  FlatList, // performant list
  Image, // img equivalent
  Pressable, // touchable element
  TextInput, // input equivalent
  Switch, // toggle switch
  ActivityIndicator, // loading spinner
} from "react-native"

function BasicComponents() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Welcome to React Native</Text>
      <Image source={{ uri: "https://example.com/image.jpg" }} style={styles.image} />
      <Pressable style={styles.button} onPress={() => console.log("Pressed!")}>
        <Text style={styles.buttonText}>Press Me</Text>
      </Pressable>
    </View>
  )
}

StyleSheet API

React Native uses a JavaScript object-based styling system similar to CSS:

import { StyleSheet, Dimensions } from "react-native"

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#ffffff",
    padding: 16,
  },
  title: {
    fontSize: 24,
    fontWeight: "bold",
    color: "#333333",
    marginBottom: 16,
    textAlign: "center",
  },
  button: {
    backgroundColor: "#007AFF",
    paddingVertical: 12,
    paddingHorizontal: 24,
    borderRadius: 8,
    alignItems: "center",
  },
  buttonText: {
    color: "#ffffff",
    fontSize: 16,
    fontWeight: "600",
  },
  image: {
    width: width - 32, // Full width minus padding
    height: 200,
    borderRadius: 8,
    marginBottom: 16,
  },
})

Styled Components Alternative

For a more CSS-like experience, you can use styled-components:

import styled from "styled-components/native"

const Container = styled.View`
  flex: 1;
  background-color: #ffffff;
  padding: 16px;
`

const Title = styled.Text`
  font-size: 24px;
  font-weight: bold;
  color: #333333;
  margin-bottom: 16px;
  text-align: center;
`

const Button = styled.Pressable`
  background-color: #007aff;
  padding: 12px 24px;
  border-radius: 8px;
  align-items: center;
`

const ButtonText = styled.Text`
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
`

function StyledComponent() {
  return (
    <Container>
      <Title>Styled Components Example</Title>
      <Button onPress={() => console.log("Pressed!")}>
        <ButtonText>Press Me</ButtonText>
      </Button>
    </Container>
  )
}

Layout with Flexbox

React Native uses Flexbox for layout, with some differences from CSS:

Basic Flexbox

const styles = StyleSheet.create({
  // Default flexDirection is 'column' (not 'row' like web)
  container: {
    flex: 1,
    flexDirection: "column", // 'row', 'column', 'row-reverse', 'column-reverse'
    justifyContent: "center", // main axis alignment
    alignItems: "center", // cross axis alignment
  },

  // Flex basis examples
  header: {
    flex: 0, // Fixed size
    height: 60,
  },
  content: {
    flex: 1, // Takes remaining space
  },
  footer: {
    flex: 0,
    height: 80,
  },
})

Common Layout Patterns

// Row layout with space between
const styles = StyleSheet.create({
  row: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    paddingHorizontal: 16,
  },
})

// Centered content
const centerStyles = StyleSheet.create({
  centered: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
})

// Two-column grid
const gridStyles = StyleSheet.create({
  grid: {
    flexDirection: "row",
    flexWrap: "wrap",
    justifyContent: "space-between",
  },
  gridItem: {
    width: "48%", // Slightly less than 50% for gap
    marginBottom: 16,
  },
})

Advanced Layout Example

function ProfileLayout() {
  return (
    <View style={styles.container}>
      {/* Header */}
      <View style={styles.header}>
        <Text style={styles.headerTitle}>Profile</Text>
      </View>

      {/* Content */}
      <ScrollView style={styles.content} contentContainerStyle={styles.scrollContent}>
        {/* Profile Info */}
        <View style={styles.profileSection}>
          <View style={styles.avatarContainer}>
            <Image source={{ uri: "avatar.jpg" }} style={styles.avatar} />
          </View>
          <View style={styles.infoContainer}>
            <Text style={styles.name}>John Doe</Text>
            <Text style={styles.email}>john@example.com</Text>
          </View>
        </View>

        {/* Stats Grid */}
        <View style={styles.statsGrid}>
          <View style={styles.statItem}>
            <Text style={styles.statValue}>42</Text>
            <Text style={styles.statLabel}>Posts</Text>
          </View>
          <View style={styles.statItem}>
            <Text style={styles.statValue}>1.2K</Text>
            <Text style={styles.statLabel}>Followers</Text>
          </View>
          <View style={styles.statItem}>
            <Text style={styles.statValue}>256</Text>
            <Text style={styles.statLabel}>Following</Text>
          </View>
        </View>
      </ScrollView>

      {/* Footer */}
      <View style={styles.footer}>
        <Pressable style={styles.editButton}>
          <Text style={styles.editButtonText}>Edit Profile</Text>
        </Pressable>
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#f5f5f5",
  },
  header: {
    height: 60,
    backgroundColor: "#ffffff",
    justifyContent: "center",
    alignItems: "center",
    borderBottomWidth: 1,
    borderBottomColor: "#e0e0e0",
  },
  headerTitle: {
    fontSize: 18,
    fontWeight: "bold",
  },
  content: {
    flex: 1,
  },
  scrollContent: {
    padding: 16,
  },
  profileSection: {
    flexDirection: "row",
    backgroundColor: "#ffffff",
    padding: 16,
    borderRadius: 8,
    marginBottom: 16,
  },
  avatarContainer: {
    marginRight: 16,
  },
  avatar: {
    width: 60,
    height: 60,
    borderRadius: 30,
  },
  infoContainer: {
    flex: 1,
    justifyContent: "center",
  },
  name: {
    fontSize: 18,
    fontWeight: "bold",
    marginBottom: 4,
  },
  email: {
    fontSize: 14,
    color: "#666666",
  },
  statsGrid: {
    flexDirection: "row",
    backgroundColor: "#ffffff",
    borderRadius: 8,
    padding: 16,
  },
  statItem: {
    flex: 1,
    alignItems: "center",
  },
  statValue: {
    fontSize: 24,
    fontWeight: "bold",
    color: "#007AFF",
  },
  statLabel: {
    fontSize: 12,
    color: "#666666",
    marginTop: 4,
  },
  footer: {
    padding: 16,
    backgroundColor: "#ffffff",
  },
  editButton: {
    backgroundColor: "#007AFF",
    padding: 16,
    borderRadius: 8,
    alignItems: "center",
  },
  editButtonText: {
    color: "#ffffff",
    fontSize: 16,
    fontWeight: "bold",
  },
})

Platform-Specific Styling

Platform Detection

import { Platform } from "react-native"

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: Platform.OS === "ios" ? 44 : 0, // Status bar height
  },

  // Platform-specific styles
  shadow: Platform.select({
    ios: {
      shadowColor: "#000",
      shadowOffset: { width: 0, height: 2 },
      shadowOpacity: 0.25,
      shadowRadius: 3.84,
    },
    android: {
      elevation: 5,
    },
    default: {
      // Fallback for other platforms
      borderWidth: 1,
      borderColor: "#ddd",
    },
  }),

  // Platform version specific
  text: {
    fontSize: Platform.select({
      ios: 16,
      android: Platform.Version >= 21 ? 16 : 14,
    }),
  },
})

Safe Area Handling

import { useSafeAreaInsets } from "react-native-safe-area-context"

function SafeAreaExample() {
  const insets = useSafeAreaInsets()

  return (
    <View
      style={[
        styles.container,
        {
          paddingTop: insets.top,
          paddingBottom: insets.bottom,
          paddingLeft: insets.left,
          paddingRight: insets.right,
        },
      ]}
    >
      <Text>Content respects safe areas</Text>
    </View>
  )
}

Responsive Design

Screen Dimensions

import { Dimensions, useWindowDimensions } from "react-native"

// Static dimensions (doesn't update on rotation)
const { width, height } = Dimensions.get("window")

// Dynamic dimensions (updates on rotation)
function ResponsiveComponent() {
  const { width, height } = useWindowDimensions()

  const isLandscape = width > height
  const isTablet = width > 768

  return (
    <View style={[styles.container, isLandscape && styles.landscape, isTablet && styles.tablet]}>
      <Text>Responsive Content</Text>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
  },
  landscape: {
    flexDirection: "row",
  },
  tablet: {
    maxWidth: 768,
    alignSelf: "center",
  },
})

Responsive Typography

import { PixelRatio } from "react-native"

// Responsive font sizes
function getFontSize(size: number) {
  const scale = width / 375 // Base on iPhone X width
  const newSize = size * scale

  // Ensure minimum readable size
  return Math.max(newSize, size * 0.85)
}

// Or use pixel ratio
function getResponsiveFontSize(size: number) {
  const fontScale = PixelRatio.getFontScale()
  return size / fontScale
}

const responsiveStyles = StyleSheet.create({
  title: {
    fontSize: getFontSize(24),
    fontWeight: "bold",
  },
  body: {
    fontSize: getFontSize(16),
    lineHeight: getFontSize(24),
  },
})

Theming and Dark Mode

Theme Context

import React, { createContext, useContext, useState } from "react"
import { useColorScheme } from "react-native"

interface Theme {
  colors: {
    primary: string
    background: string
    text: string
    border: string
  }
  spacing: {
    xs: number
    sm: number
    md: number
    lg: number
    xl: number
  }
}

const lightTheme: Theme = {
  colors: {
    primary: "#007AFF",
    background: "#FFFFFF",
    text: "#000000",
    border: "#E0E0E0",
  },
  spacing: {
    xs: 4,
    sm: 8,
    md: 16,
    lg: 24,
    xl: 32,
  },
}

const darkTheme: Theme = {
  colors: {
    primary: "#0A84FF",
    background: "#000000",
    text: "#FFFFFF",
    border: "#333333",
  },
  spacing: lightTheme.spacing,
}

const ThemeContext = createContext<{
  theme: Theme
  isDark: boolean
  toggleTheme: () => void
}>({
  theme: lightTheme,
  isDark: false,
  toggleTheme: () => {},
})

export function ThemeProvider({ children }: { children: React.ReactNode }) {
  const systemColorScheme = useColorScheme()
  const [isDark, setIsDark] = useState(systemColorScheme === "dark")

  const theme = isDark ? darkTheme : lightTheme

  const toggleTheme = () => setIsDark(!isDark)

  return <ThemeContext.Provider value={{ theme, isDark, toggleTheme }}>{children}</ThemeContext.Provider>
}

export const useTheme = () => useContext(ThemeContext)

Using Theme in Components

function ThemedButton({ title, onPress }: { title: string; onPress: () => void }) {
  const { theme } = useTheme()

  const styles = StyleSheet.create({
    button: {
      backgroundColor: theme.colors.primary,
      padding: theme.spacing.md,
      borderRadius: 8,
      alignItems: "center",
    },
    text: {
      color: theme.colors.background,
      fontSize: 16,
      fontWeight: "bold",
    },
  })

  return (
    <Pressable style={styles.button} onPress={onPress}>
      <Text style={styles.text}>{title}</Text>
    </Pressable>
  )
}

Performance Optimization

Optimizing StyleSheet

// ✅ Create styles outside component to avoid recreation
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
})

function OptimizedComponent() {
  // ❌ Avoid creating styles inside render
  // const styles = StyleSheet.create({ ... });

  return <View style={styles.container} />
}

// ✅ Use StyleSheet.compose for conditional styles
function ConditionalStyles({ isActive }: { isActive: boolean }) {
  return <View style={StyleSheet.compose(styles.base, isActive && styles.active)} />
}

Image Optimization

import { Image } from "expo-image"

function OptimizedImage() {
  return (
    <Image
      source="https://example.com/image.jpg"
      style={styles.image}
      contentFit="cover"
      transition={200}
      cachePolicy="memory-disk"
      placeholder="https://via.placeholder.com/300x200"
    />
  )
}

Next Steps

Now that you understand development fundamentals, continue with:

• Navigation & Routing - Learn Expo Router and navigation patterns
• State Management - Managing application state
• Platform Integration - Using native device capabilities