Add search bar to react-native-maps when using expo

Question

I would like to add a search bar to my maps screen and then use google to find the location associated with the input text and move the map there.

This is what I have right now:

import React, { Component } from 'react';
import {
    View
} from 'react-native';
import { Mapview } from 'expo';

export default class screen extends Component {

    constructor(props) {
        super(props);
        this.state = {
            initialRegion: {
                latitude: 37.78825,
                longitude: -122.4324,
                latitudeDelta: 0.0922,
                longitudeDelta: 0.0421,
            }
        };
    }    
    render() {
        return (
            <View>
                <MapView
                    style={{ flex: 1 }}
                    initialRegion={this.state.initialRegion}
                />
            </View>
        )
    }
}

I cannot find this feature in the react-native-maps documentation. Is this something I need to build myself?

Answer 1

This answer covers adding a search box onto your map.

As specified in the react-native-maps docs (https://github.com/react-native-maps/react-native-maps#overlaying-other-components-on-the-map) you need to use absolute positioning.

For example the following code:

  <MapView loadingEnabled={true} style={styles.map} />
  <View style={{ position: 'absolute', top: 10, width: '100%' }}>
    <TextInput
      style={{
        borderRadius: 10,
        margin: 10,
        color: '#000',
        borderColor: '#666',
        backgroundColor: '#FFF',
        borderWidth: 1,
        height: 45,
        paddingHorizontal: 10,
        fontSize: 18,
      }}
      placeholder={'Search'}
      placeholderTextColor={'#666'}
    />
  </View>

Will produce the following layout.