체크박스/FlmCheckBox

1.react-native-freelifemakers-ui NPM 모듈 설치하기 / react-native-freelifemakers-ui NPM Module Instal

npm install react-native-freelifemakers-ui

2.사용하기 / Usage

import {FlmCheckBox, FlmText} from 'react-native-freelifemakers-ui';

— 두 개의 라디오 버튼을 사용하는 기본 코드는 아래와 같이 작성합니다.
The basic code using two checkbox buttons is written as follows:

          <FlmCheckBox
            options={[
              {label: '가족/family', value: 'family'},
              {label: '코메디/comedy', value: 'drama'},
            ]}
            initialValues={['family']}
            direction="vertical"
            onValueChange={setSelectedMovieTypes}
          />

3.예제코드 / Example code
-아래는 Expo에서 실행가능한 코드 예제 입니다.
Below is an example of code that can be run on Expo.

import React, {useState} from 'react';
import {View, Text, StyleSheet, ScrollView, SafeAreaView} from 'react-native';
import {FlmText, FlmCheckBox} from 'react-native-freelifemakers-ui';

export default function App() {
  const [selectedMovieTypes, setSelectedMovieTypes] = useState(['family']); // default
  const [selectedFruitTypes, setSelectedFruitTypes] = useState(['apple']); // horizaontal
  const [selectedInterests, setSelectedInterests] = useState(['sports']); // custom

  const interestOptions = [
    {label: '스포츠/sports', value: 'sports'},
    {label: '음악/music', value: 'music'},
    {label: '여행/travel', value: 'travel', disabled: true},
  ];

  return (
    <SafeAreaView style={appStyles.safeArea}>
      <ScrollView style={appStyles.scrollViewContent}>
        <View style={appStyles.section}>
          {/* Default */}
          <FlmText style={appStyles.header}>
            1.기본 / Default - 관심사 선택 / Select Interests
          </FlmText>

          <FlmCheckBox
            options={[
              {label: '가족/family', value: 'family'},
              {label: '코메디/comedy', value: 'drama'},
            ]}
            initialValues={['family']}
            direction="vertical"
            onValueChange={setSelectedMovieTypes}
          />

          <FlmText style={appStyles.header}>
            선택된 관심사 / Selected Interests:{' '}
            {selectedMovieTypes.length > 0
              ? selectedMovieTypes.join(', ')
              : '없음'}
          </FlmText>

          {/* Horizontal */}
          <FlmText style={appStyles.header}>
            2.가로형 / Horizontal - 과일 선택 / Select Fruits
          </FlmText>

          <FlmCheckBox
            options={[
              {label: '사과/apple', value: 'apple'},
              {label: '오렌지/orange', value: 'orange'},
            ]}
            initialValues={['apple']}
            direction="horizontal"
            onValueChange={setSelectedFruitTypes}
          />

          <FlmText style={appStyles.header}>
            선택된 과일 / Selected FruitTypes:{' '}
            {selectedFruitTypes.length > 0
              ? selectedFruitTypes.join(', ')
              : '없음'}
          </FlmText>

          {/* Custom */}
          <FlmText style={appStyles.header}>
            3.사용자 정의 / Custom - 관심사 선택 / Select Interests
          </FlmText>

          <FlmCheckBox
            label="관심 있는 항목을 모두 선택하세요\Select all items you are interested in:"
            options={interestOptions}
            initialValues={['sports']}
            onValueChange={setSelectedInterests}
            direction="vertical"
            checkBoxGroupStyle={appStyles.customCheckBoxGroup}
            checkBoxOptionStyle={appStyles.customCheckBoxOption}
            checkBoxSquareWrapperStyle={appStyles.customSquareWrapper}
            checkBoxSquareStyle={appStyles.customSquare}
            checkBoxCheckedStyle={appStyles.customCheckedSquare}
            checkBoxLabelStyle={appStyles.customLabel}
            checkBoxCheckedLabelStyle={appStyles.customCheckedLabel}
          />

          <FlmText style={appStyles.header}>
            선택된 관심사 / Selected Interests:{' '}
            {selectedInterests.length > 0
              ? selectedInterests.join(', ')
              : '없음'}
          </FlmText>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const appStyles = StyleSheet.create({
  safeArea: {
    flex: 1,
    backgroundColor: '#f9f9f9',
  },
  scrollViewContent: {
    padding: 20,
  },
  section: {
    marginBottom: 30,
    padding: 15,
    backgroundColor: '#fff',
    borderRadius: 8,
    shadowColor: '#000',
    shadowOffset: {width: 0, height: 1},
    shadowOpacity: 0.1,
    shadowRadius: 2,
    elevation: 2,
  },
  header: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 15,
    color: '#333',
    textAlign: 'center',
  },

  // Flm체크박스 스타일 / FlmCheckBox style
  customCheckBoxGroup: {
    marginVertical: 10,
  },
  customCheckBoxOption: {
    backgroundColor: '#FFD580', // orange
    borderRadius: 10,
    paddingVertical: 10,
    paddingHorizontal: 15,
    marginVertical: 5,
  },
  customSquareWrapper: {
    borderColor: '#FFA500', // orange
    backgroundColor: '#fff',
  },
  customSquare: {
    backgroundColor: 'transparent',
  },
  customCheckedSquare: {
    backgroundColor: '#FFA500', // orange
  },
  customLabel: {
    color: '#333',
    fontSize: 15,
  },
  customCheckedLabel: {
    color: '#333',
    fontWeight: 'bold',
  },
});

4.스크릿샷/ScreenShot