Reference 02 • Cheat Sheet Dynamic Lists, Forms & Safe Areas Reference

Fast-lookup syntax for SafeAreaView, TextInput, and FlatList in React Native & Expo.

📌 Quick Usage

Keep this reference tab open while coding forms, lists, and screen wrappers.

1. SafeAreaView Setup

import { SafeAreaView } from "react-native-safe-area-context";

export default function Screen() {
  return (
    <SafeAreaView className="flex-1 bg-slate-950 px-4">
      {/* Screen Content Safely Rendered Below Notch */}
    </SafeAreaView>
  );
}

2. TextInput Essential Props Quick Table

Prop Type Example Value Description
value string {text} Binds input to state variable (controlled input pattern).
onChangeText (text: string) => void {setText} Directly receives typed string (no e.target.value needed).
placeholderTextColor string "#64748b" Sets readable placeholder color in dark themes.
keyboardType string "numeric" | "email-address" Configures mobile hardware keyboard layout.
secureTextEntry boolean {true} Masks characters for password input fields.

3. FlatList Core Architecture Quick Table

Prop Required? Example Purpose
data Yes {itemsArray} The source array of data objects.
keyExtractor Yes {(item) => item.id} Extracts unique string key for efficient item reconciliation.
renderItem Yes {({ item, index }) => <Row item={item} />} Returns the JSX component rendered for each visible row.
ListEmptyComponent Optional {<Text>No items found</Text>} Rendered automatically when data.length === 0.
showsVerticalScrollIndicator Optional {false} Hides the default scrollbar for cleaner mobile UI.
← Back to Lesson 02 Lesson 01 →