{"id":1563,"date":"2025-06-20T05:21:20","date_gmt":"2025-06-20T05:21:20","guid":{"rendered":"https:\/\/www.freelifemakers.org\/wordpress\/?p=1563"},"modified":"2025-07-14T11:57:02","modified_gmt":"2025-07-14T11:57:02","slug":"flmradio","status":"publish","type":"post","link":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2025\/06\/20\/flmradio\/","title":{"rendered":"\ub77c\ub514\uc624\ubc84\ud2bc\/FlmRadio"},"content":{"rendered":"\n<p><strong>1.react-native-freelifemakers-ui NPM \ubaa8\ub4c8 \uc124\uce58\ud558\uae30 \/ react-native-freelifemakers-ui NPM Module Instal<\/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><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import {FlmTextInput, FlmText} from 'react-native-freelifemakers-ui';<\/code><\/pre>\n\n\n\n<p>&#8212; \uc138\uac1c\uc758 \ub77c\ub514\uc624 \ubc84\ud2bc\uc744 \uc0ac\uc6a9\ud558\ub294 \uae30\ubcf8 \ucf54\ub4dc\ub294 \uc544\ub798\uc640 \uac19\uc774 \uc791\uc131\ud569\ub2c8\ub2e4.<br>The basic code using three radio buttons is written as follows:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>          &lt;FlmRadio\n            label=\"\uacfc\uc77c\uc744 \uc120\ud0dd\ud558\uc138\uc694(\uc138\ub85c\ucd9c\ub825)\/Select fruit (vertical output):\"\n            options={&#91;\n              { label: \"\uc0ac\uacfc\/apple\", value: \"apple\" },\n              { label: \"\ubc14\ub098\ub098\/banana\", value: \"banana\" },\n              { label: \"\ud3ec\ub3c4\/grape\", value: \"grape\" },\n            ]}\n            initialValue=\"apple\"\n            onValueChange={setSelected}\n          \/&gt;<\/code><\/pre>\n\n\n\n<p><strong>3.\uc608\uc81c\ucf54\ub4dc \/ Example code<\/strong><\/p>\n\n\n\n<p>-\uc544\ub798\ub294 Expo\uc5d0\uc11c \uc2e4\ud589\uac00\ub2a5\ud55c \ucf54\ub4dc \uc608\uc81c \uc785\ub2c8\ub2e4.<br>Below is an example of code that can be run on Expo.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\nimport React, { useState } from \"react\";\nimport { View, Text, StyleSheet, ScrollView, SafeAreaView } from \"react-native\"; \/\/ ScrollView, SafeAreaView\nimport { FlmRadio, FlmText } from \"react-native-freelifemakers-ui\";\n\nexport default function App() {\n  \/\/ \uae30\ubcf8 \uc2a4\ud0c0\uc77c \/ default style\n  const &#91;selected, setSelected] = useState(\"banana\");\n  \/\/ \ucee4\uc2a4\ud140 \uc2a4\ud0c0\uc77c \/ custom style\n  const &#91;selectedFruit, setSelectedFruit] = useState(\"banana\");\n  const &#91;selectedColor, setSelectedColor] = useState(null);\n\n  const fruitOptions = &#91;\n    { label: \"\uc0ac\uacfc\/apple\", value: \"apple\" },\n    { label: \"\ubc14\ub098\ub098\/banana\", value: \"banana\" },\n    { label: \"\ud3ec\ub3c4\/grape\", value: \"grape\" },\n    { label: \"\uc624\ub80c\uc9c0\/orange\", value: \"orange\", disabled: true }, \/\/ \ube44\ud65c\uc131\ud654\ub41c \uc635\uc158\/disabled option\n  ];\n\n  const colorOptions = &#91;\n    { label: \"\ube68\uac15\/red\", value: \"red\" },\n    { label: \"\ud30c\ub791\/blue\", value: \"blue\" },\n    { label: \"\ucd08\ub85d\/green\", value: \"green\" },\n  ];\n\n  return (\n    &lt;SafeAreaView style={appStyles.safeArea}&gt;\n      &lt;ScrollView style={appStyles.scrollViewContent}&gt;\n        {\/* ScrollView \uc801\uc6a9 \/ Apply ScrollView *\/}\n        {\/* --\uae30\ubcf8 \ub77c\ub514\uc624 \ubc84\ud2bc\/Default radio button-- *\/}\n        &lt;View style={appStyles.defaultSection}&gt;\n          &lt;FlmText style={appStyles.defaultSectionText}&gt;\n            \uc120\ud0dd\ub41c \uacfc\uc77c\/selected fruits: {selected}\n          &lt;\/FlmText&gt;\n          &lt;FlmRadio\n            label=\"\uacfc\uc77c\uc744 \uc120\ud0dd\ud558\uc138\uc694(\uc138\ub85c\ucd9c\ub825)\/Select fruit (vertical output):\"\n            options={&#91;\n              { label: \"\uc0ac\uacfc\/apple\", value: \"apple\" },\n              { label: \"\ubc14\ub098\ub098\/banana\", value: \"banana\" },\n              { label: \"\ud3ec\ub3c4\/grape\", value: \"grape\" },\n            ]}\n            initialValue=\"apple\"\n            onValueChange={setSelected}\n          \/&gt;\n          &lt;FlmRadio\n            label=\"\uacfc\uc77c\uc744 \uc120\ud0dd\ud558\uc138\uc694(\uac00\ub85c\ucd9c\ub825)\/Select fruit (horizontal output):\"\n            options={&#91;\n              { label: \"\uc0ac\uacfc\/apple\", value: \"apple\" },\n              { label: \"\ubc14\ub098\ub098\/banana\", value: \"banana\" },\n              { label: \"\ud3ec\ub3c4\/grape\", value: \"grape\" },\n            ]}\n            initialValue=\"apple\"\n            onValueChange={setSelected}\n            direction=\"horizontal\"\n          \/&gt;\n        &lt;\/View&gt;\n        {\/* --\ucee4\uc2a4\ud140 \uc2a4\ud0c0\uc77c \uc801\uc6a9\/Apply custom style-- *\/}\n        &lt;View style={appStyles.container}&gt;\n          &lt;Text style={appStyles.header}&gt;\n            \uc120\ud0dd\ub41c \uacfc\uc77c\/Selected Fruit: {selectedFruit}\n          &lt;\/Text&gt;\n\n          {\/* \uae30\ubcf8 \uc138\ub85c \ucd9c\ub825 \ub77c\ub514\uc624 \ubc84\ud2bc (\ucee4\uc2a4\ud140 \uc2a4\ud0c0\uc77c \uc801\uc6a9) *\/}\n          {\/* Default vertical output radio button (apply custom style) *\/}\n          &lt;View style={appStyles.section}&gt;\n            &lt;FlmRadio\n              label=\"\uacfc\uc77c\uc744 \uc120\ud0dd\ud558\uc138\uc694 (\uc138\ub85c\ucd9c\ub825, \ucee4\uc2a4\ud140 \uc2a4\ud0c0\uc77c)\/Select fruit (vertical output, custom style):\"\n              options={fruitOptions}\n              initialValue=\"apple\"\n              onValueChange={setSelectedFruit}\n              direction=\"vertical\"\n              radioGroupStyle={appStyles.customRadioGroup}\n              radioOptionStyle={appStyles.customRadioButton}\n              radioCircleWrapperStyle={appStyles.customCircleWrapper}\n              radioCircleStyle={appStyles.customCircle}\n              radioFilledCircleStyle={appStyles.customFilledCircle}\n              radioLabelStyle={appStyles.customLabel}\n              radioCheckedLabelStyle={appStyles.customCheckedLabel}\n            \/&gt;\n          &lt;\/View&gt;\n\n          {\/* \uac00\ub85c \ucd9c\ub825 \ub77c\ub514\uc624 \ubc84\ud2bc (\ub2e4\ub978 \ucee4\uc2a4\ud140 \uc2a4\ud0c0\uc77c \uc801\uc6a9) *\/}\n          {\/* Horizontal output radio button (Apply another custom style) *\/}\n          &lt;View style={appStyles.section}&gt;\n            &lt;FlmRadio\n              label=\"\uc0c9\uc0c1\uc744 \uc120\ud0dd\ud558\uc138\uc694 (\uac00\ub85c\ucd9c\ub825, \ub2e4\ub978 \ucee4\uc2a4\ud140 \uc2a4\ud0c0\uc77c)\/Select color(horizontal output,another custoom style):\"\n              options={colorOptions}\n              initialValue=\"blue\"\n              onValueChange={setSelectedColor}\n              direction=\"horizontal\"\n              optionContainerStyle={appStyles.customHorizontalContainer}\n              radioOptionStyle={appStyles.customHorizontalOption}\n              radioCircleWrapperStyle={appStyles.customHorizontalCircleWrapper}\n              radioFilledCircleStyle={appStyles.customHorizontalFilledCircle}\n              radioLabelStyle={appStyles.customHorizontalLabel}\n              radioCheckedLabelStyle={appStyles.customHorizontalCheckedLabel}\n            \/&gt;\n            &lt;FlmText style={appStyles.header}&gt;\n              \uc120\ud0dd\ub41c \uc0c9\uc0c1\/selected color: {selectedColor || \"\uc5c6\uc74c\/none\"}\n            &lt;\/FlmText&gt;\n          &lt;\/View&gt;\n        &lt;\/View&gt;\n      &lt;\/ScrollView&gt;\n    &lt;\/SafeAreaView&gt;\n  );\n}\n\nconst appStyles = StyleSheet.create({\n  safeArea: {\n    flex: 1, \/\/ SafeAreaView\uac00 \uc804\uccb4 \ud654\uba74\uc744 \ucc28\uc9c0\ud558\ub3c4\ub85d \/ Make SafeAreaView take up the entire screen\n    backgroundColor: \"#f9f9f9\",\n  },\n  scrollViewContent: {\n    padding: 20,\n  },\n  defaultSection: {\n    marginBottom: 30,\n    padding: 0,\n    backgroundColor: \"#fff\",\n    borderRadius: 8,\n    shadowColor: \"#000\",\n    shadowOffset: { width: 0, height: 1 },\n    shadowOpacity: 0.1,\n    shadowRadius: 2,\n    elevation: 2,\n    marginTop: 20,\n  },\n  defaultSectionText: {\n    fontSize: 18,\n    fontWeight: \"bold\",\n    marginBottom: 10,\n    color: \"#333\",\n    textAlign: \"center\",\n  },\n  container: {\n    \/\/ \uae30\uc874 appStyles.container \ub300\uc2e0 ScrollView\uac00 padding\uc744 \uac00\uc9d0\n    \/\/ ScrollView has padding instead of existing appStyles.container\n    \/\/\n    \/\/ flex: 1, ScrollView \ub0b4\ubd80\uc5d0\uc11c\ub294 flex: 1\uc744 \uc0ac\uc6a9\ud558\uc9c0 \uc54a\uc74c\n    \/\/ Don't use flex: 1 inside ScrollView\n    \/\/\n    \/\/ paddingTop: 50, ScrollView \ub610\ub294 SafeAreaView\uc5d0\uc11c \uc870\uc808\n    \/\/ Controlling in ScrollView or SafeAreaView\n  },\n  header: {\n    fontSize: 20,\n    fontWeight: \"bold\",\n    marginBottom: 20,\n    color: \"#333\",\n    textAlign: \"center\",\n  },\n  section: {\n    marginBottom: 30,\n    padding: 15,\n    backgroundColor: \"#fff\",\n    borderRadius: 8,\n    shadowColor: \"#000\",\n    shadowOffset: { width: 0, height: 1 },\n    shadowOpacity: 0.1,\n    shadowRadius: 2,\n    elevation: 2,\n  },\n\n  \/\/ --- \ucee4\uc2a4\ud140 \uc2a4\ud0c0\uc77c \uc815\uc758 \/ Custom style definistions ---\n  customRadioGroup: {\n    marginVertical: 15,\n    borderWidth: 1,\n    borderColor: \"#ddd\",\n    borderRadius: 5,\n    padding: 10,\n  },\n  customRadioButton: {\n    backgroundColor: \"#F5F5DC\",\n    borderRadius: 10,\n    marginVertical: 3,\n    shadowColor: \"#000\",\n    shadowOffset: { width: 0, height: 1 },\n    shadowOpacity: 0.1,\n    shadowRadius: 1,\n    elevation: 1,\n  },\n  customCircleWrapper: {\n    borderColor: \"#8B4513\", \/\/ \uac08\uc0c9 \ud14c\ub450\ub9ac \/ brown border\n    backgroundColor: \"#FFF8DC\", \/\/ \ubc1d\uc740 \ubca0\uc774\uc9c0\uc0c9 \ubc30\uacbd \/ light beige background\n  },\n  customCircle: {\n    backgroundColor: \"transparent\",\n  },\n  customFilledCircle: {\n    backgroundColor: \"#8B4513\", \/\/ \uac08\uc0c9 \ucc44\uc6c0 \/ brown fill\n  },\n  customLabel: {\n    color: \"#5C4033\", \/\/ \uc5b4\ub450\uc6b4 \uac08\uc0c9 \ud14d\uc2a4\ud2b8 \/ dark brown text\n    fontSize: 15,\n  },\n  customCheckedLabel: {\n    color: \"#8B4513\", \/\/ \uc120\ud0dd\ub418\uba74 \uac08\uc0c9 \ud14d\uc2a4\ud2b8 \/ Brown text when selected\n    fontWeight: \"bold\",\n  },\n\n  \/\/ --- \uac00\ub85c \ucd9c\ub825\uc6a9 \ub2e4\ub978 \ucee4\uc2a4\ud140 \uc2a4\ud0c0\uc77c \/ Other custom styles for landscape printing ---\n  customHorizontalContainer: {\n    backgroundColor: \"#e0ffe0\", \/\/ \uc5f0\ud55c \ucd08\ub85d\uc0c9 \ubc30\uacbd \/ light green background\n    padding: 10,\n    borderRadius: 8,\n    borderWidth: 1,\n    borderColor: \"#a0daa0\",\n  },\n  customHorizontalOption: {\n    backgroundColor: \"#c0ffc0\", \/\/ \ub354 \uc5f0\ud55c \ucd08\ub85d\uc0c9 \/ lighter green\n    borderRadius: 15,\n    paddingVertical: 8,\n    paddingHorizontal: 12,\n    marginHorizontal: 5, \/\/ \uac00\ub85c \uac04\uaca9 \/ horizontal spacing\n    marginVertical: 5, \/\/ \uc138\ub85c \uac04\uaca9 \/ vertical spacing\n    shadowColor: \"#000\",\n    shadowOffset: { width: 0, height: 1 },\n    shadowOpacity: 0.1,\n    shadowRadius: 1,\n    elevation: 1,\n  },\n  customHorizontalCircleWrapper: {\n    borderColor: \"#008000\", \/\/ \uc9c4\ud55c \ucd08\ub85d\uc0c9 \/ dark green\n    backgroundColor: \"#e0ffe0\",\n  },\n  customHorizontalFilledCircle: {\n    backgroundColor: \"#008000\", \/\/ \uc9c4\ud55c \ucd08\ub85d\uc0c9 \ucc44\uc6c0 \/ dark green fill\n  },\n  customHorizontalLabel: {\n    color: \"#006400\", \/\/ \uc5b4\ub450\uc6b4 \ucd08\ub85d\uc0c9 \ud14d\uc2a4\ud2b8 \/ dark green text\n    fontSize: 14,\n  },\n  customHorizontalCheckedLabel: {\n    color: \"#008000\", \/\/ \uc120\ud0dd\ub418\uba74 \uc9c4\ud55c \ucd08\ub85d\uc0c9 \ud14d\uc2a4\ud2b8 \/ When selected, dark green text\n    fontWeight: \"bold\",\n  },\n});\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-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"497\" height=\"1024\" data-id=\"1541\" src=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/06\/FlmRadio-497x1024.png\" alt=\"\" class=\"wp-image-1541\" srcset=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/06\/FlmRadio-497x1024.png 497w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/06\/FlmRadio-146x300.png 146w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/06\/FlmRadio.png 618w\" sizes=\"auto, (max-width: 497px) 100vw, 497px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"540\" height=\"1024\" data-id=\"1542\" src=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/06\/FlmRadio2-540x1024.png\" alt=\"\" class=\"wp-image-1542\" srcset=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/06\/FlmRadio2-540x1024.png 540w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/06\/FlmRadio2-158x300.png 158w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/06\/FlmRadio2.png 642w\" sizes=\"auto, (max-width: 540px) 100vw, 540px\" \/><\/figure>\n<\/figure>\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=\"\ub77c\ub514\uc624\ubc84\ud2bc\/FlmRadio\" width=\"473\" height=\"840\" src=\"https:\/\/www.youtube.com\/embed\/kt3BWqzXeBc?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 Instal 2.\uc0ac\uc6a9\ud558\uae30 \/ Usage &#8212; \uc138\uac1c\uc758 \ub77c\ub514\uc624 \ubc84\ud2bc\uc744 \uc0ac\uc6a9\ud558\ub294 \uae30\ubcf8 \ucf54\ub4dc\ub294 \uc544\ub798\uc640 \uac19\uc774 \uc791\uc131\ud569\ub2c8\ub2e4.The basic code using three radio buttons is written as follows: 3.\uc608\uc81c\ucf54\ub4dc \/ Example code -\uc544\ub798\ub294 Expo\uc5d0\uc11c \uc2e4\ud589\uac00\ub2a5\ud55c \ucf54\ub4dc \uc608\uc81c \uc785\ub2c8\ub2e4.Below is an example of code that can be run on Expo. 4.\uc2a4\ud06c\ub9b0\uc0f7 \/ [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[15,1],"tags":[],"class_list":["post-1563","post","type-post","status-publish","format-standard","hentry","category-rnuimodule","category-uncategorized","missing-thumbnail"],"_links":{"self":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/1563","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=1563"}],"version-history":[{"count":7,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/1563\/revisions"}],"predecessor-version":[{"id":2216,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/1563\/revisions\/2216"}],"wp:attachment":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=1563"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=1563"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=1563"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}