React-Native-Input-Search-Bar

A simple search bar component for React Native.

TOC

• React-Native-Input-Search-Bar
  • TOC
  • Preview
  • Installation
  • Getting Started
    • Basic usage
  • Props
    • Props for ReactNativeInputSearchBar
    • TypeDefine for ReactNativeInputSearchBar
  • Reference
  • Contribution
  • License

Preview

Installation

• 1.Run npm i react-native-svg react-native-input-search-bar --save
  • or yarn add react-native-svg react-native-input-search-bar
• 2.import ReactNativeInputSearchBar from 'react-native-input-search-bar'
• 3. Run npx pod-install if you are using iOS, and react-native link if you are using Android. (this step is for react-native-svg)

Notes: You need to install react-native-svg first, because this component depends on it to render the search icon.

Getting Started

Add react-native-input-search-bar to your js file.

import ReactNativeInputSearchBar from 'react-native-input-search-bar'

Inside your component's render method, use ReactNativeInputSearchBar:

 render() {
     return (
         <View>
          <ReactNativeInputSearchBar
            onSubmitSearch={(_val) => {
              console.log(_val);
            }}
            ...
            buttonText="Search"
          />
         </View>
     );
 }

Basic usage

import ReactNativeInputSearchBar from 'react-native-input-search-bar'
import { useState } from 'react'

const SearchBar = () => {
  const [query, setQuery] = useState<string>('')
  const [activeSearch, setActiveSearch] = useState<boolean>(false)

  const onSubmitSearch = (val: string) => {
    setQuery(val)
  }

  return (
    <ReactNativeInputSearchBar
      onSubmitSearch={onSubmitSearch}
      onActiveSearch={setActiveSearch}
      inputTextStyle={{}}
      buttonStyle={{
        paddingHorizontal: 20
      }}
      buttonTextStyle={{}}
      searchToolContainerStyle={{ height: 40 }}
      inputContainerStyle={{
        backgroundColor: '#ffffff',
        borderWidth: 0.3,
        borderRadius: 20
      }}
      inputProps={{
        placeholder: 'Please enter your search query'
      }}
      buttonText="Search"
    />
  )
}

export default SearchBar

Props

Props for ReactNativeInputSearchBar

| Prop | Type | Default | Description | | ------------------------ | -------- | ------- | ---------------------------------------------------- | | onSubmitSearch | function | | Callback function when the search button is pressed. | | onActiveSearch | function | | Callback function when the search bar is active. | | inputTextStyle | object | | Style for the input text. | | buttonStyle | object | | Style for the search button. | | buttonTextStyle | object | | Style for the search button text. | | searchToolContainerStyle | object | | Style for the search tool container. | | inputContainerStyle | object | | Style for the input container. | | inputProps | object | | Props for the input. | | buttonText | string | | Text for the search button. | | clearButton | boolean | true | Whether to show the clear button. | | inputActiveColor | string | | Color for the input when active. | | inputInactiveColor | string | | Color for the input when inactive. | | iconStyle | object | | Style for the search icon. | | customIcon | element | | Custom icon for the search input icon. |

TypeDefine for ReactNativeInputSearchBar

interface RNInputSearchBarProps {
  searchToolContainerStyle?: StyleProp<ViewStyle>
  clearButton?: boolean
  onActiveSearch: (val: boolean) => void
  onSubmitSearch: (val: string) => void
  inputActiveColor?: ColorValue
  inputInactiveColor?: ColorValue
  inputContainerStyle?: StyleProp<ViewStyle>
  inputTextStyle?: StyleProp<TextStyle>
  inputProps?: TextInputProps
  customIcon?: ReactNode
  iconStyle?: StyleProp<ViewStyle>
  buttonStyle?: StyleProp<ViewStyle>
  buttonText?: string
  buttonTextStyle?: StyleProp<TextStyle>
}

Reference

• React Native is a JavaScript framework for writing real, natively rendering mobile applications for iOS and Android.

Contribution

If you have any questions or suggestions, please feel free to open an issue or pull request.

License

MIT License © 2022 funnyzak