bottomsearchbar v0.1.1

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

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.