FlmSearchBar | Notion

👉The search bar is an input box that allows you to search within the app.

1. react-native-freelifemakers-ui NPM Module Install

npm install react-native-freelifemakers-ui

2.PeerDependinceis Module Install

✔️The package.json file within the module contains the following peerDependencies:

✔️You can install it using the npm command.

✔️FlmSearchBar requires the react-native-vector-icons module to be installed.

✔️Please install the latest version of react-native-vector-icons.

  "peerDependencies": {
    "react": "*",
    "react-native": "*",
    "react-native-gesture-handler": ">=2.12.0",
    "react-native-reanimated": ">=3.17.0",
    "react-native-vector-icons": ">=10.2.0"
  },

2.Usage

✔️The part highlighted in bold and italics is FlmSearchBar.

import React, { useState } from "react";
import {
  View,
  Text,
  StyleSheet,
  SafeAreaView,
  ScrollView,
  Alert,
} from "react-native";

import {
  ***FlmSearchBar,***
  FlmButton,
  FlmText,
} from "react-native-freelifemakers-ui";

export default function FlmSearchBarApp() {
  const [searchText, setSearchText] = useState("");

  // 
  // Search submission handler
  const handleSearchSubmit = () => {
    console.log("검색 제출/Submit Search:", searchText);
    // 실제 검색 로직을 여기에 구현합니다.
    // Implement the actual search logic here.
    Alert.alert(
      `검색 제출/Submit Search`,
      `'${searchText}'(으)로 검색합니다./Search for '${searchText}'.`,
    );
  };

  // 검색어 지우기 핸들러
  // Clear search term handler
  const handleClearSearch = () => {
    console.log("검색어 지우기/Clear search term");
    // 검색어 지우기 시 추가적인 로직이 필요하면 여기에 구현합니다.
    // If additional logic is needed when clearing search terms, implement it here.
    Alert.alert(
      `검색어 지우기/Clear search term`,
      `검색어가 지워졌습니다./Your search term has been cleared.`,
    );
  };

  return (
    <SafeAreaView>
      <ScrollView>
  

        ***<FlmSearchBar
          value={searchText}
          onChangeText={setSearchText}
          placeholder="여기에 검색어를 입력하세요/Enter your search term here"
          onSubmitEditing={handleSearchSubmit}
          onClear={handleClearSearch}
          style={styles.searchBarMargin}
        />***

      </ScrollView>
    </SafeAreaView>
  );
 }

}

3.Full Code

✔️In the code below, import Ionicons from ‘react-native-vector-icons/Ionicons’; This part is only for ReactNative CLI. ✔️Expo users, please comment out the code above.

// flmSearchBar.js
import React, {useState} from 'react';
import {
  View,
  Text,
  StyleSheet,
  SafeAreaView,
  ScrollView,
  Alert,
} from 'react-native';

// ReactNative CLI인경우
// npm install react-native-vector-icons
import Ionicons from 'react-native-vector-icons/Ionicons';
// Expo는 react-native-vector-icons를 내장하고 있음
// Expo includes react-native-vector-icons by default.
// import {Ionicons} from '@expo/vector-icons';

// react-native-freelifemakers-ui 패키지에서 FlmSearchBar 임포트
import {FlmSearchBar, FlmButton, FlmText} from 'react-native-freelifemakers-ui';

export default function FlmSearchBarApp() {
  const [searchText, setSearchText] = useState('');

  // 검색 제출 핸들러
  // Search submission handler
  const handleSearchSubmit = () => {
    console.log('검색 제출/Submit Search:', searchText);
    // 실제 검색 로직을 여기에 구현합니다.
    // Implement the actual search logic here.
    Alert.alert(
      `검색 제출/Submit Search`,
      `'${searchText}'(으)로 검색합니다./Search for '${searchText}'.`,
    );
  };

  // 검색어 지우기 핸들러
  // Clear search term handler
  const handleClearSearch = () => {
    console.log('검색어 지우기/Clear search term');
    // 검색어 지우기 시 추가적인 로직이 필요하면 여기에 구현합니다.
    // If additional logic is needed when clearing search terms, implement it here.
    Alert.alert(
      `검색어 지우기/Clear search term`,
      `검색어가 지워졌습니다./Your search term has been cleared.`,
    );
  };

  return (
    <SafeAreaView style={styles.safeArea}>
      <ScrollView contentContainerStyle={styles.scrollViewContent}>
        <Text style={styles.header}>FlmSearchBar</Text>
        {/* 기본 검색 바 / Default Search Bar */}
        <FlmText style={styles.subHeader}>
          기본 검색 바 / Default Search Bar
        </FlmText>
        <FlmSearchBar
          value={searchText}
          onChangeText={setSearchText}
          placeholder="여기에 검색어를 입력하세요/Enter your search term here"
          onSubmitEditing={handleSearchSubmit}
          onClear={handleClearSearch}
          style={styles.searchBarMargin}
        />
        <FlmText style={styles.currentSearchText}>
          현재 검색어/ Current search term: {searchText || '없음/none'}
        </FlmText>
        {/* 커스터마이징된 검색 바 예시 / Example of a customized search bar */}
        <FlmText style={styles.subHeader}>
          커스텀 스타일 검색 바 / Custom style search bar
        </FlmText>
        <FlmSearchBar
          value={searchText}
          onChangeText={setSearchText}
          placeholder="다른 스타일의 검색 바/Search bar in different styles"
          placeholderTextColor="#aaa"
          style={styles.customSearchBar}
          inputStyle={styles.customInput}
          showClearButton={false} // 지우기 버튼 숨기기 / Hide the erase button
        />
        {/* 다른 컴포넌트와의 조합 예시 / Example of combination with other components */}
        <FlmText style={styles.subHeader}>
          버튼과 함께 검색 / Search with button
        </FlmText>
        <FlmSearchBar
          value={searchText}
          onChangeText={setSearchText}
          placeholder="버튼과 함께 검색/Search with button"
          onSubmitEditing={handleSearchSubmit}
          keyboardType="web-search"
        />
        <FlmButton
          title="검색 실행/Run search"
          onPress={handleSearchSubmit}
          style={styles.searchButton}
        />
        {/* 하단 여백 / bottom margin */}
        <View style={{height: 50}} />
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    backgroundColor: '#f8f8f8',
  },
  scrollViewContent: {
    flexGrow: 1,
    paddingVertical: 20,
    alignItems: 'center',
  },
  header: {
    fontSize: 28,
    fontWeight: 'bold',
    marginBottom: 30,
    color: '#333',
  },
  subHeader: {
    fontSize: 20,
    fontWeight: '600',
    marginTop: 30,
    marginBottom: 15,
    color: '#555',
  },
  searchBarMargin: {
    marginBottom: 20,
  },
  currentSearchText: {
    fontSize: 16,
    color: '#666',
    marginBottom: 20,
  },
  customSearchBar: {
    backgroundColor: '#e0f7fa', // 밝은 파란색 배경 / light blue background
    borderRadius: 10,
    borderWidth: 1,
    borderColor: '#b2ebf2',
    height: 45,
    marginVertical: 10,
  },
  customInput: {
    color: '#00796b', // 진한 청록색 텍스트 / Dark turquoise text
    fontWeight: 'bold',
  },
  searchButton: {
    marginTop: 10,
    backgroundColor: '#007bff',
  },
});