react-native-dropdown-picker icon indicating copy to clipboard operation
react-native-dropdown-picker copied to clipboard

Ability to pass in custom search input component

Open technotariat opened this issue 5 years ago • 0 comments

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

technotariat avatar Jul 15 '20 20:07 technotariat