Fast-lookup syntax, primitive rules, and NativeWind styling mappings for mobile engineering.
Keep this reference tab open while coding. This document captures the compressed essence of Lesson 01.
| Component | Import From | Web Analogy | Crucial Rules / Gotchas |
|---|---|---|---|
<View> |
react-native |
<div> |
Flex container. Defaults to flex-direction: column. Never put bare text inside. |
<Text> |
react-native |
<span> / <p> |
Mandatory wrapper for any text string. Inherits styles only when nested inside another <Text>. |
<Pressable> |
react-native |
<button> |
Modern touchable primitive. Supports pressed state callback or active: classes. |
<TextInput> |
react-native |
<input> |
Controlled or uncontrolled text entry. Handles keyboard events and placeholder styling. |
<ScrollView> |
react-native |
overflow: auto |
Renders all children at once into memory. Best for short static forms or settings screens. |
<FlatList> |
react-native |
Virtualized List | Recycles native views off-screen for memory efficiency. Mandatory for long/dynamic lists. |
<SafeAreaView> |
react-native-safe-area-context |
Safe Inset Box | Prevents UI from getting covered by notches, dynamic islands, home indicator bars, or punch holes. |
| Property | Native Default | Web Default | Key Difference |
|---|---|---|---|
flexDirection |
column (vertical) |
row (horizontal) |
Phones are vertical by default; children stack top-to-bottom. |
flex |
0 (content-sized) |
0 1 auto |
flex-1 expands component to fill all available parent space. |
alignItems |
stretch |
stretch |
Cross-axis alignment (e.g. items-center centers horizontally when column). |
justifyContent |
flex-start |
flex-start |
Main-axis alignment (e.g. justify-center centers vertically when column). |
Dimensions |
Unitless DP / Points | px / rem / % |
Density-independent pixels automatically scale across iPhone Retina and Android HD displays. |
| Category | NativeWind Class | React Native Style Equivalent |
|---|---|---|
| Layout | flex-1, flex-row, items-center, justify-between, gap-4 |
flex: 1, flexDirection: 'row', gap: 16 |
| Spacing | p-4, px-6, py-3, m-2, mb-6 |
padding: 16, paddingHorizontal: 24, marginBottom: 24 |
| Colors | bg-slate-950, bg-indigo-600, text-white, text-slate-400 |
backgroundColor: '#020617', color: '#ffffff' |
| Borders | border, border-slate-800, rounded-2xl, rounded-full |
borderWidth: 1, borderRadius: 16 |
| Interactive | active:bg-indigo-700, active:opacity-80 |
Applied dynamically on press state without writing manual JS state |