MapView blocks input from keyboard

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.

score 0 · Answer 1 · answered Mar 14 '22 at 16:52

0

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

answered Mar 14 '22 at 16:52

RodSar

1,211
1
4
14

Yes, I did used elevation, which is the equivalent for Android – Willams Costa Mar 14 '22 at 18:32

score 0 · Answer 2 · answered Apr 04 '22 at 07:45

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>

MapView blocks input from keyboard

2 Answers2