SearchBar

A basic SearchBar component that should render nicely on any platform. Supports a good level of customization.

You can customization SearchBar component with the Props

Usage#

import React, {FC, useState} from 'react';
import {Body,SearchBar} from 'qdmrncomponents';

const App: FC = () => {

  const [value,setValue] = useState('');

  return (
    <Body paddingAll={20} V_Aligin_center>
       <SearchBar
        searchValue={value}
        onChangeText={setValue}
       />
    </Body>
  );
};

Reference#

Props#

searchValue#

searchValue props of the SearchBar Component used to search the value and its type string

onChangeText#

callback that is called when the text input's text changes Function

placeHolder#

The string that will be rendered before text input has been entered. and its type string

placeHolderColor#

The text color of the placeholder string and type string

paddingLR#

provide left and right padding between search icon and cancel icon text and type number

searchIcon#

set to true to provide icon to left of the input and type boolean and default is false

inputTextFontSize#

props for changing font size of the TextInput and type number

inputTextFontColor#

props for changing font color of the TextInput and type string

inputTextFontWeight#

props for changing font weight of the TextInput and type string-'bold'

searchBarBorderColor#

props for changing color of the input text border and type string

searchBarHeight#

props for providing height to the search bar and type number

searchBarBorderRadius#

props for providing border radius to the search bar and type number

searchIconSize#

props for changing size of the search icon and type number

CancelTextSize#

props for changing size of the cancel icon and type number