@pnap/react-native-search-bar

Animated search bar built with vanilla React Native.

Installation

Use npm or yarn to install the package.

npm install @pnap/react-native-search-bar

or

yarn add @pnap/react-native-search-bar

Usage

import {View, StyleSheet} from 'react-native'
import {CustomSearchIcon} from 'components/icons'
import SearchBar from '@pnap/react-native-search-bar'

// Create your component
const MyScreenComponent = () => {

  // Some business logic (functions, variables, etc)

  return (
     <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
        <SearchBar
          onSubmitSearch={onSubmitSearch}
          onActiveSearch={onActiveSearch}
          onToggleSearchBar={onToggleSearchBar}
          customIcon={CustomSearchIcon}
          inputTextStyle={styles.searchBarInput}
          buttonStyle={styles.searchButton}
          buttonTextStyle={styles.searchButtonText}
          underlineActiveColor={"#9f9ea4"}
          underlineInactiveColor={"#6d28d9"}
        />
     </View>
}

const styles = StyleSheet.create({
    ...
})

Availalable Props

Name	Type	Default	Description	Required
onSubmitSearch	function	-	Fires when user submits text input.	Yes
onActiveSearch	function	-	Fires when user focus text input.	Yes
onToggleSearchBar	function	-	Fires when user presses on search icon (or custom icon).	Yes
customIcon	JSX component	regular search icon	Svg to be rendered as search button.	No
inputTextStyle	TextStyle	simple style	Style value for TextInput text.	No
buttonStyle	ViewStyle	simple style	Style value for search Pressable.	No
buttonTextStyle	TextStyle	simple style	Style value for search Pressable text.	No
underlineActiveColor	ColorValue	#6d28d9	Color for bottom border of active TextInput.	No
underlineInactiveColor	ColorValue	#9f9ea4	Color for bottom border of inactive TextInput.	No
animationDuration	Number	360	Time in milliseconds for animations.	No

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

Authors

Piotr Napierala - author

License

@pnap/react-native-search-bar is released under MIT license.