React Native Bottom Search Bar Component

You can easily add animated search box for your application using this package.

How do i use it?

This package needs react-native-svg package first you install it , you can install with npm i react-native-svg. You can watch(3 min) on youtube how to setup bottom search bar component.

npm install bottomsearchbar

Simple Use

import React, {useState} from 'react';
import {StyleSheet, Text, View} from 'react-native';
import BottomSearch from 'bottomsearchbar';
const initialData = [
  {
    userId: 1,
    id: 1,
    title: 'delectus aut autem',
    completed: false,
  },
  {
    userId: 1,
    id: 2,
    title: 'quis ut nam facilis et officia qui',
    completed: false,
  },
  {
    userId: 1,
    id: 3,
    title: 'fugiat veniam minus',
    completed: false,
  },
];
const App = () => {
  const [data, setData] = useState(initialData);
  return (
    <View style={styles.container}>
      <BottomSearch data={data} />
    </View>
  );
};

export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'grey',
  },
});

Component Props And Sample Prop Datas

| Prop Name | Description | | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | | customCss | You can put your own styles | | searchResultOnPress | This parameter accepts a function, when the user clicks on the search result, the data of the clicked result is sent to this function | | onSearchTextChange | This function is triggered when the user types in the search box and returns the text written by the user. | | data | Array containing data to search. | | placeHolderText | Search input placeholder text | | cancelText | Text of search box closing button | | customSearchResultItem | You can change search result component with this prop | | icon | You can use your icon component |

Custom Css Sample Object

const customCss = {
  body: {},
  search: {},
  searchInput: {},
  searchResults: {},
  item: {},
  closeButtonColor: '',
};
<BottomSearchBar customCss={customCss} />;

searchResultOnPress Function Sample

<BottomSearchBar searchResultOnPress={item => console.log(item)} />

onSearchTextChange Event Sample

<BottomSearchBar onSearchTextChange={text => console.log(text)} />

Search Data Object Sample

**İmportant : The default search result component shows "title" property on the screen, you need to write the custom search result component to change it. **

const data =[
    {
      id: '0',
      title: 'Street Image',
      download_url:
        'https://unsplash.com/photos/lIVYk4qacSQ/download?force=true&w=640',
    }
  ]
 <BottomSearchBar
	data={data}
 />

customSearchResultItem Component Sample

const customSearchResultItem = ({item, id}) => {
  console.log(item);
  return (
    <View>
      <Text>{item.title}</Text>
    </View>
  );
};
<BottomSearchBar customSearchResultItem={customSearchResultItem} />;

Icon Sample

const icon = <YourIconComponent />;
<BottomSearchBar icon={icon} />;

Search Input Placeholder Text Sample

<BottomSearchBar placeHolderText={'Search'} />

Search Cancel Button Text Sample

<BottomSearchBar cancelText={'Cancel'} />

How can add my components in Bottom Search Bar component?

Thats is simple you can review this code.

<BottomSearchBar>
  <View>
    <Text>My component</Text>
  </View>
</BottomSearchBar>

How do i add my own components under the bottom searchbar component?

<BottomSearchBar/>
<YourComponent/>

I thank JetBrains for their support to students.