React-native-suggester NPM

react-native-suggester

React-Native package to decorate TextInput and get suggestions with good UX

How to use it ?

import { SuggesterProvider, SuggestTextInput } from 'react-native-suggester'

const DATA = [
  { id: 1, value: 'Honda' },
  { id: 2, value: 'BMW' },
  { id: 3, value: 'Harley-Davidson' },
  { id: 4, value: 'Yamaha' },
  { id: 5, value: 'Kawasaki' },
  { id: 6, value: 'Triumph' },
  { id: 8, value: 'Ducati' },
  { id: 9, value: 'Suzuki' },
]

export default class App extends React.Component {
  render() {
    return (
      <SuggesterProvider>
        {/* somewhere in your app */}
        <SuggestTextInput name="field1" data={DATA} style={styles.input} />
      </SuggesterProvider>
    )
  }
}

With HOC

import {
  SuggesterProvider,
  SuggestTextInput,
  setSuggestOptions,
} from 'react-native-suggester'

setSuggestOptions({
  statusBarHeight: 10,
  backgroundColor: 'white',
  textColor: 'black',
  textFont: 'System',
  textFontSize: 16,
  textWhenEmpty: '...',
})

@SuggesterProvider
class App extends React.Component {
  render() {
    return (
      <View>
        {/* somewhere in your app */}
        <SuggestTextInput name="field1" data={DATA} style={styles.input} />
      </View>
    )
  }
}