@nghinv/react-native-search-bar

React Native SearchBar Component use reanimated 2 library

Usage no npm install needed!

<script type="module">
  import nghinvReactNativeSearchBar from 'https://cdn.skypack.dev/@nghinv/react-native-search-bar';
</script>

README

@nghinv/react-native-search-bar

React Native SearchBar Component use reanimated 2 library


CircleCI Version MIT License All Contributors PRs Welcome

Installation

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

or

npm install @nghinv/react-native-search-bar
  • peerDependencies
yarn add react-native-gesture-handler react-native-reanimated

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
cancelTitleStyle TextStyle undefined
onFocus () => void undefined
onBlur () => void undefined
onSubmitEditing () => void undefined
value string undefined
onChangeText (value: string) => void undefined
isDarkTheme boolean false
theme InputThemeType
clearIcon React.ReactNode null
searchIcon React.ReactNode null
  • 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',
  },
};

Credits