react-native-bottom-search-bar
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0 • Public • Published

    React Native Bottom Search Bar

    Battle Tested ✅

    Elegant & Cool also fully customizable bottom search bar for React Native

    npm version npm Platform - Android and iOS License: MIT styled with prettier

    React Native Bottom Search Bar

    React Native Bottom Search Bar React Native Bottom Search Bar React Native Bottom Search Bar

    Installation

    Add the dependency:

    Pure React Native:

    npm i react-native-bottom-search-bar

    Peer Dependencies

    IMPORTANT! You need install them.
    "@freakycoder/react-native-helpers": ">= 1.0.2",
    "react-native-dynamic-vector-icons": ">= x.x.x"
    

    Basic Usage

    <BottomSearchBar />

    Advanced Usage

    <BottomSearchBar
        height={125}
        iPhoneXHeigh={150}
        disableHomeButton
        buttonBackgroundColor="#050191"
        buttonOnPress={() => {}}
        onChangeText={(text)=> {console.log(text)}}
        homeButtonIconComponent={
            <MyIcon>
                Custom Component instead of default Home Button Icon
            </MyIcon>
        }
    />

    Configuration - Props

    Main Props

    Property Type Default Description
    onChangeText function default get the text input's change function
    disableTextInput boolean false disable the text input and instead you can use it as a button
    backgroundColor color white change the main component's background color
    buttonText string Hotspot use this to change the button's text
    onButtonPress function function use this to set your onPress function to the button
    buttonIconComponent component Icon set your own icon component for the button
    disableButton boolean false disable the button itself (on the right one)
    disableButtonIcon boolean false disable the button's icon component
    disableHomeButton boolean false disable the home button's itself
    onHomePress function function set your own onPress function for home button
    homeButtonIconComponent component Icon set your own icon component instead of the default one

    SearchBox Props

    Property Type Default Description
    onChangeText function function set your own logic for changing text
    searchBoxText string What are you looking for? set the search box's text
    searchBoxOnPress function function set your own logic when tapping the search box itself
    searchBoxWidth number 95% change the search box's width
    searchBoxBorderRadius number 8 change the search box's border radius
    searchBoxBackgroundColor color #f5f5f5 change the search box's background color
    iconComponent component Icon set your own icon component instead of Icon
    disableTextInput boolean false disable or enable the text input itself

    Credits

    I get the inspiration from Joo Find App. This is the exact bottom search bar from their concept design. Thank you for this inspiration :) Here is the uplabs link:JooFind App Concept)
    Thank you for this awesome concept work FireArt Studio )

    Author

    FreakyCoder, kurayogun@gmail.com

    License

    React Native Bottom Search Bar Library is available under the MIT license. See the LICENSE file for more info.

    Install

    npm i react-native-bottom-search-bar

    DownloadsWeekly Downloads

    1,144

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    89.6 kB

    Total Files

    43

    Last publish

    Collaborators

    • freakycoder