react-native-platform-searchbar

A customizable SearchBar component for React Native. Includes platform specific designs for iOS and Android. Written in Typescript.

Installation

1. install react-native-platform-searchbar npm install react-native-platform-searchbar --save or yarn add react-native-platform-searchbar
2. if not already installed, add react-native-svg

Usage

Basic

import SearchBar from 'react-native-platform-searchbar';

const Example = () => {
    const [value, setValue] = useState('');
    <SearchBar
        value={value}
        onChangeText={setValue}
        style={styles.searchBar}
    />;
};

With children

import SearchBar from 'react-native-platform-searchbar';

const Example = () => {
    const [value, setValue] = useState('');
    <SearchBar
        value={value}
        onChangeText={setValue}
        placeholder="Search"
        theme="light"
        platform="ios"
        style={styles.searchBar}
    >
        {loading ? (
            <ActivityIndicator style={{ marginRight: 10 }} />
        ) : undefined}
    </SearchBar>;
};

Props

Name	Type	Default	Description
value	string	REQUIRED	SearchBar value
onChangeText	(string) => void	REQUIRED	called when SearchBar value changes
theme	"light" | "dark"	"light"	SearchBar theme
platform	"default" | "ios" | "android"	"default"	which SearchBar version to use. "default" uses current platform
cancelText	string	"Cancel"	cancel button text. Only visible in iOS SearchBar
placeholderTextColor	string	different shades of gray depending on theme and platform	Color of placeholderText
iconColor	string	same as placeholderTextColor	color of icons (Search, Clear...)
leftIcon	ReactElement	search icon	custom icon to show on the left
style	object (ViewStyle)	undefined	custom style for the outer container view
inputStyle	object (TextStyle)	undefined	custom style for the TextInput component
onCancel	() => void	undefined	callback that gets called when cancel button is pressed
onClear	() => void	undefined	callback that gets called when clear button is pressed

All TextInput Props are also supported.