React NativeRN tính layout bằng Yoga (engine C++ của Meta). Flexbox chạy gần giống web nhưng giá trị mặc định khác — đây là chỗ dev web hay vấp:
| React Native | Web CSS | |
|---|---|---|
flexDirection | column | row |
flexShrink | 0 | 1 |
alignContent | flex-start | stretch |
flex | chỉ nhận một số | shorthand grow shrink basis |
display | flex / none (thêm contents từ RN 0.77) | block, inline, grid... |
Hệ quả thực tế:
- <View> xếp con theo chiều dọc mặc định.
- Vì flexShrink: 0, nội dung dài (ví dụ Text trong một hàng ngang) sẽ tràn ra ngoài thay vì co lại — thêm flexShrink: 1 hoặc flex: 1 cho phần tử đó.
- flex: 1 nghĩa là chiếm phần không gian còn lại theo tỉ lệ với các phần tử anh em.
- Mọi View mặc định position: 'relative', nên position: 'absolute' định vị theo cha trực tiếp. New Architecture có thêm position: 'static' để hành xử giống web.
- gap/rowGap/columnGap có từ RN 0.71.
- Không có float và CSS Grid; kích thước là số (density-independent pixel) hoặc %, không có rem/vh.
Lưu ý: style không cascade như CSS — con không kế thừa style của cha, trừ Text lồng trong Text (kế thừa font, màu). Muốn đặt font chung cho cả app, bọc một component Text riêng.