{"id":1535,"date":"2025-06-20T04:51:14","date_gmt":"2025-06-20T04:51:14","guid":{"rendered":"https:\/\/www.freelifemakers.org\/wordpress\/?p=1535"},"modified":"2025-07-18T04:55:51","modified_gmt":"2025-07-18T04:55:51","slug":"flmbutton","status":"publish","type":"post","link":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2025\/06\/20\/flmbutton\/","title":{"rendered":"\ubc84\ud2bc\/FlmButton"},"content":{"rendered":"\n<p>\ub9ac\uc561\ud2b8\ub124\uc774\ud2f0\ube0c \uc5d1\uc2a4\ud3ec\uc640 CLI\uc5d0\uc11c \ubaa8\ub450 \uc0ac\uc6a9\uac00\ub2a5\ud569\ub2c8\ub2e4.<br>Available for use with both React Native Expo and ReactNativeCLI.<\/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><\/p>\n\n\n\n<p>1)FlmButton \ubc84\ud2bc\uc0ac\uc6a9 \/ Use FlmButton<br>&#8212; \ubaa8\ub4c8 \uc784\ud3ec\ud2b8 \/ module import<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { FlmButton } from \"react-native-freelifemakers-ui\";<\/code><\/pre>\n\n\n\n<p>&#8212; \ucf54\ub4dc \/ code<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>    {\/* default *\/}\n      &lt;FlmButton\n        title=\"Click!\"\n        onPress={handlePress}\n      \/&gt;\n\n    {\/* \uc2a4\ud0c0\uc77c \ucd94\uac00\ubc84\ud2bc \/ Add style button *\/}\n    &lt;FlmButton\n        title=\"Green Button\"\n        onPress={goToApp}\n        style={{ backgroundColor: '#28a745', marginTop: 20 }}\n        textStyle={{ fontSize: 18 }}\n    \/&gt;\n\n    {\/* \ube44\ud65c\uc131\ud654\ub41c \ubc84\ud2bc \/ Disable Button*\/}\n    &lt;FlmButton\n        title=\"Disable Button\"\n        onPress={handlePress}\n        disabled={true}\n        style={{ marginTop: 20 }}\n    \/&gt;<\/code><\/pre>\n\n\n\n<p>2)FlmText \uc0ac\uc6a9 \/ Use FlmText<br>&#8212; \ubaa8\ub4c8 \uc784\ud3ec\ud2b8 \/ module import<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { FlmButton } from \"react-native-freelifemakers-ui\"; \/\/ \uc0ac\uc6a9\ubc95 \/ Usage<\/code><\/pre>\n\n\n\n<p>&#8212; \ucf54\ub4dc \/ code<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { Alert, Text, View, ScrollView, SafeAreaView } from \"react-native\";\nimport { FlmButton } from \"react-native-freelifemakers-ui\"; \/\/ \uc0ac\uc6a9\ubc95 \/ Usage\n\/\/import { FlmRadioGroup } from \".\/FlmRadioGroups\";\nimport { Ionicons } from \"@expo\/vector-icons\";\nimport { useRouter } from \"expo-router\"; \/\/ useRouter \ud6c5 \uc784\ud3ec\ud2b8\n\nconst handlePress = () => {\n  Alert.alert(\"\ubc84\ud2bc\uc774 \ub20c\ub838\uc2b5\ub2c8\ub2e4!!\/The button was pressed!!.\");\n};\n\nexport default function Index() {\n  \/\/ useRouter \ud6c5\uc744 \ucef4\ud3ec\ub10c\ud2b8\uc758 \ucd5c\uc0c1\uc704 \ub808\ubca8\uc5d0\uc11c \ud638\ucd9c\ud569\ub2c8\ub2e4.\n  const router = useRouter();\n\n  const handleIconButtonPress = () => {\n    \/\/ \uc774\uc81c router \uac1d\uccb4\ub97c \uc0ac\uc6a9\ud558\uc5ec \ud654\uba74 \uc774\ub3d9\uc744 \ucc98\ub9ac\ud569\ub2c8\ub2e4.\n    \/\/ '\/flmText' \uacbd\ub85c\ub85c \uc774\ub3d9\ud55c\ub2e4\uace0 \uac00\uc815\ud569\ub2c8\ub2e4.\n    \/\/ \uc774 \uacbd\ub85c\uc5d0 \ud574\ub2f9\ud558\ub294 \ud30c\uc77c (\uc608: app\/flmText.tsx \ub610\ub294 app\/flmText.js)\uc774 \uc788\uc5b4\uc57c \ud569\ub2c8\ub2e4.\n    router.push(\"\/flmText\");\n  };\n\n  \/\/ \ud568\uc218 \uc815\uc758 \uc2dc \uc778\uc790\ub97c \ubc1b\ub3c4\ub85d \ubcc0\uacbd\n  const navigateToScreen = (screenName) => {\n    console.log(`Navigating to: \/${screenName}`);\n    router.push(`\/${screenName}`);\n  };\n\n  return (\n    &lt;SafeAreaView style={{ flex: 1, backgroundColor: \"#f9f9f9\" }}>\n      &lt;ScrollView contentContainerStyle={{ padding: 20, alignItems: \"center\" }}>\n        &lt;Text style={{ marginBottom: 20 }}>FlmButton Style&lt;\/Text>\n\n        {\/* \uae30\ubcf8\ubc84\ud2bc \/ default button *\/}\n        &lt;FlmButton title=\"Default Button\" onPress={handlePress} \/>\n\n        {\/* \uc5f0\ub450\uc0c9 \ubc84\ud2bc \/ Green Color Button*\/}\n        &lt;FlmButton\n          title=\"Green Button\"\n          onPress={handlePress}\n          style={{ backgroundColor: \"#28a745\", marginTop: 20 }}\n          textStyle={{ fontSize: 18 }}\n        \/>\n\n        {\/* \uc544\uc774\ucf58\uc744 \ubc84\ud2bc \/ icon button *\/}\n        &lt;FlmButton\n          title=\"Icon Button!\"\n          icon={&lt;Ionicons name=\"heart-outline\" size={20} color=\"white\" \/>}\n          onPress={handleIconButtonPress} \/\/ \uc218\uc815\ub41c \ud578\ub4e4\ub7ec \uc5f0\uacb0\n          style={{ backgroundColor: \"#FFA500\", marginTop: 20 }}\n        \/>\n\n        {\/* \ube44\ud65c\uc131\ud654\ub41c \ubc84\ud2bc \/ Disable Button*\/}\n        &lt;FlmButton\n          title=\"Disable Button\"\n          onPress={handlePress}\n          disabled={true}\n          style={{ marginTop: 20 }}\n        \/>\n\n        {\/* \uc544\uc774\ucf58\uc744 \ubc84\ud2bc2 \/ icon button *\/}\n        &lt;FlmButton\n          title=\"move to FlmTextInput\"\n          icon={&lt;Ionicons name=\"heart-outline\" size={20} color=\"white\" \/>}\n          onPress={() => navigateToScreen(\"flmTextInput\")} \/\/\n          style={{ backgroundColor: \"#FFA500\", marginTop: 20 }}\n        \/>\n\n        {\/* \uae30\ubcf8\ubc84\ud2bc2 \/ default button2 *\/}\n        &lt;FlmButton\n          title=\"move to FlmRadio\"\n          onPress={() => navigateToScreen(\"flmRadio\")}\n          style={{ marginTop: 20 }}\n        \/>\n        {\/* \uae30\ubcf8\ubc84\ud2bc3 \/ default button3 \/ FlmCheckBox *\/}\n        &lt;FlmButton\n          title=\"move to FlmCheckBox\"\n          onPress={() => navigateToScreen(\"flmCheckBox\")}\n          style={{ marginTop: 20 }}\n        \/>\n        {\/* \uae30\ubcf8\ubc84\ud2bc3 \/ default button3 \/ FlmModal *\/}\n        &lt;FlmButton\n          title=\"move to FlmModal\"\n          onPress={() => navigateToScreen(\"flmModal\")}\n          style={{ marginTop: 20 }}\n        \/>\n        {\/* \uae30\ubcf8\ubc84\ud2bc4 \/ default button4 \/ FlmBottomSheet *\/}\n        &lt;FlmButton\n          title=\"move to FlmBottomSheet\"\n          onPress={() => navigateToScreen(\"flmBottomSheet\")}\n          style={{ marginTop: 20 }}\n        \/>\n        {\/* \uae30\ubcf8\ubc84\ud2bc5 \/ default button5 \/ FlmSnackBar - Using Context API *\/}\n        &lt;FlmButton\n          title=\"move to FlmSnackBar\"\n          onPress={() => navigateToScreen(\"flmSnackBar\")}\n          style={{ marginTop: 20 }}\n        \/>\n        {\/* \uae30\ubcf8\ubc84\ud2bc6 \/ default button6 \/ FlmSnackBar - Custom *\/}\n        &lt;FlmButton\n          title=\"move to FlmSnackBar Custom\"\n          onPress={() => navigateToScreen(\"flmSnackBarCustom\")}\n          style={{ marginTop: 20 }}\n        \/>\n        {\/* \uae30\ubcf8\ubc84\ud2bc7 \/ default button7 \/ FlmSearchBar #007bff #9370DB*\/}\n        &lt;FlmButton\n          title=\"move to FlmSearchBar Custom\"\n          onPress={() => navigateToScreen(\"flmSearchBar\")}\n          style={{ backgroundColor: \"#F44336\", marginTop: 20 }}\n        \/>\n      &lt;\/ScrollView>\n    &lt;\/SafeAreaView>\n  );\n}\n<\/code><\/pre>\n\n\n\n<p>3.\uc2a4\ud06c\ub9b0\uc0f7 \/ ScreenShot<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"550\" height=\"750\" src=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/06\/FlmButton.jpg\" alt=\"\" class=\"wp-image-1539\" srcset=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/06\/FlmButton.jpg 550w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/06\/FlmButton-220x300.jpg 220w\" sizes=\"auto, (max-width: 550px) 100vw, 550px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>\ub9ac\uc561\ud2b8\ub124\uc774\ud2f0\ube0c \uc5d1\uc2a4\ud3ec\uc640 CLI\uc5d0\uc11c \ubaa8\ub450 \uc0ac\uc6a9\uac00\ub2a5\ud569\ub2c8\ub2e4.Available for use with both React Native Expo and ReactNativeCLI. 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 1)FlmButton \ubc84\ud2bc\uc0ac\uc6a9 \/ Use FlmButton&#8212; \ubaa8\ub4c8 \uc784\ud3ec\ud2b8 \/ module import &#8212; \ucf54\ub4dc \/ code 2)FlmText \uc0ac\uc6a9 \/ Use FlmText&#8212; \ubaa8\ub4c8 \uc784\ud3ec\ud2b8 \/ module import &#8212; \ucf54\ub4dc \/ code 3.\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-1535","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\/1535","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=1535"}],"version-history":[{"count":8,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/1535\/revisions"}],"predecessor-version":[{"id":2160,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/1535\/revisions\/2160"}],"wp:attachment":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=1535"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=1535"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=1535"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}