{"id":1780,"date":"2025-07-28T03:42:46","date_gmt":"2025-07-28T03:42:46","guid":{"rendered":"https:\/\/www.freelifemakers.org\/wordpress\/?p=1780"},"modified":"2025-07-28T04:18:47","modified_gmt":"2025-07-28T04:18:47","slug":"flmtoggle","status":"publish","type":"post","link":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2025\/07\/28\/flmtoggle\/","title":{"rendered":"\ud1a0\uae00\uc2a4\uc704\uce58\/FlmToggle"},"content":{"rendered":"\n<p><strong>1.react-native-freelifemakers-ui NPM \ubaa8\ub4c8 \uc124\uce58\ud558\uae30 \/ react-native-freelifemakers-ui NPM Module Install<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code># npm install react-native-freelifemakers-ui<\/code><\/pre>\n\n\n\n<p><strong>2.\uc0ac\uc6a9\ud558\uae30 \/ Usage<\/strong><br>1)\ubaa8\ub4c8 \ubd88\ub7ec\uc624\uae30 \/ import Module<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import {FlmText, FlmButton, FlmDialog} from 'react-native-freelifemakers-ui';<\/code><\/pre>\n\n\n\n<p><strong>2)\ucee4\uc2a4\ud140 \ud1a0\uae00\ubc84\ud2bc \/ Custom ToggleButton<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>      &lt;FlmToggle\n        label=\"\ud504\ub85c\ubaa8\uc158 \ub3d9\uc758\/Agree to Promotions\"\n        initialState={isPromotionsEnabled}\n        onToggle={setIsPromotionsEnabled}\n        style={styles.toggleItem}\n        activeColor=\"#FFC107\" \/\/ \ucf1c\uc84c\uc744 \ub54c \uc8fc\ud669\uc0c9 \/ Orange when lit\n        inactiveColor=\"#795548\" \/\/ \uaebc\uc84c\uc744 \ub54c \uac08\uc0c9 \/ brown when off\n        thumbColor=\"#FFDAB9\" \/\/ \uc5c4\uc9c0 \ubd80\ubd84 \uc5f0\ud55c \ubd89\uc740\uc0c9 \/ Light red color on the thumb\n        labelStyle={{ fontSize: 16, color: \"#555\" }} \/\/ \ub808\uc774\ube14 \ud14d\uc2a4\ud2b8 \uc2a4\ud0c0\uc77c \ucee4\uc2a4\ud140 \/ Custom label text style\n      \/&gt;<\/code><\/pre>\n\n\n\n<p><strong>3.\uc608\uc81c\ucf54\ub4dc \/ Example code<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import React, { useState, useEffect } from \"react\";\nimport {\n  View,\n  Text,\n  TouchableOpacity,\n  StyleSheet,\n  Animated,\n} from \"react-native\";\n\n\/\/ ToggleButton \ucef4\ud3ec\ub10c\ud2b8\n\/\/ \uc774 \ucef4\ud3ec\ub10c\ud2b8\ub294 \ud1a0\uae00 \uc2a4\uc704\uce58 UI\ub97c \uc81c\uacf5\ud558\uba70, \uc0c1\ud0dc \ubcc0\ud654\uc5d0 \ub530\ub77c \uc2dc\uac01\uc801\uc778 \ud53c\ub4dc\ubc31\uc744 \uc90d\ub2c8\ub2e4.\n\/\/ This component provides a toggle switch UI and gives visual feedback based on state changes.\nconst FlmToggle = ({\n  label, \/\/ \ud1a0\uae00 \ubc84\ud2bc \uc606\uc5d0 \ud45c\uc2dc\ub420 \ud14d\uc2a4\ud2b8 \ub808\uc774\ube14 \/ Text label to be displayed next to the toggle button\n  initialState = false, \/\/ \ucd08\uae30 \ud1a0\uae00 \uc0c1\ud0dc (\uae30\ubcf8\uac12: false) \/ Initial toggle state (default: false)\n  onToggle, \/\/ \ud1a0\uae00 \uc0c1\ud0dc\uac00 \ubcc0\uacbd\ub420 \ub54c \ud638\ucd9c\ub420 \ucf5c\ubc31 \ud568\uc218 \/ Callback function to be called when the toggle state changes\n  style, \/\/ \uc804\uccb4 \ucee8\ud14c\uc774\ub108\uc5d0 \uc801\uc6a9\ub420 \uc2a4\ud0c0\uc77c \/ Style to be applied to the entire container\n  labelStyle, \/\/ \ub808\uc774\ube14 \ud14d\uc2a4\ud2b8\uc5d0 \uc801\uc6a9\ub420 \uc2a4\ud0c0\uc77c \/ Style to be applied to the label text\n  switchContainerStyle, \/\/ \uc2a4\uc704\uce58 \ud2b8\ub799 \ubd80\ubd84\uc5d0 \uc801\uc6a9\ub420 \uc2a4\ud0c0\uc77c \/ Style to be applied to the switch track part\n  thumbStyle, \/\/ \ud1a0\uae00 \uc2a4\uc704\uce58 \ub0b4\ubd80\uc758 '\uc5c4\uc9c0' \ubd80\ubd84\uc5d0 \uc801\uc6a9\ub420 \uc2a4\ud0c0\uc77c \/ Style to be applied to the 'thumb' part inside the toggle switch\n  activeColor = \"#2563eb\", \/\/ \ud1a0\uae00\uc774 \ucf1c\uc84c\uc744 \ub54c\uc758 \ubc30\uacbd\uc0c9 \/ Background color when toggle is on\n  inactiveColor = \"#d1d5db\", \/\/ \ud1a0\uae00\uc774 \uaebc\uc84c\uc744 \ub54c\uc758 \ubc30\uacbd\uc0c9 \/ Background color when toggle is off\n  thumbColor = \"#ffffff\", \/\/ \uc5c4\uc9c0 \ubd80\ubd84\uc758 \uc0c9\uc0c1 \/ Color of the thumb part\n}) =&gt; {\n  \/\/ \ud1a0\uae00 \uc0c1\ud0dc\ub97c \uad00\ub9ac\ud558\ub294 useState \ud6c5 \/ useState hook to manage the toggle state\n  const &#91;isOn, setIsOn] = useState(initialState);\n\n  \/\/ \uc5c4\uc9c0 \uc704\uce58 \uc560\ub2c8\uba54\uc774\uc158 \uac12 \ucd08\uae30\ud654 \/ Initialize thumb position animation value\n  const thumbTranslateX = useState(\n    new Animated.Value(initialState ? 32 : 0),\n  )&#91;0];\n\n  \/\/ initialState prop\uc774 \ubcc0\uacbd\ub420 \ub54c isOn \uc0c1\ud0dc \ubc0f \uc560\ub2c8\uba54\uc774\uc158 \uc5c5\ub370\uc774\ud2b8 \/ Update isOn state and animation when initialState prop changes\n  useEffect(() =&gt; {\n    setIsOn(initialState);\n    Animated.timing(thumbTranslateX, {\n      toValue: initialState ? 32 : 0,\n      duration: 200,\n      useNativeDriver: true,\n    }).start();\n  }, &#91;initialState, thumbTranslateX]);\n\n  \/\/ \ud1a0\uae00 \ud074\ub9ad \ud578\ub4e4\ub7ec \/ Toggle click handler\n  const handleToggle = () =&gt; {\n    const newState = !isOn; \/\/ \uc0c8 \uc0c1\ud0dc \uacc4\uc0b0 \/ Calculate new state\n    setIsOn(newState); \/\/ \uc0c1\ud0dc \uc5c5\ub370\uc774\ud2b8 \/ Update state\n    Animated.timing(thumbTranslateX, {\n      toValue: newState ? 32 : 0, \/\/ \ucf1c\uc9d0: 32, \uaebc\uc9d0: 0 \/ On: 32, Off: 0\n      duration: 200, \/\/ 0.2\ucd08 \ub3d9\uc548 \uc560\ub2c8\uba54\uc774\uc158 \/ Animation for 0.2 seconds\n      useNativeDriver: true, \/\/ \ub124\uc774\ud2f0\ube0c \ub4dc\ub77c\uc774\ubc84 \uc0ac\uc6a9 \/ Use native driver for performance\n    }).start();\n\n    if (onToggle) {\n      onToggle(newState); \/\/ onToggle \ucf5c\ubc31 \ud638\ucd9c \/ Call onToggle callback\n    }\n  };\n\n  return (\n    &lt;View style={&#91;styles.container, style]}&gt;\n      {\/* \ub808\uc774\ube14 \ud14d\uc2a4\ud2b8 \/ Label text *\/}\n      {label &amp;&amp; &lt;Text style={&#91;styles.label, labelStyle]}&gt;{label}&lt;\/Text&gt;}\n\n      {\/* \ud1a0\uae00 \uc2a4\uc704\uce58 \ucee8\ud14c\uc774\ub108 \/ Toggle switch container *\/}\n      &lt;TouchableOpacity\n        activeOpacity={0.7}\n        onPress={handleToggle}\n        style={&#91;\n          styles.switchContainer,\n          { backgroundColor: isOn ? activeColor : inactiveColor },\n          switchContainerStyle,\n        ]}\n      &gt;\n        {\/* \uc2a4\uc704\uce58 \ub0b4\ubd80\uc758 '\uc5c4\uc9c0' \ubd80\ubd84 \/ The 'thumb' part inside the switch *\/}\n        &lt;Animated.View\n          style={&#91;\n            styles.thumb,\n            {\n              transform: &#91;{ translateX: thumbTranslateX }],\n              backgroundColor: thumbColor,\n            },\n            thumbStyle,\n          ]}\n        \/&gt;\n      &lt;\/TouchableOpacity&gt;\n    &lt;\/View&gt;\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flexDirection: \"row\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\", \/\/ \ub808\uc774\ube14\uacfc \ud1a0\uae00\uc744 \uc591 \ub05d\uc73c\ub85c \uc815\ub82c \/ Align label and toggle to ends\n    paddingVertical: 10,\n    paddingHorizontal: 15,\n    borderRadius: 8,\n    backgroundColor: \"#ffffff\",\n    shadowColor: \"#000\",\n    shadowOffset: { width: 0, height: 2 },\n    shadowOpacity: 0.1,\n    shadowRadius: 4,\n    elevation: 2,\n    marginVertical: 5,\n  },\n  label: {\n    fontSize: 18,\n    fontWeight: \"600\",\n    color: \"#333333\",\n    flex: 1, \/\/ \ub808\uc774\ube14\uc774 \uacf5\uac04\uc744 \ucc28\uc9c0\ud558\ub3c4\ub85d \/ Label takes up space\n    marginRight: 10, \/\/ \ud1a0\uae00\uacfc\uc758 \uac04\uaca9 \/ Gap from toggle\n  },\n  switchContainer: {\n    width: 60,\n    height: 28,\n    borderRadius: 14,\n    padding: 2,\n    justifyContent: \"center\",\n  },\n  thumb: {\n    width: 24,\n    height: 24,\n    borderRadius: 12,\n    backgroundColor: \"#ffffff\",\n    shadowColor: \"#000\",\n    shadowOffset: { width: 0, height: 1 },\n    shadowOpacity: 0.2,\n    shadowRadius: 1.5,\n    elevation: 1.5,\n  },\n});\n\nexport default FlmToggle;\n<\/code><\/pre>\n\n\n\n<p><strong>4.\uc2a4\ud06c\ub9b0\uc0f7\/ScreenShot<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"\ud1a0\uae00\uc2a4\uc704\uce58\/FlmToggle\" width=\"473\" height=\"840\" src=\"https:\/\/www.youtube.com\/embed\/PWul-NAgDEk?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>1.react-native-freelifemakers-ui NPM \ubaa8\ub4c8 \uc124\uce58\ud558\uae30 \/ react-native-freelifemakers-ui NPM Module Install 2.\uc0ac\uc6a9\ud558\uae30 \/ Usage1)\ubaa8\ub4c8 \ubd88\ub7ec\uc624\uae30 \/ import Module 2)\ucee4\uc2a4\ud140 \ud1a0\uae00\ubc84\ud2bc \/ Custom ToggleButton 3.\uc608\uc81c\ucf54\ub4dc \/ Example code 4.\uc2a4\ud06c\ub9b0\uc0f7\/ScreenShot<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,15,1],"tags":[],"class_list":["post-1780","post","type-post","status-publish","format-standard","hentry","category-reactnative","category-rnuimodule","category-uncategorized","missing-thumbnail"],"_links":{"self":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/1780","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/comments?post=1780"}],"version-history":[{"count":4,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/1780\/revisions"}],"predecessor-version":[{"id":1785,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/1780\/revisions\/1785"}],"wp:attachment":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=1780"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=1780"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=1780"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}