[React-Native] Checkbox 커스텀하기

expo로 리액트 네이티브 프로젝트를 개발하면서 체크박스 컴포넌트를 만들어야 했다.

하지만 리액트 네이티브 공식문서를 확인해보니 리액트 네이티브의 체크박스는 지원이 종료되었고,

라이브러리로 구현해야 하는데 마침 expo에도 expo-checkbox 라는 라이브러리가 있어서

이걸 사용해서 체크박스를 구현하려고 했다.

그러나 expo-checkbox도 디자인을 완벽하게 마음대로 커스텀 할 수는 없어서, 

결국 완전히 처음부터 만들기로 했다.

 

import { useEffect, useCallback, useState } from 'react';
import { TouchableOpacity, View, Text } from 'react-native';
import Icon from './Icon';
import styles from './styles';

type Props = {
  value: boolean;
  label?: string;
  onValueChange: (value: boolean) => void;
};

const Checkbox = ({ value, label, onValueChange }: Props) => {
  const [checked, setChecked] = useState<boolean>(false);

  const handleToggle = useCallback(() => {
    setChecked(!checked);
    onValueChange(!checked);
  }, [checked, onValueChange]);

  useEffect(() => {
    if (value !== undefined) {
      setChecked(value);
    }
  }, [value]);

  return (
    <TouchableOpacity activeOpacity={1} onPress={handleToggle} style={styles.container}>
      <View style={styles.checkbox}>
        <Icon name={checked ? 'active' : 'default'} width={20} height={20} />
      </View>
      {label && (<Text>{label}</Text>)}
    </TouchableOpacity>
  );
};

export default Checkbox;

 

TouchableOpacity 안에 별도로 만든 아이콘 컴포넌트와 label 역할을 할 Text 컴포넌트를 넣어주었다.

아이콘은 checked 상태에 따라서 체크된 아이콘과 기본 아이콘이 전환되며 나올 수 있도록 했다.

그리고 TouchableOpacity의 onPress 이벤트로 체크박스가 토글되는 것 처럼 구현했다.