[React Native] RN - 체크박스(CheckBox) 버튼 구현하기

안녕하세요.

 

이번 시간에는 체크박스 버튼을 구현해 보도록 하겠습니다.

 

설치하기

npm i react-native-bouncy-checkbox --save

 

import

import BouncyCheckbox from "react-native-bouncy-checkbox";

 

사용하기

<BouncyCheckbox
  size={25}
  fillColor="red"
  unfillColor="#FFFFFF"
  text="Custom Checkbox"
  iconStyle={{ borderColor: "red" }}
  textStyle={{ fontFamily: "JosefinSans-Regular" }}
  onPress={(isChecked: boolean) => {}}
/>

 

전체코드

import { StyleSheet, Text, View } from 'react-native'
import React from 'react'
import BouncyCheckbox from "react-native-bouncy-checkbox";

export default function App() {
  return (
    <View style={styles.container}>
      <BouncyCheckbox
        style={styles.checkbox}
        size={25}
        fillColor="red"
        unfillColor="#FFFFFF"
        text="Circle Checkbox"
        iconStyle={{ borderColor: "red" }}
        textStyle={{ fontFamily: "JosefinSans-Regular" }}
        onPress={(isChecked: boolean) => {}}
      />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  checkbox: {
    margin: 10
  }
})

 

결과보기

 

* 사각형 체크박스를 구현하시려면 아래와 같이 아이콘 스타일 borderRadius 추가하시면 됩니다.

iconStyle={{
  borderRadius: 0,
}}

 

더욱 좋은 기능을 사용하시려면 아래 사이트에 접속하시면 됩니다.

https://www.npmjs.com/package/react-native-bouncy-checkbox

react-native-bouncy-checkbox

 

수고하셨습니다.