Styling

Available Style Props

The component provides several style props for customization:

Prop	Type	Description
containerStyle	ViewStyle	Main wrapper container style
inputContainerStyle	ViewStyle	Input container style
inputStyle	TextStyle	TextInput field style
suggestionStyle	ViewStyle	Suggestion item style
textStyle	TextStyle	Text elements style
theme	DeepPartial<LocationAutocompleteTheme>	Theme configuration

Basic Styling Example

<PlacesAutocomplete
  containerStyle={{
    margin: 16,
    backgroundColor: '#fff',
    borderRadius: 8,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  }}
  inputContainerStyle={{
    borderBottomWidth: 1,
    borderBottomColor: '#e0e0e0',
    paddingHorizontal: 16,
    height: 50,
  }}
  inputStyle={{
    fontSize: 16,
    color: '#333',
  }}
  suggestionStyle={{
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#f0f0f0',
  }}
  textStyle={{
    fontSize: 14,
    color: '#666',
  }}
/>

Theme Customization

<PlacesAutocomplete
  theme={{
    colors: {
      primary: '#007AFF',
      surface: '#FFFFFF',
      onSurface: '#000000',
      onSurfaceVariant: '#666666',
      outline: '#E0E0E0',
      shadow: '#000000'
    },
    typography: {
      body: { fontSize: 16, fontWeight: '500' },
      bodySmall: { fontSize: 14, fontWeight: '400' },
      titleMedium: { fontSize: 16, fontWeight: '600' }
    },
    spacing: {
      xs: 4,
      sm: 8,
      md: 12,
    },
  }}
/>