0.2.0 • Published 3 years ago
@nghinv/react-native-search-bar v0.2.0
@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
- 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',
},
};