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.