Bring-your-own-styles

autocomplete-glamorous.js

import {defaultProps} from 'recompose';
import glamorous from 'glamorous';
import {AutocompleteBase} from './Autocomplete';

export const $Root = glamorous.div({
  border: '1px solid #ccc',
  width: '300px',
  margin: '0 auto',
});

export const $TextInput = glamorous.input({
  border: 'none',
  padding: '8px 10px',
  boxSizing: 'border-box',
  width: '100%',
});

export const $Results =  'div';

export const $Result = glamorous.div({
  borderTop: '1px solid #ccc',
  padding: '8px 10px',
  cursor: 'pointer',
  ':hover': {
    backgroundColor: 'AliceBlue'
  }
});

export default defaultProps({
  $Root,
  $Results,
  $Result,
  $TextInput
})(AutocompleteBase);

autocomplete-react-native.js

import {defaultProps} from 'recompose';
import {AutocompleteBase} from './Autocomplete';
import {View, Text, TextInput} from 'react-native';

const $Root = View;
const $TextInput = TextInput;
const $Results = View;
const $Result = Text;

export default defaultProps({
  $Root,
  $TextInput,
  $Results,
  $Result,
})(AutocompleteBase);