90 — Bảng ánh xạ Flutter → React Native (tra cứu nhanh)

Dành cho lúc bạn "biết làm gì bên Flutter" nhưng chưa biết "gọi gì bên RN".

Ngôn ngữ & công cụ

Flutter / Dart	React Native / TS	Ghi chú
`final x = ...`	`const x = ...`	bất biến mặc định
`var x = ...`	`let x = ...`	có thể gán lại
`List<T>`	`T[]` hoặc `Array<T>`
`Map<K,V>`	`Record<K,V>` / object / `Map`
`Future<T>`	`Promise<T>`
`async`/`await`	`async`/`await`	gần như giống hệt
`Stream<T>`	Observable/RxJS, hoặc event emitter	không built-in như Dart
`typedef` / `class`	`type` / `interface` / `class`
`??`, `?.`	`??`, `?.`	giống nhau
`pubspec.yaml`	`package.json`
`flutter pub get`	`npm install`
`flutter pub add x`	`npm install x`
`flutter run`	`npm run ios` / `npm run android`
`flutter build apk`	`cd android && ./gradlew assembleRelease`
Hot Reload	Fast Refresh
DevTools	React DevTools / Flipper

Flutter	React Native
`StatelessWidget`	function component
`StatefulWidget` + `setState`	function component + `useState`
`build(context)`	`return (<JSX/>)`
`Container`	`<View style={...}>`
`Column`	`<View>` (flexDirection: 'column' — mặc định)
`Row`	`<View style={{ flexDirection: 'row' }}>`
`Text`	`<Text>`
`Image.network`	`<Image source={{ uri }} />`
`Image.asset`	`<Image source={require('./img.png')} />`
`Icon`	`react-native-vector-icons` / thư viện icon
`ElevatedButton`	`<Button>` / `<Pressable>`
`GestureDetector` / `InkWell`	`<Pressable>`
`TextField`	`<TextInput>` (controlled)
`ListView`	`<ScrollView>`
`ListView.builder`	`<FlatList>`
`GridView`	`<FlatList numColumns={n}>`
`SingleChildScrollView`	`<ScrollView>`
`Stack` / `Positioned`	`<View>` + `position: 'absolute'`
`SafeArea`	`<SafeAreaView>` / `useSafeAreaInsets`
`Expanded` / `Flexible`	`style={{ flex: 1 }}`
`Padding`	`style={{ padding }}`
`SizedBox(height: 8)`	`<View style={{ height: 8 }}>` hoặc `gap`
`Spacer`	`<View style={{ flex: 1 }} />`
`CircularProgressIndicator`	`<ActivityIndicator />`
`AlertDialog`	`Alert.alert(...)` / thư viện modal
`SnackBar`	thư viện (react-native-toast-message...)
`RefreshIndicator`	`FlatList` `onRefresh`/`refreshing`
`Visibility`	render có điều kiện `{cond && <X/>}`
`Theme.of(context)`	`useContext(ThemeContext)` / `useColorScheme()`
`MediaQuery`	`useWindowDimensions()` / `Dimensions`

Flutter	React Native
`mainAxisAlignment`	`justifyContent`
`crossAxisAlignment`	`alignItems`
`MainAxisAlignment.spaceBetween`	`justifyContent: 'space-between'`
`EdgeInsets.all(16)`	`padding: 16`
`EdgeInsets.symmetric(h, v)`	`paddingHorizontal` / `paddingVertical`
`BoxDecoration(borderRadius, color)`	`borderRadius`, `backgroundColor` trong style
`BoxShadow`	`shadowColor/Offset/Opacity/Radius` (iOS) + `elevation` (Android)
`Color(0xFF...)`	`'#RRGGBB'` / `'rgba(...)'`
`TextStyle(fontSize, fontWeight)`	`fontSize`, `fontWeight: '600'`

Flutter	React Native
`setState`	`useState`
`initState`	`useEffect(() => {...}, [])`
`dispose`	hàm cleanup trả về trong `useEffect`
`didChangeDependencies`	`useEffect` với dependency
`Provider` / `ChangeNotifier`	Context API
`Riverpod`	Zustand / Jotai
`Bloc` / `Cubit`	Redux Toolkit
`GetIt` (DI)	Context / thư viện DI
`GlobalKey`	`useRef`
`Navigator.push`	`navigation.navigate(...)`
`Navigator.pop`	`navigation.goBack()`
named routes	React Navigation screens
`platform channels`	Native Modules / TurboModules

Mọi chữ phải bọc trong <Text> — không thể để text trần trong <View>.
flexDirection mặc định column (không phải row như CSS web).
Không sửa state trực tiếp — luôn tạo object/array mới rồi setState.
Không có widget catalog dựng sẵn nhiều như Flutter — nhiều thứ (icon, toast, date picker) phải cài thư viện.
Style không cascade/inherit như CSS — trừ một số thuộc tính text.
Không có const widget optimization — thay vào đó dùng React.memo, useMemo, useCallback.
JSX chỉ trả về 1 gốc — dùng Fragment <>...</>.
Debug native đôi khi cần biết chút Xcode/Android Studio (giống Flutter thôi).