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: {
        ...
    },
    ...
}