MapView blocks input from keyboard - react-native

Question

I am creating a map application with two simple components: a search bar, using react-native-paper and a map, using react-native-maps. By now, only the UI is implemented.
When placing only the search bar, everything works fine. I am able to type my search query and the keyboard pops up when I click on the bar:
import { StatusBar } from 'expo-status-bar';
import * as React from 'react';
import MapView, { Marker } from 'react-native-maps';
import { StyleSheet, View, Dimensions, PermissionsAndroid } from 'react-native';
import {
Provider as PaperProvider,
DarkTheme,
Drawer,
DefaultTheme,
BottomNavigation,
Text,
Appbar,
Theme,
TextInput,
Searchbar,
} from 'react-native-paper';
const styles=StyleSheet.create({
searchBar:{
width: '90%',
position: 'absolute',
top: '7%',
alignSelf: 'center',
}
})
const MyComponent = () => {
const [searchQuery, setSearchQuery] = React.useState('');
const onChangeSearch = query => setSearchQuery(query);
return (
<View style={{width: "100%", height: "100%"}}>
<Searchbar style={styles.searchBar}
placeholder="Search"
onChangeText={onChangeSearch}
value={searchQuery}
/>
</View>
);
};
export default MyComponent;
After adding the map, nothing happens when clicking the search box. If I type something on my physical keyboard, the input seems to be captured as the icon displays an animation, but nothing else happens.
import * as React from 'react';
import MapView, { Marker } from 'react-native-maps';
import { StyleSheet, View, Dimensions, PermissionsAndroid } from 'react-native';
import {
Provider as PaperProvider,
DarkTheme,
Drawer,
DefaultTheme,
BottomNavigation,
Text,
Appbar,
Theme,
TextInput,
Searchbar,
} from 'react-native-paper';
const styles=StyleSheet.create({
searchBar:{
width: '90%',
position: 'absolute',
top: '7%',
alignSelf: 'center',
}
})
const MyComponent = () => {
const [searchQuery, setSearchQuery] = React.useState('');
const { height, width } = Dimensions.get( 'window' );
const onChangeSearch = query => setSearchQuery(query);
return (
<View style={{width: "100%", height: "100%"}}>
<Searchbar style={styles.searchBar}
placeholder="Search"
onChangeText={onChangeSearch}
value={searchQuery}
/>
<MapView
style={{flex: 1}}
showsUserLocation={true}
showsMyLocationButton={true}
//onMapReady={_onMapReady}
region={{
latitude: -8.327352784611014,
longitude: -36.14413540428909,
latitudeDelta: 55.5,
longitudeDelta: 55.5 * (width / height),
}}></MapView>
</View>
);
};
export default MyComponent;
Any help is appreciated! This is my first react project.

Answer 1

have you tried messing around with zIndex?
maybe adding zIndex: 10 to the text input style

Answer 2

You have to change the order of TextInput and Mapview as you can find in their readme file: https://github.com/react-native-maps/react-native-maps#inputs-dont-focus
Bad:
<View>
<TextInput/>
<MapView/>
</View>
Good:
<View>
<MapView/>
<TextInput/>
</View>