1. Giới thiệu

React Native cung cấp một tập hợp các UI Component nền tảng giúp bạn xây dựng giao diện mobile cho cả iOS và Android chỉ với JavaScript.

Nếu bạn mới bắt đầu với React Native, hoặc đang muốn hệ thống lại kiến thức, việc nắm rõ các component phổ biến là bước bắt buộc để làm chủ UI và tối ưu trải nghiệm người dùng.

Trong bài viết này, chúng ta sẽ cùng điểm qua những UI Component được sử dụng nhiều nhất trong React Native, kèm theo ví dụ và lưu ý khi sử dụng.

2. View – Nền tảng của mọi layout

View là component cơ bản nhất, tương đương với div trong web.

Khi dùng View:

  • Làm container bọc các component khác

  • Tạo layout bằng Flexbox

  • Chia section trong màn hình

import { View } from 'react-native';

<View style={{ padding: 16 }}>
  {/* Content */}
</View>

Lưu ý:

  • React Native chỉ hỗ trợ Flexbox, không có CSS Grid

  • Mặc định flexDirection là column

3. Text – Hiển thị nội dung chữ

Mọi nội dung text trong React Native bắt buộc phải nằm trong Text.

import { Text } from 'react-native';

<Text style={{ fontSize: 16 }}>
  Xin chào React Native
</Text>

Điểm quan trọng:

  • Text có thể lồng Text

  • Style không kế thừa như CSS web

4. Image – Hiển thị hình ảnh

React Native hỗ trợ ảnh local và ảnh từ URL.

import { Image } from 'react-native';

<Image
  source={{ uri: 'https://example.com/image.png' }}
  style={{ width: 100, height: 100 }}
/>

Best practice:

  • Luôn set width và height

  • Dùng resizeMode để kiểm soát hiển thị

5. ScrollView – Nội dung có thể cuộn

Dùng khi nội dung không quá lớn.

import { ScrollView } from 'react-native';

<ScrollView>
  {/* Nội dung dài */}
</ScrollView>

Không nên dùng ScrollView khi:

  • Danh sách lớn

  • Dữ liệu động nhiều item

6. FlatList – Danh sách hiệu năng cao

FlatList là component bắt buộc phải biết khi làm app thực tế.

import { FlatList, Text } from 'react-native';

<FlatList
  data={data}
  keyExtractor={(item) => item.id}
  renderItem={({ item }) => <Text>{item.title}</Text>}
/>

Ưu điểm:

  • Render lazy

  • Tối ưu bộ nhớ

  • Hỗ trợ pull-to-refresh, infinite scroll

7. Pressable / Touchable – Xử lý tương tác

React Native cung cấp nhiều cách xử lý click/touch:

  • Pressable (khuyến nghị)

  • TouchableOpacity

  • TouchableWithoutFeedback

import { Pressable, Text } from 'react-native';

<Pressable onPress={() => console.log('Pressed')}>
  <Text>Nhấn vào đây</Text>
</Pressable>

Khuyến nghị:

  • Ưu tiên Pressable cho project mới

  • Dễ custom trạng thái pressed, hovered

8. TextInput – Nhập liệu từ người dùng

import { TextInput } from 'react-native';

<TextInput
  placeholder="Nhập email"
  value={email}
  onChangeText={setEmail}
/>

Lưu ý quan trọng:

  • Quản lý state cẩn thận để tránh re-render nhiều

  • Xử lý keyboard che input (KeyboardAvoidingView)

9. SafeAreaView – Tránh tai thỏ và notch

Đảm bảo UI không bị che trên iPhone và thiết bị đặc biệt.

import { SafeAreaView } from 'react-native';

<SafeAreaView style={{ flex: 1 }}>
  {/* Nội dung */}
</SafeAreaView>

10. Modal – Hiển thị popup

import { Modal, View, Text } from 'react-native';

<Modal visible={visible} transparent>
  <View>
    <Text>Modal content</Text>
  </View>
</Modal>

Tip:

  • Kết hợp với animation

  • Cẩn thận với nested modal

11. ActivityIndicator – Loading UI

import { ActivityIndicator } from 'react-native';

<ActivityIndicator size="large" />

12. Khi nào nên dùng thư viện UI ngoài?

React Native core chỉ cung cấp building block, không phải UI đẹp sẵn.

Bạn nên cân nhắc:

  • React Native Paper

  • NativeBase

  • Tamagui

Khi nào dùng?

  • App cần build nhanh

  • Có design system rõ ràng

  • Ít custom native

13. Kết luận

Nắm vững các UI Component cơ bản là nền tảng để:

  • Viết code React Native sạch hơn

  • Tối ưu hiệu năng

  • Dễ mở rộng và bảo trì

Nếu bạn hiểu rõ View, Text, FlatList và Pressable, bạn đã đi được 60–70% chặng đường React Native rồi.