{"id":1641,"date":"2025-07-09T04:58:45","date_gmt":"2025-07-09T04:58:45","guid":{"rendered":"https:\/\/www.freelifemakers.org\/wordpress\/?p=1641"},"modified":"2025-07-09T05:52:22","modified_gmt":"2025-07-09T05:52:22","slug":"flmsearchbar","status":"publish","type":"post","link":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2025\/07\/09\/flmsearchbar\/","title":{"rendered":"\uac80\uc0c9\ubc14\/FlmSearchBar"},"content":{"rendered":"\n<p>\ud83c\udf0f \uac80\uc0c9\ubc14\ub294 \uc571 \ub0b4\uc5d0\uc11c \uac80\uc0c9\uc744 \ud560 \uc218 \uc788\uac8c \ub9cc\ub4e0 input box\uc785\ub2c8\ub2e4.<br>The search bar is an input box that allows you to search within the app.<\/p>\n\n\n\n<p>\ud83c\udf0f \uc2a4\ud06c\ub9b0\uc0f7\/ScreenShot<br>\uad6c\uae00\ub4dc\ub77c\uc774\ube0c\/Google Drive : <br><a rel=\"noreferrer noopener\" href=\"https:\/\/drive.google.com\/drive\/folders\/1hhhIYmU8kSGOUTN9wd7H9igSppl6AE71?usp=drive_link\" target=\"_blank\">https:\/\/drive.google.com\/drive\/folders\/1hhhIYmU8kSGOUTN9wd7H9igSppl6AE71?usp=drive_link<\/a><\/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 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.\uc758\uc874\uc131 \ubaa8\ub4c8 \uc124\uce58\ud558\uae30<\/strong> \/ <strong>peerDependinceis Module Install<\/strong><br>&#8212; \ubaa8\ub4c8\ub0b4\uc5d0 package.json\ud30c\uc77c\uc5d0\ub294 \ub2e4\uc74c\uacfc \uac19\uc740 peerDependencies\uac00 \uc788\uc2b5\ub2c8\ub2e4.<br>The package.json file within the module contains the following peerDependencies:<\/p>\n\n\n\n<p>&#8212; npm \uba85\ub839\uc5b4\ub85c \uc124\uce58 \ud558\uc2dc\uba74 \ub429\ub2c8\ub2e4.<br>You can install it using the npm command.<\/p>\n\n\n\n<p>&#8212; FlmSearchBar\ub294 react-native-vector-icons \ubaa8\ub4c8\uc774 \uc124\uce58\ub418\uc5b4\uc57c\ud569\ub2c8\ub2e4.<br>FlmSearchBar requires the react-native-vector-icons module to be installed.<\/p>\n\n\n\n<p>&#8212; react-native-vector-icons\uc124\uce58 \ubc84\uc804\uc740 \ucd5c\uc2e0\ubc84\uc804 \uc124\uce58 \ud558\uc2dc\uba74 \ub429\ub2c8\ub2e4.<br>Please install the latest version of react-native-vector-icons.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>  \"peerDependencies\": {\n    \"react\": \"*\",\n    \"react-native\": \"*\",\n    \"react-native-gesture-handler\": \"&gt;=2.12.0\",\n    \"react-native-reanimated\": \"&gt;=3.17.0\",\n    \"react-native-vector-icons\": \"&gt;=10.2.0\"\n  },<\/code><\/pre>\n\n\n\n<p><strong>2.\uc0ac\uc6a9\ud558\uae30 \/ Usage<\/strong><br>1)\uae30\ubcf8 \uac80\uc0c9\ubc14 \/  FlmSearchBar<br>&#8212; \ubcf4\ub77c\uc0c9 \ubd80\ubd84\uc774 \uc2e4\uc81c\ub85c \uac80\uc0c9\ubc14 \ubd80\ubd84\uc785\ub2c8\ub2e4.<br>The purple part is actually the search bar.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import React, { useState } from \"react\";\nimport {\n  View,\n  Text,\n  StyleSheet,\n  SafeAreaView,\n  ScrollView,\n  Alert,\n} from \"react-native\";\n\nimport {\n  <mark style=\"background-color:rgba(0, 0, 0, 0);color:#ca6cdc\" class=\"has-inline-color\">FlmSearchBar<\/mark>,\n  FlmButton,\n  FlmText,\n} from \"react-native-freelifemakers-ui\";\n\nexport default function FlmSearchBarApp() {\n  const &#91;searchText, setSearchText] = useState(\"\");\n\n  \/\/ \n  \/\/ Search submission handler\n  const handleSearchSubmit = () =&gt; {\n    console.log(\"\uac80\uc0c9 \uc81c\ucd9c\/Submit Search:\", searchText);\n    \/\/ \uc2e4\uc81c \uac80\uc0c9 \ub85c\uc9c1\uc744 \uc5ec\uae30\uc5d0 \uad6c\ud604\ud569\ub2c8\ub2e4.\n    \/\/ Implement the actual search logic here.\n    Alert.alert(\n      `\uac80\uc0c9 \uc81c\ucd9c\/Submit Search`,\n      `'${searchText}'(\uc73c)\ub85c \uac80\uc0c9\ud569\ub2c8\ub2e4.\/Search for '${searchText}'.`,\n    );\n  };\n\n  \/\/ \uac80\uc0c9\uc5b4 \uc9c0\uc6b0\uae30 \ud578\ub4e4\ub7ec\n  \/\/ Clear search term handler\n  const handleClearSearch = () =&gt; {\n    console.log(\"\uac80\uc0c9\uc5b4 \uc9c0\uc6b0\uae30\/Clear search term\");\n    \/\/ \uac80\uc0c9\uc5b4 \uc9c0\uc6b0\uae30 \uc2dc \ucd94\uac00\uc801\uc778 \ub85c\uc9c1\uc774 \ud544\uc694\ud558\uba74 \uc5ec\uae30\uc5d0 \uad6c\ud604\ud569\ub2c8\ub2e4.\n    \/\/ If additional logic is needed when clearing search terms, implement it here.\n    Alert.alert(\n      `\uac80\uc0c9\uc5b4 \uc9c0\uc6b0\uae30\/Clear search term`,\n      `\uac80\uc0c9\uc5b4\uac00 \uc9c0\uc6cc\uc84c\uc2b5\ub2c8\ub2e4.\/Your search term has been cleared.`,\n    );\n  };\n\n  return (\n    &lt;SafeAreaView&gt;\n      &lt;ScrollView&gt;\n  \n\n<mark style=\"background-color:rgba(0, 0, 0, 0);color:#ca6cdc\" class=\"has-inline-color\">        &lt;FlmSearchBar\n          value={searchText}\n          onChangeText={setSearchText}\n          placeholder=\"\uc5ec\uae30\uc5d0 \uac80\uc0c9\uc5b4\ub97c \uc785\ub825\ud558\uc138\uc694\/Enter your search term here\"\n          onSubmitEditing={handleSearchSubmit}\n          onClear={handleClearSearch}\n          style={styles.searchBarMargin}\n        \/&gt;<\/mark>\n\n      &lt;\/ScrollView&gt;\n    &lt;\/SafeAreaView&gt;\n  );\n}\n\n}<\/code><\/pre>\n\n\n\n<p><strong>3.\uc608\uc81c\ucf54\ub4dc \/ Example code<\/strong><br>&#8212; \uc544\ub798\uc758 \ucf54\ub4dc\uc5d0\uc11c <strong>import Ionicons from &#8216;react-native-vector-icons\/Ionicons&#8217;;<\/strong>\uc774 \ubd80\ubd84\uc740 ReactNative CLI\uc5d0\ub9cc \ud574\ub2f9\ub429\ub2c8\ub2e4.<br>In the code below, import Ionicons from &#8216;react-native-vector-icons\/Ionicons&#8217;; This part is only for ReactNative CLI.<\/p>\n\n\n\n<p>&#8212; \uc5d1\uc2a4\ud3ec \uc0ac\uc6a9\uc790\ub294 \uc704\uc758 \ucf54\ub4dc\ub97c \uc8fc\uc11d\ucc98\ub9ac \ud574\uc8fc\uc138\uc694<br>Expo users, please comment out the code above.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ flmSearchBar.js\nimport React, {useState} from 'react';\nimport {\n  View,\n  Text,\n  StyleSheet,\n  SafeAreaView,\n  ScrollView,\n  Alert,\n} from 'react-native';\n\n\/\/ ReactNative CLI\uc778\uacbd\uc6b0\n\/\/ npm install react-native-vector-icons\n<strong>import Ionicons from 'react-native-vector-icons\/Ionicons';<\/strong>\n\/\/ Expo\ub294 react-native-vector-icons\ub97c \ub0b4\uc7a5\ud558\uace0 \uc788\uc74c\n\/\/ Expo includes react-native-vector-icons by default.\n\/\/ import {Ionicons} from '@expo\/vector-icons';\n\n\/\/ react-native-freelifemakers-ui \ud328\ud0a4\uc9c0\uc5d0\uc11c FlmSearchBar \uc784\ud3ec\ud2b8\nimport {FlmSearchBar, FlmButton, FlmText} from 'react-native-freelifemakers-ui';\n\nexport default function FlmSearchBarApp() {\n  const &#91;searchText, setSearchText] = useState('');\n\n  \/\/ \uac80\uc0c9 \uc81c\ucd9c \ud578\ub4e4\ub7ec\n  \/\/ Search submission handler\n  const handleSearchSubmit = () =&gt; {\n    console.log('\uac80\uc0c9 \uc81c\ucd9c\/Submit Search:', searchText);\n    \/\/ \uc2e4\uc81c \uac80\uc0c9 \ub85c\uc9c1\uc744 \uc5ec\uae30\uc5d0 \uad6c\ud604\ud569\ub2c8\ub2e4.\n    \/\/ Implement the actual search logic here.\n    Alert.alert(\n      `\uac80\uc0c9 \uc81c\ucd9c\/Submit Search`,\n      `'${searchText}'(\uc73c)\ub85c \uac80\uc0c9\ud569\ub2c8\ub2e4.\/Search for '${searchText}'.`,\n    );\n  };\n\n  \/\/ \uac80\uc0c9\uc5b4 \uc9c0\uc6b0\uae30 \ud578\ub4e4\ub7ec\n  \/\/ Clear search term handler\n  const handleClearSearch = () =&gt; {\n    console.log('\uac80\uc0c9\uc5b4 \uc9c0\uc6b0\uae30\/Clear search term');\n    \/\/ \uac80\uc0c9\uc5b4 \uc9c0\uc6b0\uae30 \uc2dc \ucd94\uac00\uc801\uc778 \ub85c\uc9c1\uc774 \ud544\uc694\ud558\uba74 \uc5ec\uae30\uc5d0 \uad6c\ud604\ud569\ub2c8\ub2e4.\n    \/\/ If additional logic is needed when clearing search terms, implement it here.\n    Alert.alert(\n      `\uac80\uc0c9\uc5b4 \uc9c0\uc6b0\uae30\/Clear search term`,\n      `\uac80\uc0c9\uc5b4\uac00 \uc9c0\uc6cc\uc84c\uc2b5\ub2c8\ub2e4.\/Your search term has been cleared.`,\n    );\n  };\n\n  return (\n    &lt;SafeAreaView style={styles.safeArea}&gt;\n      &lt;ScrollView contentContainerStyle={styles.scrollViewContent}&gt;\n        &lt;Text style={styles.header}&gt;FlmSearchBar&lt;\/Text&gt;\n        {\/* \uae30\ubcf8 \uac80\uc0c9 \ubc14 \/ Default Search Bar *\/}\n        &lt;FlmText style={styles.subHeader}&gt;\n          \uae30\ubcf8 \uac80\uc0c9 \ubc14 \/ Default Search Bar\n        &lt;\/FlmText&gt;\n        &lt;FlmSearchBar\n          value={searchText}\n          onChangeText={setSearchText}\n          placeholder=\"\uc5ec\uae30\uc5d0 \uac80\uc0c9\uc5b4\ub97c \uc785\ub825\ud558\uc138\uc694\/Enter your search term here\"\n          onSubmitEditing={handleSearchSubmit}\n          onClear={handleClearSearch}\n          style={styles.searchBarMargin}\n        \/&gt;\n        &lt;FlmText style={styles.currentSearchText}&gt;\n          \ud604\uc7ac \uac80\uc0c9\uc5b4\/ Current search term: {searchText || '\uc5c6\uc74c\/none'}\n        &lt;\/FlmText&gt;\n        {\/* \ucee4\uc2a4\ud130\ub9c8\uc774\uc9d5\ub41c \uac80\uc0c9 \ubc14 \uc608\uc2dc \/ Example of a customized search bar *\/}\n        &lt;FlmText style={styles.subHeader}&gt;\n          \ucee4\uc2a4\ud140 \uc2a4\ud0c0\uc77c \uac80\uc0c9 \ubc14 \/ Custom style search bar\n        &lt;\/FlmText&gt;\n        &lt;FlmSearchBar\n          value={searchText}\n          onChangeText={setSearchText}\n          placeholder=\"\ub2e4\ub978 \uc2a4\ud0c0\uc77c\uc758 \uac80\uc0c9 \ubc14\/Search bar in different styles\"\n          placeholderTextColor=\"#aaa\"\n          style={styles.customSearchBar}\n          inputStyle={styles.customInput}\n          showClearButton={false} \/\/ \uc9c0\uc6b0\uae30 \ubc84\ud2bc \uc228\uae30\uae30 \/ Hide the erase button\n        \/&gt;\n        {\/* \ub2e4\ub978 \ucef4\ud3ec\ub10c\ud2b8\uc640\uc758 \uc870\ud569 \uc608\uc2dc \/ Example of combination with other components *\/}\n        &lt;FlmText style={styles.subHeader}&gt;\n          \ubc84\ud2bc\uacfc \ud568\uaed8 \uac80\uc0c9 \/ Search with button\n        &lt;\/FlmText&gt;\n        &lt;FlmSearchBar\n          value={searchText}\n          onChangeText={setSearchText}\n          placeholder=\"\ubc84\ud2bc\uacfc \ud568\uaed8 \uac80\uc0c9\/Search with button\"\n          onSubmitEditing={handleSearchSubmit}\n          keyboardType=\"web-search\"\n        \/&gt;\n        &lt;FlmButton\n          title=\"\uac80\uc0c9 \uc2e4\ud589\/Run search\"\n          onPress={handleSearchSubmit}\n          style={styles.searchButton}\n        \/&gt;\n        {\/* \ud558\ub2e8 \uc5ec\ubc31 \/ bottom margin *\/}\n        &lt;View style={{height: 50}} \/&gt;\n      &lt;\/ScrollView&gt;\n    &lt;\/SafeAreaView&gt;\n  );\n}\n\nconst styles = StyleSheet.create({\n  safeArea: {\n    flex: 1,\n    backgroundColor: '#f8f8f8',\n  },\n  scrollViewContent: {\n    flexGrow: 1,\n    paddingVertical: 20,\n    alignItems: 'center',\n  },\n  header: {\n    fontSize: 28,\n    fontWeight: 'bold',\n    marginBottom: 30,\n    color: '#333',\n  },\n  subHeader: {\n    fontSize: 20,\n    fontWeight: '600',\n    marginTop: 30,\n    marginBottom: 15,\n    color: '#555',\n  },\n  searchBarMargin: {\n    marginBottom: 20,\n  },\n  currentSearchText: {\n    fontSize: 16,\n    color: '#666',\n    marginBottom: 20,\n  },\n  customSearchBar: {\n    backgroundColor: '#e0f7fa', \/\/ \ubc1d\uc740 \ud30c\ub780\uc0c9 \ubc30\uacbd \/ light blue background\n    borderRadius: 10,\n    borderWidth: 1,\n    borderColor: '#b2ebf2',\n    height: 45,\n    marginVertical: 10,\n  },\n  customInput: {\n    color: '#00796b', \/\/ \uc9c4\ud55c \uccad\ub85d\uc0c9 \ud14d\uc2a4\ud2b8 \/ Dark turquoise text\n    fontWeight: 'bold',\n  },\n  searchButton: {\n    marginTop: 10,\n    backgroundColor: '#007bff',\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-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=\"\uac80\uc0c9\ubc14\/FlmSearchBar\" width=\"473\" height=\"840\" src=\"https:\/\/www.youtube.com\/embed\/fThXKWNTCOo?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>\ud83c\udf0f \uac80\uc0c9\ubc14\ub294 \uc571 \ub0b4\uc5d0\uc11c \uac80\uc0c9\uc744 \ud560 \uc218 \uc788\uac8c \ub9cc\ub4e0 input box\uc785\ub2c8\ub2e4.The search bar is an input box that allows you to search within the app. \ud83c\udf0f \uc2a4\ud06c\ub9b0\uc0f7\/ScreenShot\uad6c\uae00\ub4dc\ub77c\uc774\ube0c\/Google Drive : https:\/\/drive.google.com\/drive\/folders\/1hhhIYmU8kSGOUTN9wd7H9igSppl6AE71?usp=drive_link 1.react-native-freelifemakers-ui NPM \ubaa8\ub4c8 \uc124\uce58\ud558\uae30 \/ react-native-freelifemakers-ui NPM Module Install 2.\uc758\uc874\uc131 \ubaa8\ub4c8 \uc124\uce58\ud558\uae30 \/ peerDependinceis Module Install&#8212; \ubaa8\ub4c8\ub0b4\uc5d0 package.json\ud30c\uc77c\uc5d0\ub294 \ub2e4\uc74c\uacfc \uac19\uc740 peerDependencies\uac00 \uc788\uc2b5\ub2c8\ub2e4.The package.json file within [&hellip;]<\/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-1641","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\/1641","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=1641"}],"version-history":[{"count":19,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/1641\/revisions"}],"predecessor-version":[{"id":2244,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/1641\/revisions\/2244"}],"wp:attachment":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=1641"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=1641"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=1641"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}