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

npm install react-native-freelifemakers-ui

2.사용법

✔️모듈 임포트

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

✔️두 개의 라디오 버튼을 사용하는 기본 코드는 아래와 같이 작성합니다.

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

3.전체코드

✔️아래는 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() {
	// default
  const [selectedMovieTypes, setSelectedMovieTypes] = useState(["family"]);
  // horizaontal 
  const [selectedFruitTypes, setSelectedFruitTypes] = useState(["apple"]);
  // custom 
  const [selectedInterests, setSelectedInterests] = useState(["sports"]); 

  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",
  },

  // 체크박스 스타일
  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