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

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.