react-native-dropdown-picker
react-native-dropdown-picker copied to clipboard
Ability to pass in custom search input component
Is your feature request related to a problem? Please describe. Firstly just wanted to say thank you for this amazing component, it's exactly what I wanted and does so much out of the box!
Would it possible to allow a custom search input component to be passed in?
This would allow for people to customise the search input for instance by adding a search icon to the left of the input.
Describe the solution you'd like
Add a customSearchComponent prop that if provided renders the component passed in, defaulting to the current TextInput implementation if not present.
Describe alternatives you've considered
Alternatively allow for a searchIcon or similar to allow for an icon to be added, but I think the component approach is far more flexible.
Additional context Terrible pseudo code but something like the following?
Extract the current Text Input it's own component
const defaultSearchComponent = (props) => (
<TextInput
style={[styles.input, props.searchableStyle]}
defaultValue={props.searchableText}
placeholder={props.searchablePlaceholder}
placeholderTextColor={props.searchablePlaceholderTextColor}
onChangeText={props.onChangeCallback}
/>
)
Conditional render based on props passed in
const SearchInput = this.props.customSearchComponent ? this.props.customSearchComponent : defaultSearchComponent;
The render in template
{
this.props.searchable && (
<View style={{width: '100%', flexDirection: 'row'}}>
<SearchInput {...,propsForSearch} />
</View>
)
}
propsForSearch would be set of props currently passed to the TextInput