Needle-Pinpointing Machine

    @nghinv/react-native-search-bar
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.0 • Public • Published

    @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

    Install

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

    DownloadsWeekly Downloads

    6

    Version

    0.2.0

    License

    MIT

    Unpacked Size

    76.6 kB

    Total Files

    15

    Last publish

    Collaborators

    • nghinv