{"id":1586,"date":"2025-06-23T07:21:59","date_gmt":"2025-06-23T07:21:59","guid":{"rendered":"https:\/\/www.freelifemakers.org\/wordpress\/?p=1586"},"modified":"2025-07-25T17:21:47","modified_gmt":"2025-07-25T17:21:47","slug":"flmmodal","status":"publish","type":"post","link":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2025\/06\/23\/flmmodal\/","title":{"rendered":"\ubaa8\ub2ec\/FlmModal"},"content":{"rendered":"\n<p>\ubaa8\ub2ec\uc740 \ud654\uba74 \uc704\uc5d0 \uc624\ubc84\ub808\uc774\ub418\uc5b4 \uc0ac\uc6a9\uc790 \uc0c1\ud638\uc791\uc6a9\uc744 \ucc28\ub2e8\ud558\uace0, \ud558\ub098\uc758 \uc791\uc5c5 \ub610\ub294 \uc815\ubcf4\uc5d0 \uc9d1\uc911\ud558\ub3c4\ub85d \ub9cc\ub4dc\ub294 UI\ucee8\ud14c\uc774\ub108\ub85c\uc11c <br>\uc0ac\uc6a9\uc790\ub85c\uadf8\uc778,\ube44\ubc00\ubc88\ud638\uc785\ub825,\uc774\ubbf8\uc9c0\ud655\ub300\ubcf4\uae30\ub4f1\uc5d0 \ub9ce\uc774 \uc0ac\uc6a9\ub429\ub2c8\ub2e4.<\/p>\n\n\n\n<p>A modal is a UI container that overlays the screen and blocks user interaction, directing focus to a single task or piece of information.<br>It is commonly used for user login, password input, image zooming, and similar interactions.<\/p>\n\n\n\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><br>&#8211; \ubc84\ud2bc \ud074\ub9ad\uc2dc \ubaa8\ub2ec\uc744 \uc624\ud508\ud569\ub2c8\ub2e4.<br>Opens a modal when the button is clicked. &#8212;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import {FlmModal, FlmButton, FlmText} from 'react-native-freelifemakers-ui';\n\n          &lt;FlmButton\n            title=\"\uae30\ubcf8 \ubaa8\ub2ec \uc5f4\uae30\/Open Default Modal\"\n            onPress={() =&gt; setModal1Visible(true)}\n          \/&gt;\n          &lt;FlmModal\n            isVisible={isModal1Visible}\n            onClose={() =&gt; setModal1Visible(false)}\n            title=\"\uae30\ubcf8 \ubaa8\ub2ec\/Default Modal\"\n            message=\"\uc544\ubb34\ub7f0 \ucee4\uc2a4\ud140 \uc2a4\ud0c0\uc77c\uc774 \uc801\uc6a9\ub418\uc9c0 \uc54a\uc558\uc2b5\ub2c8\ub2e4.\/No custom styles were applied.\"\n            animationDirection=\"slideUp\"\n          \/&gt;<\/code><\/pre>\n\n\n\n<p>&#8212; \uc608\uc81c \ucf54\ub4dc \/ Example code<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import React, {useState} from 'react';\nimport {View, StyleSheet, SafeAreaView, ScrollView} from 'react-native';\nimport {FlmModal, FlmButton, FlmText} from 'react-native-freelifemakers-ui';\n\nexport default function FlmModalApp() {\n  const &#91;isModal1Visible, setModal1Visible] = useState(false);\n  const &#91;isModal2Visible, setModal2Visible] = useState(false);\n  const &#91;isModal3Visible, setModal3Visible] = useState(false); \/\/ \ucee4\uc2a4\ud140 \uc2a4\ud0c0\uc77c \uc801\uc6a9 \/ Apply custom style\n  const &#91;isModal4Visible, setModal4Visible] = useState(false); \/\/ \ub2e4\ub978 \ucee4\uc2a4\ud140 \uc2a4\ud0c0\uc77c \/ Apply another custom style\n\n  return (\n    &lt;SafeAreaView style={appStyles.safeArea}&gt;\n      &lt;ScrollView style={appStyles.scrollViewContent}&gt;\n        &lt;View style={appStyles.section}&gt;\n          &lt;FlmText style={appStyles.header}&gt;FlmModal \ucee4\uc2a4\ud130\ub9c8\uc774\uc9d5 \uc608\uc2dc&lt;\/FlmText&gt;\n\n          {\/* --- 1. \uae30\ubcf8 \uc2ac\ub77c\uc774\ub4dc \ubaa8\ub2ec \/ Default Slide Modal\n              -- 'slideUp', 'slideDown', 'slideLeft', 'slideRight', 'fade', 'none' --- *\/}\n          &lt;FlmText&gt;\n            1. \uae30\ubcf8 \uc2ac\ub77c\uc774\ub4dc \ubaa8\ub2ec \/ Default --\n            slideUp,slideDown,slideLeft,slideRight, fade, none\n          &lt;\/FlmText&gt;\n          &lt;FlmButton\n            title=\"\uae30\ubcf8 \ubaa8\ub2ec \uc5f4\uae30\/Open Default Modal\"\n            onPress={() =&gt; setModal1Visible(true)}\n          \/&gt;\n          &lt;FlmModal\n            isVisible={isModal1Visible}\n            onClose={() =&gt; setModal1Visible(false)}\n            title=\"\uae30\ubcf8 \ubaa8\ub2ec\/Default Modal\"\n            message=\"\uc544\ubb34\ub7f0 \ucee4\uc2a4\ud140 \uc2a4\ud0c0\uc77c\uc774 \uc801\uc6a9\ub418\uc9c0 \uc54a\uc558\uc2b5\ub2c8\ub2e4.\/No custom styles were applied.\"\n            animationDirection=\"slideUp\"\n          \/&gt;\n          &lt;FlmText&gt;2. \ucee4\uc2a4\ud140 \ubaa8\ub2ec\/Custom Modal&lt;\/FlmText&gt;\n          {\/* --- 2. \ubc30\uacbd\uc0c9, \ud22c\uba85\ub3c4 \ubcc0\uacbd \ubaa8\ub2ec \/\n            Modal to change background color and transparency --- *\/}\n          &lt;View style={{marginTop: 20}}&gt;\n            &lt;FlmButton\n              title=\"\ubc30\uacbd \ucee4\uc2a4\ud140 \ubaa8\ub2ec \uc5f4\uae30\/Background Custom Modal\"\n              onPress={() =&gt; setModal2Visible(true)}\n            \/&gt;\n          &lt;\/View&gt;\n          &lt;FlmModal\n            isVisible={isModal2Visible}\n            onClose={() =&gt; setModal2Visible(false)}\n            title=\"\ubc30\uacbd \ucee4\uc2a4\ud140\/Background Custom\"\n            message=\"\ubc30\uacbd\uc774 \ud30c\ub780\uc0c9 \ubc18\ud22c\uba85\uc73c\ub85c \ubcc0\uacbd\ub418\uc5c8\uc2b5\ub2c8\ub2e4.\/The background has been changed to a blue, translucent color.\"\n            animationDirection=\"fade\"\n            backdropColor=\"rgba(0,0,255,0.3)\" \/\/ \ud30c\ub780\uc0c9 \ubc18\ud22c\uba85 \ubc30\uacbd \/ Blue translucent background\n          \/&gt;\n\n          {\/* --- 3. \ubaa8\ub2ec \ucee8\ud150\uce20 \uc2a4\ud0c0\uc77c \ubcc0\uacbd \ubaa8\ub2ec \/\n            Modal content style change modal --- *\/}\n          &lt;View style={{marginTop: 20}}&gt;\n            &lt;FlmButton\n              title=\"\ucee8\ud150\uce20 \uc2a4\ud0c0\uc77c \ucee4\uc2a4\ud140 \ubaa8\ub2ec \uc5f4\uae30\/Open custom modal with content style\"\n              onPress={() =&gt; setModal3Visible(true)}\n            \/&gt;\n          &lt;\/View&gt;\n          &lt;FlmModal\n            isVisible={isModal3Visible}\n            onClose={() =&gt; setModal3Visible(false)}\n            title=\"\ucee8\ud150\uce20 \ucee4\uc2a4\ud140\/Content customization\"\n            message=\"\ubaa8\ub2ec \ucee8\ud150\uce20 \ubc15\uc2a4\uc758 \ubaa8\uc591\uc774 \ubcc0\uacbd\ub418\uc5c8\uc2b5\ub2c8\ub2e4.\/The appearance of the modal content box has changed.\"\n            animationDirection=\"slideRight\"\n            modalContentStyle={{\n              backgroundColor: '#FFF0F5', \/\/ \uc5f0\ud55c \ubd84\ud64d\uc0c9 \/ Light pink\n              borderRadius: 5, \/\/ \ub35c \ub465\uadfc \ubaa8\uc11c\ub9ac \/ Less rounded corners\n              borderWidth: 2, \/\/ \ud14c\ub450\ub9ac \ucd94\uac00 \/ Add border\n              borderColor: '#FF69B4', \/\/ \ud551\ud06c\uc0c9 \ud14c\ub450\ub9ac \/ Pink border\n              padding: 10, \/\/ \ud328\ub529 \uc870\uc808 \/ padding adjustment\n            }}\n            titleStyle={{\n              color: '#FF69B4', \/\/ \ud551\ud06c\uc0c9 \uc81c\ubaa9 \/ Pink Color Title\n              fontSize: 25,\n              fontWeight: 'normal',\n            }}\n            messageStyle={{\n              color: '#8B008B', \/\/ \ubcf4\ub77c\uc0c9 \uba54\uc2dc\uc9c0 \/ Pupple Color Message\n              fontStyle: 'italic',\n            }}&gt;\n            &lt;FlmText&gt;\n              \uc5ec\uae30\uc5d0 \ucd94\uac00\uc801\uc778 \ucee4\uc2a4\ud140 \ub0b4\uc6a9\uc774 \ub4e4\uc5b4\uac08 \uc218 \uc788\uc2b5\ub2c8\ub2e4!\/Additional\n              custom content can be added here!\n            &lt;\/FlmText&gt;\n          &lt;\/FlmModal&gt;\n\n          {\/* --- 4. \ub2e4\uc591\ud55c \uc2a4\ud0c0\uc77c \uc11e\uae30 \/ Mix different styles --- *\/}\n          &lt;View style={{marginTop: 20}}&gt;\n            &lt;FlmButton\n              title=\"\ub2e4\uc591\ud55c \uc2a4\ud0c0\uc77c \uc11e\uae30\/Mix different styles\"\n              onPress={() =&gt; setModal4Visible(true)}\n            \/&gt;\n          &lt;\/View&gt;\n          &lt;FlmModal\n            isVisible={isModal4Visible}\n            onClose={() =&gt; setModal4Visible(false)}\n            title=\"MIXED STYLE!\"\n            message=\"\ubc30\uacbd, \ucee8\ud150\uce20, \ud14d\uc2a4\ud2b8 \uc2a4\ud0c0\uc77c\uc774 \ubaa8\ub450 \ucee4\uc2a4\ud140\ub418\uc5c8\uc2b5\ub2c8\ub2e4.\/Background, content, and text styles are all customized.\"\n            animationDirection=\"slideDown\"\n            animationDuration={500} \/\/ \uc560\ub2c8\uba54\uc774\uc158 \uc2dc\uac04\ub3c4 \uc870\uc808 \/ Adjust animation time\n            backdropColor=\"rgba(255,165,0,0.4)\" \/\/ \uc8fc\ud669\uc0c9 \ubc18\ud22c\uba85 \ubc30\uacbd \/ Orange translucent background\n            modalContentStyle={{\n              backgroundColor: '#E0FFFF', \/\/ \uc5f0\ud55c \ud558\ub298\uc0c9 \/ light sky blue\n              borderRadius: 30, \/\/ \ub354 \ub465\uadfc \ubaa8\uc11c\ub9ac \/ more rounded corners\n              shadowColor: '#000',\n              shadowOffset: {width: 0, height: 4},\n              shadowOpacity: 0.3,\n              shadowRadius: 5,\n              elevation: 8,\n            }}\n            titleStyle={{\n              color: '#4682B4', \/\/ \uc2a4\ud2f8\ube14\ub8e8 \uc81c\ubaa9 \/ steel blue title\n              textDecorationLine: 'underline',\n            }}\n            messageStyle={{\n              color: '#2F4F4F', \/\/ \uc5b4\ub450\uc6b4 \uc2ac\ub808\uc774\ud2b8 \uadf8\ub808\uc774 \uba54\uc2dc\uc9c0 \/ Dark slate grey message\n              lineHeight: 24,\n            }}\n          \/&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,\n    backgroundColor: '#f0f2f5',\n  },\n  scrollViewContent: {\n    padding: 20,\n  },\n  header: {\n    \/\/ \uc0ad\uc81c\uc608\uc815\n    fontSize: 24,\n    fontWeight: 'bold',\n    marginBottom: 30,\n    color: '#333',\n    textAlign: 'center',\n  },\n  section: {\n    marginBottom: 30,\n    padding: 15,\n    backgroundColor: '#fff',\n    borderRadius: 10,\n    shadowColor: '#000',\n    shadowOffset: {width: 0, height: 2},\n    shadowOpacity: 0.1,\n    shadowRadius: 3,\n    elevation: 5,\n  },\n  customChildrenText: {\n    \/\/\uc0ad\uc81c\uc608\uc815\n    fontSize: 14,\n    color: '#333',\n    marginTop: 10,\n    marginBottom: 15,\n    textAlign: 'center',\n    fontStyle: 'italic',\n  },\n});\n<\/code><\/pre>\n\n\n\n<p><strong>3.\uc2a4\ud06c\ub9b0\uc0f7\/Screen Shot<\/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=\"\ubaa8\ub2ec\/FlmModal-react-native-freelifemakers-ui\" width=\"473\" height=\"840\" src=\"https:\/\/www.youtube.com\/embed\/ycFyJC9O68U?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>\ubaa8\ub2ec\uc740 \ud654\uba74 \uc704\uc5d0 \uc624\ubc84\ub808\uc774\ub418\uc5b4 \uc0ac\uc6a9\uc790 \uc0c1\ud638\uc791\uc6a9\uc744 \ucc28\ub2e8\ud558\uace0, \ud558\ub098\uc758 \uc791\uc5c5 \ub610\ub294 \uc815\ubcf4\uc5d0 \uc9d1\uc911\ud558\ub3c4\ub85d \ub9cc\ub4dc\ub294 UI\ucee8\ud14c\uc774\ub108\ub85c\uc11c \uc0ac\uc6a9\uc790\ub85c\uadf8\uc778,\ube44\ubc00\ubc88\ud638\uc785\ub825,\uc774\ubbf8\uc9c0\ud655\ub300\ubcf4\uae30\ub4f1\uc5d0 \ub9ce\uc774 \uc0ac\uc6a9\ub429\ub2c8\ub2e4. A modal is a UI container that overlays the screen and blocks user interaction, directing focus to a single task or piece of information.It is commonly used for user login, password input, image zooming, and similar interactions. 1.react-native-freelifemakers-ui [&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-1586","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\/1586","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=1586"}],"version-history":[{"count":7,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/1586\/revisions"}],"predecessor-version":[{"id":2217,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/1586\/revisions\/2217"}],"wp:attachment":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=1586"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=1586"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=1586"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}