A simple search bar component for React Native.
MIT License
A simple search bar component for React Native.
npm i react-native-svg react-native-input-search-bar --save
yarn add react-native-svg react-native-input-search-bar
import ReactNativeInputSearchBar from 'react-native-input-search-bar'
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.
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>
);
}
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
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. |
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>
}
If you have any questions or suggestions, please feel free to open an issue or pull request.
MIT License © 2022 funnyzak