Hiển thị ProgressBar trong React Native

Cài đặt

npm install react-native-paper

(Không cần --save-dev vì đây là dependency chạy production)

Import component

import { ProgressBar } from 'react-native-paper';

Cú pháp cơ bản

<ProgressBar progress={0.5} color="#00BCD4" />

Các props chính

Ví dụ: ProgressBar cơ bản

import * as React from 'react';
import { ProgressBar } from 'react-native-paper';

const MyComponent = () => (
  
);

export default MyComponent;

Ví dụ nâng cao: Tự động tăng tiến trình

import * as React from 'react';
import { View, StyleSheet } from 'react-native';
import { ProgressBar, Button } from 'react-native-paper';

const App = () => {
  const [progress, setProgress] = React.useState(0);
  const [loading, setLoading] = React.useState(false);

  const startLoading = () => {
    setLoading(true);
    setProgress(0);
    const interval = setInterval(() => {
      setProgress(p => {
        if (p >= 1) {
          clearInterval(interval);
          setLoading(false);
          return 1;
        }
        return p + 0.1;
      });
    }, 500);
  };

  return (
    
      
      
        Bắt đầu tải
      
    
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', padding: 20 },
});

export default App;

Lưu ý

Giá trị progress nhận từ 0 đến 1 (không phải 0-10 như tài liệu gốc nhầm).
• Kết hợp với indeterminate={true} cho loading không xác định thời gian.
• Để dùng trên iOS, nhớ chạy npx pod-install sau khi cài package.