1.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
         // 레이블 텍스트 스타일 커스텀 / Custom label text style
        labelStyle={{ fontSize: 16, color: "#555" }}
      />

3.Full 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 = ({
	//토글 버튼 옆에 표시될 텍스트 레이블 / 
	//Text label to be displayed next to the toggle button
  label, 
  
  // 초기 토글 상태 (기본값: false) 
  //  Initial toggle state (default: false)
  initialState = false, 
  
  // 토글 상태가 변경될 때 호출될 콜백 함수 
  // Callback function to be called when the toggle state changes
  onToggle, 
  
  // 전체 컨테이너에 적용될 스타일 
  // Style to be applied to the entire container
  style, 
  
  // 레이블 텍스트에 적용될 스타일 
  // Style to be applied to the label text
  labelStyle, 
  
  // 스위치 트랙 부분에 적용될 스타일 
  // Style to be applied to the switch track part
  switchContainerStyle, 
  
   // 토글 스위치 내부의 '엄지' 부분에 적용될 스타일 
   // Style to be applied to the 'thumb' part inside the toggle switch
  thumbStyle,
  
  // 토글이 켜졌을 때의 배경색 
  // Background color when toggle is on
  activeColor = "#2563eb", 
  
  // 토글이 꺼졌을 때의 배경색 
  // Background color when toggle is off
  inactiveColor = "#d1d5db", 
  
  // 엄지 부분의 색상 
  // Color of the thumb part
  thumbColor = "#ffffff", 
  
}) => {
  // 토글 상태를 관리하는 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 = () => {
  // 새 상태 계산 / Calculate new state
    const newState = !isOn; 
    
    // 상태 업데이트 / Update state
    setIsOn(newState); 
    Animated.timing(thumbTranslateX, {
	    // 켜짐: 32, 꺼짐: 0 / On: 32, Off: 0
      toValue: newState ? 32 : 0, 
      // 0.2초 동안 애니메이션 / Animation for 0.2 seconds
      duration: 200, 
      // 네이티브 드라이버 사용 / Use native driver for performance
      useNativeDriver: true, 
    }).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",
     // 레이블과 토글을 양 끝으로 정렬 / Align label and toggle to ends
    paddingVertical: 10,
    justifyContent: "space-between",
    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

https://youtube.com/shorts/PWul-NAgDEk