@nghinv/react-native-search-bar

React Native SearchBar Component use reanimated 2 library

---

Installation

yarn add @nghinv/react-native-search-bar

or

npm install @nghinv/react-native-search-bar

Usage

import React, { useState, useCallback } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import SearchBar from '@nghinv/react-native-search-bar';

function App() {
  const [text, setText] = useState('');

  const onChangeText = useCallback((value) => {
    setText(value);
  }, []);

  return (
    <View style={styles.container}>
      <SearchBar
        placeholder='Search'
        containerStyle={styles.textInput}
        cancelTitle='Huỷ'
        value={text}
        onChangeText={onChangeText}
        // theme={theme.textInput}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingVertical: 24,
  },
  textInput: {
    marginTop: 40,
    paddingHorizontal: 16,
    paddingVertical: 8,
  },
});

export default App;

Property

Property	Type	Default	Description
containerStyle	ViewStyle	undefined
textInputStyle	TextStyle	undefined
width	number | string	undefined
height	number	44
borderRadius	number	12
cancelButton	boolean	true	Show, hide cancel button
cancelTitle	string	Cancel
cancelTitle	string	Cancel
cancelTitleStyle	TextStyle	undefined
onFocus	() => void	undefined
onBlur	() => void	undefined
onSubmitEditing	() => void	undefined
onChangeText	(value: string) => void	undefined
isDarkTheme	boolean	false
theme	InputThemeType

• InputThemeType

Property	Type	Default	Description
backgroundColor	string
placeholderColor	string
textInputBackground	string
textColor	string
selectionColor	string
clearIconColor	string
textButtonColor	string		Cancel title color

TextInputThemeDefault = {
  dark: {
    backgroundColor: 'transparent',
    placeholderColor: '#636366',
    textInputBackground: 'rgba(44,44,46,0.8)',
    textColor: 'white',
    selectionColor: '#2979ff',
    clearIconColor: '#c7c7cc',
    searchIconColor: '#b0b0b2',
    textButtonColor: '#2979ff',
  },
  light: {
    backgroundColor: 'transparent',
    placeholderColor: '#8e8e93',
    textInputBackground: 'rgba(142,142,147,0.12)',
    textColor: 'black',
    selectionColor: '#2979ff',
    clearIconColor: '#c7c7cc',
    searchIconColor: '#8e8e93',
    textButtonColor: '#2979ff',
  },
};