React Native Datalist Input

This package provides React Native TextInput component that contains a drop down menu to pick a possible option based on the current input.

Installation

Using NPM:

npm i @avul/react-native-datalist-input react-native-get-random-values

Using Yarn:

yarn add @avul/react-native-datalist-input react-native-get-random-values

Demo

https://user-images.githubusercontent.com/88436030/202266915-9b07e9ce-3bb1-4255-8dd2-ba20e86da53b.mp4

Usage

1import React, {useState} from 'react';
2import {StyleSheet, View, Text} from 'react-native';
3import DatalistInput from '@avul/react-native-datalist-input';
4
5const App = () => {
6  const [value, setValue] = useState('');
7
8  return (
9    <View style={styles.screen}>
10      <Text style={styles.titleStyle}>DEMO</Text>
11      <DatalistInput
12        containerStyle={styles.containerStyle}
13        value={value}
14        onChangeText={text => setValue(text)}
15        data={['Javascript', 'JAVA', 'Python', 'C#', 'C++', 'R', 'PHP', 'Go']}
16        style={styles.inputStyle}
17        placeholder="Enter a language"
18        placeholderTextColor="#cdcdcd"
19      />
20    </View>
21  );
22};
23
24const styles = StyleSheet.create({
25  screen: {
26    flex: 1,
27    alignItems: 'center',
28    backgroundColor: '#2c2c2c',
29    justifyContent: 'center',
30  },
31  containerStyle: {
32    width: '80%',
33  },
34  inputStyle: {
35    color: '#cdcdcd',
36  },
37  titleStyle: {
38    color: '#cdcdcd',
39    fontSize: 18,
40    marginBottom: 15,
41  },
42});
43
44export default App;

Available Props

Prop	Type	Description
value	String	Required for controlled components. Value of the text input.
onChangeText	Function	Required for controlled components. Callback that is called when the textinput's text changes.
data	Array	Required for controlled components. Array of values to be listed. Please see example.
containerStyle	Array or Object	Optional. Styling of view element.
style	Array or Object	Optional. Styling of textinput element.
menuStyle	Array or Object	Optional. Styling of view element that contains datalist
menuItemStyle	Array or Object	Optional. Styling of text element that belongs to datalist
... TextInput props		Optional. Please see documentation for more details.