[React Native] 진행바(Progress Bar) 만들기

위와 같이 진행률을 나타내는 막대를 진행바라고 한다. 보통은 HTML과 JS를 가지고 만들었는데, react-native에서 쉽게 사용할 수 있는 라이브러리가 있어서 사용해봤다.

 

https://github.com/oblador/react-native-progress

GitHub - oblador/react-native-progress: Progress indicators and spinners for React Native

 

1. 라이브러리 다운받기

npm install react-native-progress --save

콘솔에 명령어를 입력해 다운받는다.

 

2. import해서 사용하기.

import * as Progress from 'react-native-progress';

<Progress.Bar progress={0.3} width={200} />
<Progress.Pie progress={0.4} size={50} />
<Progress.Circle size={30} indeterminate={true} />
<Progress.CircleSnail color={['red', 'green', 'blue']} />

위의 예시와 같이 Bar, Pie, Circle, CircleSnail 네 가지 형태의 진행바를 모두 사용할 수 있다.

 

생각보다 세세하게 바꿀 수 있다.

공통 props 목록은 아래와 같다.

Bar는 추가적으로 아래의 props를 가진다.

Progress를 사용해 만든 ProgressBar.js 파일을 아래와 같이 작성했다.

import React from "react";
import styled from "styled-components/native";
import * as Progress from "react-native-progress";
 
const BarView = styled.View`
  width: 100%;
  padding: 0 15px;
  flex-direction: row;
  margin-top: 20px;
`;
 
const Bar = styled.View`
  margin: 10px 0;
  flex: 1;
`;
 
const BarText = styled.Text`
  width: 40px;
  text-align: center;
  font-size: 15px;
  font-family: ${({ theme }) => theme.fontSub};
  padding: 3px 0 0 5px;
`;
 
const ProgressBar = ({ tasks }) => {
  const tasksValue = Object.values(tasks);
  const length = tasksValue.length;
  const completed = tasksValue.filter((task) => task.completed === true).length;
  return (
    <BarView>
      <Bar>
        <Progress.Bar
          progress={completed / length}
          width={null}
          height={8}
          color={"rgba(51, 65, 159, 0.8)"}
        />
      </Bar>
      <BarText>
        {completed}/{length}
      </BarText>
    </BarView>
  );
};
 
export default ProgressBar;

progress를 {completed / length} 로 설정해 진행률을 자동으로 계산해서 표시하도록 작성했다.

 

실제 작동 화면

리스트에 변화가 있을 때 마다 bar, 숫자표시 모두 잘 변경되는 것을 확인할 수 있다.

 

 

(2/15 덧붙임) 위와 같이 설정하면 할 일의 개수가 0이 되었을 때 분모가 0이 되어 오류가 나타난다.

length 가 0인지 확인하고, progress를 설정하도록 한다.

const ProgressBar = ({tasks}) => {
  // ...
  let progress = 0
  // 분모가 0이 되지 않도록 체크
  if (length !== 0) {
    progress = completed / length
  }
 
  return (
    // ...
    <Progress.Bar progress={progress} />
  )
}

 

참고한 사이트

https://github.com/oblador/react-native-progress

GitHub - oblador/react-native-progress: Progress indicators and spinners for React Native