react-native-general-searchbar

A general search bar and clickable fake search bar.

ScreenShots

iPhoneX

Android

Install

Install by Yarn:

yarn add react-native-general-searchbar

Install by NPM:

npm install --save react-native-general-searchbar

Usage

SearchBar

Import the module in the file:

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

It has several properties to control its behavior:

autoFocus: Inner TextInput component will auto focus or not.
searchText: Current text display.
placeholder: Placeholder text.
placeholderTextColor: Placeholder text color.
canCancel: Has cancel button or not.
cancelText: Cancel button text.
canClear: Has clear input button or not.
isSearching: Is in searching status or not.
onPressCancel: Cancel button callback.
onSubmitEditing: Callback when submit current editing text.
onChangeText: Current text changed callback.
textInputProps: Inner TextInput component properties.
style: Custom style.

FakeSearchBar

Import the module in the file:

import { FakeSearchBar } from 'react-native-general-searchbar';

Properties:

placeholder: Placeholder text.
onFocus: Callback when click.
image: Search image.
activeOpacity: Property of TouchableOpacity.
style: Custom style.

Global Style

You can change their styles globally. It will override default settings. For example:

// SearchBarStyle in index.d.ts
SearchBar.style = {
    inputView: {
        ...
    },
    ...
};
// FakeSearchBar in index.d.ts
FakeSearchBar.style = {
    touch: {
        ...
    },
    ...
}