This is Search Button Library.

Installation

1.Install the package via npm:

npm install @manishcodefire/search-button

Code snippets:

2.Here's an example of how you can use the component

import {View, StyleSheet} from 'react-native';
import React from 'react';
import {CodefireSearchButton} from '@manishcodefire/search-button';

const SearchButton = () => {
  const img = require('../../assets/search.png');
  const arrList = [
    {
      id: '1',
      name: 'Simon',
    },
    {
      id: '2',
      name: 'Clinton',
    },
    {
      id: '3',
      name: 'Richard',
    },
    {
      id: '3',
      name: 'Harry',
    },
    {
      id: '4',
      name: 'Carlson',
    },
    {
      id: '5',
      name: 'William',
    },
    {
      id: '6',
      name: 'Henry',
    },
  ];

  const selectedName = e => {
    console.log(e)
  };

  return (
    <View style={styles.container}>
      <CodefireSearchButton
        arrList={arrList}
        placeholder={'Search name...'}
        placeholderTextColor={'#8e8e8e'}
        width={'85%'}
        height={50}
        borderRadius={10}
        listBorderRadius={5}
        searchImage={img}
        listMt={5}
        onNameSelection={e => selectedName(e)}
        searchImageStyle={{height: 20, width: 20}}
      />
    </View>
  );
};

export default SearchButton;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    marginTop: 50,
  },
});

Props

| Props Name | Params | isRequire | Description | |-------------------- |----------------|----------------|----------------------------------------------------| | arrList | Array | Yes | Data will be in object format | | placeholder | String | No | Placeholder text | | placeholderTextColor | String | No | Text Color of placeholder | | width | String | No | Manage width of search input | | height | Number | No | Manage height of search input | | textInputBg | String | No | Input box color | | buttonBg | String | No | Color of search button | | bg | String | No | Background color of whole container | | borderRadius | Number | No | BorderRadius of whole container | | btnBorderLeftWidth | Number | No | Left width of border | | btnBorderColor | String | No | Color of left line of button | | searchImage | Path | No | Path of search image | | searchImageStyle | Object | Yes | Styling of search image | | searchListBg | String | No | Background color of whole search list | | listBorderRadius | Number | No | Search item borderRadius | | listMt | Number | No | Gap between input box and search list | | listMaxHeight | Number | No | Search list maximum height | | listTextColor | String | No | Text color of search list items | | listTextSize | Number | No | FontSize of search list texts | | onNameSelection | Function | Yes | Provide the result on which item you tap |