1.0.4 • Published 7 years ago
rn-search-bar v1.0.4
RN-Search-Bar
npm install react-native-vector-icons --savereact-native link react-native-vector-iconsnpm install rn-search-bar --save
Props
| Prop | Type | Description | Required |
|---|---|---|---|
| containerStyle | object | styles applied to the search bar container | YES |
| onChange | function | function called when text input changes | YES |
| textStyle | object | styles applied to the text input | no |
| clearTextOnPress | boolean | clear the text when the search button is pressed | no |
| renderLeftIcon | boolean | render the left side search icon | no |
| leftIconColor | string | color of the left | no |
| leftIconSize | number | size of the left icon | no |
| renderSearchIcon | boolean | render the search icon on the right side which functions as a button | no |
| searchIconSize | number | size of the search icon | no |
| searchIconColor | string | color of the search icon | no |
| searchIconBackgroundColor | string | backgroundColor for the search icon button | no |
| onPress | function | function called when search icon button is pressed, called with text input | if search icon is rendered |
import React, { Component } from 'react';
import SearchBar from 'rn-search-bar';
class SearchBarExampleOne extends Component {
render(){
return(
<SearchBar
onPress={
(text) => console.log('You typed + ' text)
}
onChange={
(text) => console.log(text)
}
containerStyle={{
height:50,
borderTopWidth:1,
borderBottomWidth:1
}}
renderSearchIcon={true}
clearTextOnPress={true}
renderLeftIcon={true}
searchIconSize={15}
searchIconColor={'deeppink'}
searchIconBackgroundColor={'aqua'}
leftIconColor={'rgba(152,152,152,.7)'}
leftIconSize={12}
textStyle={{
color: 'cyan'
}}
/>
)
};
class SearchBarExampleTwo extends Component {
render(){
return(
<SearchBar
onPress={
(text) => console.log('You typed ' + text )
}
onChange={
(text) => console.log(text)
}
containerStyle={{
height:50,
marginHorizontal: 10,
borderRadius: 5,
borderColor: 'purple',
borderWidth: 1
}}
renderSearchIcon={true}
clearTextOnPress={false}
renderLeftIcon={false}
searchIconSize={20}
searchIconColor={'deeppink'}
searchIconBackgroundColor={'aqua'}
textStyle={{
color: 'cyan',
paddingLeft: 10
}}
/>
)
};
}