addrs.js

import React, { Component } from "react";
import Autocomplete from "react-native-autocomplete-input";
import { Text } from "native-base";
import themeColors from "../../theme/joany_v1/colors";
import { Platform, StyleSheet, ScrollView, Dimensions, KeyboardAvoidingView } from 'react-native';
const { height } = Dimensions.get('window');

const AutocompleteInput = props => {
  const {
    defaultValue,
    data,
    onChangeText,
    isHideResults,
    renderItem
  } = props;

  return (
    <ScrollView style={{ minHeight: height * (3 / 4) + 70}}
      nestedScrollEnabled={true}>
      <KeyboardAvoidingView style={{ flex: 1 }}
        behavior="padding" enabled keyboardVerticalOffset={100}>
        <Autocomplete
          autoFocus={true}
          autoCapitalize="none"
          autoCorrect={false}
          containerStyle={styles.autocompleteContainer}
          data={data}
          defaultValue={defaultValue}
          onChangeText={onChangeText}
          placeholder="Start typing to search..."
          listStyle={{ flex: 1, margin: 0, minHeight: height * (3 / 4) + 70 }}
          inputContainerStyle={{
            alignSelf: 'center',
            paddingBottom: 0,
            height: 40,
            width: '100%',
            borderWidth: 0,
            marginBottom: 5
          }}
          renderItem={renderItem}
          hideResults={isHideResults}
        />
      </KeyboardAvoidingView>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#fff',
    flex: 1
  },
  autocompleteContainer: {
    marginLeft: 1,
    marginRight: 1,
    borderBottomWidth: 1,
    borderWidth: 1,
    borderColor: '#D8D8D8',
    paddingBottom: 5
  },
  itemText: {
    fontSize: 15,
    margin: 2
  },
  descriptionContainer: {
    // `backgroundColor` needs to be set otherwise the
    // autocomplete input will disappear on text input.
    backgroundColor: '#fff',
    marginTop: 8
  },
  infoText: {
    textAlign: 'center'
  },
  titleText: {
    fontSize: 18,
    fontWeight: '500',
    marginBottom: 10,
    marginTop: 10,
    textAlign: 'center'
  },
  directorText: {
    color: 'grey',
    fontSize: 12,
    marginBottom: 10,
    textAlign: 'center'
  },
  openingText: {
    textAlign: 'center'
  }
})

export default AutocompleteInput;