토글스위치/FlmToggle

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

# npm install react-native-freelifemakers-ui

2.사용하기 / Usage
1)모듈 불러오기 / import Module

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

2)커스텀 토글버튼 / Custom ToggleButton

      <FlmToggle
        label="프로모션 동의/Agree to Promotions"
        initialState={isPromotionsEnabled}
        onToggle={setIsPromotionsEnabled}
        style={styles.toggleItem}
        activeColor="#FFC107" // 켜졌을 때 주황색 / Orange when lit
        inactiveColor="#795548" // 꺼졌을 때 갈색 / brown when off
        thumbColor="#FFDAB9" // 엄지 부분 연한 붉은색 / Light red color on the thumb
        labelStyle={{ fontSize: 16, color: "#555" }} // 레이블 텍스트 스타일 커스텀 / Custom label text style
      />

3.예제코드 / Example code

import React, { useState, useEffect } from "react";
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  Animated,
} from "react-native";

// ToggleButton 컴포넌트
// 이 컴포넌트는 토글 스위치 UI를 제공하며, 상태 변화에 따라 시각적인 피드백을 줍니다.
// This component provides a toggle switch UI and gives visual feedback based on state changes.
const FlmToggle = ({
  label, // 토글 버튼 옆에 표시될 텍스트 레이블 / Text label to be displayed next to the toggle button
  initialState = false, // 초기 토글 상태 (기본값: false) / Initial toggle state (default: false)
  onToggle, // 토글 상태가 변경될 때 호출될 콜백 함수 / Callback function to be called when the toggle state changes
  style, // 전체 컨테이너에 적용될 스타일 / Style to be applied to the entire container
  labelStyle, // 레이블 텍스트에 적용될 스타일 / Style to be applied to the label text
  switchContainerStyle, // 스위치 트랙 부분에 적용될 스타일 / Style to be applied to the switch track part
  thumbStyle, // 토글 스위치 내부의 '엄지' 부분에 적용될 스타일 / Style to be applied to the 'thumb' part inside the toggle switch
  activeColor = "#2563eb", // 토글이 켜졌을 때의 배경색 / Background color when toggle is on
  inactiveColor = "#d1d5db", // 토글이 꺼졌을 때의 배경색 / Background color when toggle is off
  thumbColor = "#ffffff", // 엄지 부분의 색상 / Color of the thumb part
}) => {
  // 토글 상태를 관리하는 useState 훅 / useState hook to manage the toggle state
  const [isOn, setIsOn] = useState(initialState);

  // 엄지 위치 애니메이션 값 초기화 / Initialize thumb position animation value
  const thumbTranslateX = useState(
    new Animated.Value(initialState ? 32 : 0),
  )[0];

  // initialState prop이 변경될 때 isOn 상태 및 애니메이션 업데이트 / Update isOn state and animation when initialState prop changes
  useEffect(() => {
    setIsOn(initialState);
    Animated.timing(thumbTranslateX, {
      toValue: initialState ? 32 : 0,
      duration: 200,
      useNativeDriver: true,
    }).start();
  }, [initialState, thumbTranslateX]);

  // 토글 클릭 핸들러 / Toggle click handler
  const handleToggle = () => {
    const newState = !isOn; // 새 상태 계산 / Calculate new state
    setIsOn(newState); // 상태 업데이트 / Update state
    Animated.timing(thumbTranslateX, {
      toValue: newState ? 32 : 0, // 켜짐: 32, 꺼짐: 0 / On: 32, Off: 0
      duration: 200, // 0.2초 동안 애니메이션 / Animation for 0.2 seconds
      useNativeDriver: true, // 네이티브 드라이버 사용 / Use native driver for performance
    }).start();

    if (onToggle) {
      onToggle(newState); // onToggle 콜백 호출 / Call onToggle callback
    }
  };

  return (
    <View style={[styles.container, style]}>
      {/* 레이블 텍스트 / Label text */}
      {label && <Text style={[styles.label, labelStyle]}>{label}</Text>}

      {/* 토글 스위치 컨테이너 / Toggle switch container */}
      <TouchableOpacity
        activeOpacity={0.7}
        onPress={handleToggle}
        style={[
          styles.switchContainer,
          { backgroundColor: isOn ? activeColor : inactiveColor },
          switchContainerStyle,
        ]}
      >
        {/* 스위치 내부의 '엄지' 부분 / The 'thumb' part inside the switch */}
        <Animated.View
          style={[
            styles.thumb,
            {
              transform: [{ translateX: thumbTranslateX }],
              backgroundColor: thumbColor,
            },
            thumbStyle,
          ]}
        />
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between", // 레이블과 토글을 양 끝으로 정렬 / Align label and toggle to ends
    paddingVertical: 10,
    paddingHorizontal: 15,
    borderRadius: 8,
    backgroundColor: "#ffffff",
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 2,
    marginVertical: 5,
  },
  label: {
    fontSize: 18,
    fontWeight: "600",
    color: "#333333",
    flex: 1, // 레이블이 공간을 차지하도록 / Label takes up space
    marginRight: 10, // 토글과의 간격 / Gap from toggle
  },
  switchContainer: {
    width: 60,
    height: 28,
    borderRadius: 14,
    padding: 2,
    justifyContent: "center",
  },
  thumb: {
    width: 24,
    height: 24,
    borderRadius: 12,
    backgroundColor: "#ffffff",
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.2,
    shadowRadius: 1.5,
    elevation: 1.5,
  },
});

export default FlmToggle;

4.스크린샷/ScreenShot