Suggestion list not scrollable above MapView

[R0EYK]

Before submitting

• I tested using the latest version
• I checked for duplicate issues
• I have enabled enableDebug={true} prop and included console logs below

Platform

Android

Versions

@expo/vector-icons@14.1.0
│ ├── react-native@0.79.6 deduped
│ └── react@19.0.0 deduped
├─┬ @gorhom/bottom-sheet@5.2.6
│ ├─┬ @gorhom/portal@1.0.14
│ │ ├── react-native@0.79.6 deduped
│ │ └── react@19.0.0 deduped
│ ├── react-native@0.79.6 deduped
│ └── react@19.0.0 deduped
├─┬ @react-native-assets/slider@11.0.8
│ ├── react-native@0.79.6 deduped
│ └── react@19.0.0 deduped
├─┬ @react-native-async-storage/async-storage@2.1.2
│ └── react-native@0.79.6 deduped
├─┬ @react-native-community/netinfo@11.4.1
│ └── react-native@0.79.6 deduped
├─┬ @react-native-picker/picker@2.11.1
│ ├── react-native@0.79.6 deduped
│ └── react@19.0.0 deduped
├─┬ @react-navigation/bottom-tabs@7.3.10
│ ├── react-native@0.79.6 deduped
│ └── react@19.0.0 deduped
├─┬ @react-navigation/elements@2.3.8
│ ├── react-native@0.79.6 deduped
│ └── react@19.0.0 deduped
├─┬ @react-navigation/native@7.1.6
│ ├─┬ @react-navigation/core@7.12.1
│ │ └── react@19.0.0 deduped
│ ├── react-native@0.79.6 deduped
│ ├── react@19.0.0 deduped
│ └─┬ use-latest-callback@0.2.4
│ └── react@19.0.0 deduped
├─┬ @reduxjs/toolkit@2.8.2
│ └── react@19.0.0 deduped
├─┬ expo-blur@14.1.5
│ ├── react-native@0.79.6 deduped
│ └── react@19.0.0 deduped
├─┬ expo-clipboard@7.1.5
│ ├── react-native@0.79.6 deduped
│ └── react@19.0.0 deduped
├─┬ expo-constants@17.1.7
│ └── react-native@0.79.6 deduped
├─┬ expo-contacts@14.2.5
│ ├── react-native@0.79.6 deduped
│ └── react@19.0.0 deduped
├─┬ expo-file-system@18.1.11
│ └── react-native@0.79.6 deduped
├─┬ expo-font@13.3.2
│ └── react@19.0.0 deduped
├─┬ expo-image@2.4.1
│ ├── react-native@0.79.6 deduped
│ └── react@19.0.0 deduped
├─┬ expo-linear-gradient@14.1.5
│ ├── react-native@0.79.6 deduped
│ └── react@19.0.0 deduped
├─┬ expo-linking@7.1.7
│ ├── react-native@0.79.6 deduped
│ └── react@19.0.0 deduped
├─┬ expo-localization@16.1.6
│ └── react@19.0.0 deduped
├─┬ expo-navigation-bar@4.2.8
│ ├─┬ react-native-is-edge-to-edge@1.2.1
│ │ ├── react-native@0.79.6 deduped
│ │ └── react@19.0.0 deduped
│ ├── react-native@0.79.6 deduped
│ └── react@19.0.0 deduped
├─┬ expo-notifications@0.31.4
│ ├── react-native@0.79.6 deduped
│ └── react@19.0.0 deduped
├─┬ expo-router@5.1.7
│ ├─┬ @expo/metro-runtime@5.0.5
│ │ └── react-native@0.79.6 deduped
│ ├─┬ @radix-ui/react-slot@1.2.0
│ │ ├─┬ @radix-ui/react-compose-refs@1.1.2
│ │ │ └── react@19.0.0 deduped
│ │ └── react@19.0.0 deduped
│ ├─┬ @react-navigation/native-stack@7.3.21
│ │ ├─┬ @react-navigation/elements@2.5.2
│ │ │ ├── react-native@0.79.6 deduped
│ │ │ └── react@19.0.0 deduped
│ │ ├── react-native@0.79.6 deduped
│ │ └── react@19.0.0 deduped
│ └─┬ @react-navigation/native@7.1.14
│ ├── react-native@0.79.6 deduped
│ └── react@19.0.0 deduped
├─┬ expo-status-bar@2.2.3
│ ├── react-native@0.79.6 deduped
│ └── react@19.0.0 deduped
├─┬ expo-symbols@0.4.5
│ └── react-native@0.79.6 deduped
├─┬ expo-system-ui@5.0.11
│ └── react-native@0.79.6 deduped
├─┬ expo-web-browser@14.2.0
│ └── react-native@0.79.6 deduped
├─┬ expo@53.0.23
│ ├─┬ expo-asset@11.1.7
│ │ ├── react-native@0.79.6 deduped
│ │ └── react@19.0.0 deduped
│ ├─┬ expo-keep-awake@14.1.4
│ │ └── react@19.0.0 deduped
│ ├── react-native@0.79.6 deduped
│ └── react@19.0.0 deduped
├─┬ react-dom@19.0.0
│ └── react@19.0.0 deduped
├─┬ react-hook-form@7.60.0
│ └── react@19.0.0 deduped
├─┬ react-i18next@15.6.0
│ └── react@19.0.0 deduped
├─┬ react-native-date-picker@5.0.13
│ ├── react-native@0.79.6 deduped
│ └── react@19.0.0 deduped
├─┬ react-native-dropdown-picker@5.4.6
│ ├── react-native@0.79.6 deduped
│ └── react@19.0.0 deduped
├─┬ react-native-edge-to-edge@1.6.0
│ ├── react-native@0.79.6 deduped
│ └── react@19.0.0 deduped
├─┬ react-native-gesture-handler@2.24.0
│ ├── react-native@0.79.6 deduped
│ └── react@19.0.0 deduped
├─┬ react-native-google-places-textinput@0.8.0
│ ├── react-native@0.79.6 deduped
│ └── react@19.0.0 deduped
├─┬ react-native-image-viewing@0.2.2
│ ├── react-native@0.79.6 deduped
│ └── react@19.0.0 deduped
├─┬ react-native-maps@1.20.1
│ ├── react-native@0.79.6 deduped
│ └── react@19.0.0 deduped
├─┬ react-native-reanimated-carousel@4.0.2
│ ├── react-native@0.79.6 deduped
│ └── react@19.0.0 deduped
├─┬ react-native-reanimated@3.17.4
│ ├─┬ react-native-is-edge-to-edge@1.1.7
│ │ ├── react-native@0.79.6 deduped
│ │ └── react@19.0.0 deduped
│ ├── react-native@0.79.6 deduped
│ └── react@19.0.0 deduped
├─┬ react-native-safe-area-context@5.4.0
│ ├── react-native@0.79.6 deduped
│ └── react@19.0.0 deduped
├─┬ react-native-screens@4.11.1
│ ├─┬ react-freeze@1.0.4
│ │ └── react@19.0.0 deduped
│ ├── react-native@0.79.6 deduped
│ └── react@19.0.0 deduped
├─┬ react-native-svg-transformer@1.5.1
│ └── react-native@0.79.6 deduped
├─┬ react-native-svg@15.11.2
│ ├── react-native@0.79.6 deduped
│ └── react@19.0.0 deduped
├─┬ react-native-web@0.20.0
│ └── react@19.0.0 deduped
├─┬ react-native-webview@13.13.5
│ ├── react-native@0.79.6 deduped
│ └── react@19.0.0 deduped
├─┬ react-native@0.79.6
│ ├─┬ @react-native/virtualized-lists@0.79.6
│ │ ├── react-native@0.79.6 deduped
│ │ └── react@19.0.0 deduped
│ └── react@19.0.0 deduped
├─┬ react-redux@9.2.0
│ ├── react@19.0.0 deduped
│ └─┬ use-sync-external-store@1.5.0
│ └── react@19.0.0 deduped
├── react@19.0.0
├─┬ stream-chat-expo@8.5.2
│ └─┬ stream-chat-react-native-core@8.5.2
│ ├─┬ react-native-url-polyfill@2.0.0
│ │ └── react-native@0.79.6 deduped
│ └── react-native@0.79.6 deduped
└─┬ toastify-react-native@7.2.3
├── react-native@0.79.6 deduped
└── react@19.0.0 deduped

Bug summary

I have this page in my app:

 <View style={styles.container}>
      <BlurView intensity={50} tint="light" style={[styles.topBlurViewContainer]}>
        <View style={styles.iconWrapper}>
          <Pressable onPress={onBackPress}>
            <Left width={24} height={24} />
          </Pressable>
        </View>
        <View style={styles.inputContainer}>
          <GoogleSearchInput
            onLocationSelect={handleLocationSelect}
            value={formAddress}
            shouldDisplayCenterIcon={hasPermission}
            onCurrentLocationPress={handleCurrentLocationPress}
            placeholder={t('SearchLocation')}
          />
        </View>
      </BlurView>
      <MapView
        ref={mapRef}
        provider={PROVIDER_DEFAULT}
        style={styles.map}
        initialRegion={initialRegion}
        showsUserLocation={true}
        onPress={handleMapPress}
      >
        {selectedCoords?.lat != null && selectedCoords?.long != null && (
          <Marker coordinate={{ latitude: selectedCoords.lat, longitude: selectedCoords.long }} />
        )}
      </MapView>
      <View style={styles.bottomBlurViewContainer}>
        <BlurView intensity={50} tint="light">
          <ActionBtn
            id={'pickLocation'}
            backgroundColor={$blue_dark}
            title={t('Pick Location')}
            style={[styles.actionBtn, { width: width * 0.8 }]}
            onPress={handleSubmit}
          />
        </BlurView>
      </View>
    </View>

and my GoogleSearchInput component is :

<View style={[styles.container, containerStyle]}>
      {label && <ThemedText type="label">{label}</ThemedText>}
      <View style={styles.inputCornerContainer}>
        <GooglePlacesTextInput
          languageCode={languageCode}
          value={value}
          types={types}
          onTextChange={onChangeText}
          detailsFields={['addressComponents', 'formattedAddress', 'location']}
          hideOnKeyboardDismiss
          scrollEnabled
          showClearButton={isFocused}
          showLoadingIndicator
          apiKey={ENV.config.GOOGLE_MAPS.API_KEY}
          placeHolderText={placeholder}
          fetchDetails={true}
          onFocus={handleInputFocus}
          onBlur={handleInputBlur}
          debounceDelay={300}
          onPlaceSelect={handlePlaceSelect}
          includedRegionCodes={regionCodes}
          style={{
            input: [
              styles.textInput,
              inputStyle,
              isFocused && styles.focusedInput,
              { paddingEnd: 32 },
            ],
            suggestionsContainer: styles.suggestionsContainer,
            suggestionText: {
              main: { color: Colors.light.text.primary },
              secondary: { color: Colors.light.text.primary },
            },
            loadingIndicator: { color: $black },
          }}
        />
        {!isFocused && shouldDisplayCenterIcon && (
          <Pressable style={styles.iconCorner} onPress={handleIconPress} hitSlop={10}>
            <GPS />
          </Pressable>
        )}
      </View>
    </View>

For some reason only the of the suggestion list which is above my top BlurView is actually scrollable and clickable but below it, scrolling actually affects the map and not the suggestions above it.

Please let me know if any additional information is needed and much thanks for creating and maintaining this library

Debug logs (with enableDebug={true})

[R0EYK]

in case its needed, my MapPicker.tsx styles are :

{
  container: {
    flex: 1,
    position: 'relative',
  },
  actionBtn: {
    alignSelf: 'center',
  },
  inputContainer: {
    flex: 1,
    paddingHorizontal: AppDimensions.base * 2,
  },
  iconWrapper: {
    paddingHorizontal: AppDimensions.appHorizontalPadding,
    zIndex: 99,
  },
  map: {
    width: '100%',
    height: '100%',
    position: 'relative',
  },
  bottomBlurViewContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    height: 120,
    backgroundColor: 'rgba(217, 217, 217, 0.26)', // Cant use constant, need the opacity
  },
  topBlurViewContainer: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'flex-start',
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    backgroundColor: 'rgba(217, 217, 217, 0.26)', // Cant use constant, need the opacity
    zIndex: 1,
    height: 170,
  },
}
  }

and for the GoogleSearchInput.tsx are :

{
  container: {
    width: '100%',
    position: 'relative',
    gap: AppDimensions.base * 2,
  },
  inputCornerContainer: {
    position: 'relative',
    width: '100%',
    justifyContent: 'center',
  },
  iconCorner: {
    position: 'absolute',
    right: AppDimensions.base * 2,
    top: '50%',
    transform: [{ translateY: -8 }],
    width: 16,
    height: 16,
    justifyContent: 'center',
    alignItems: 'center',
    zIndex: 2,
  },
  suggestionsContainer: {
    backgroundColor: Colors.light.main_background,
    borderRadius: 8,
    zIndex: 100000,
    maxHeight: 200,
    position: 'absolute',
    width: '100%',
    top: 56,
  },
  textInput: {
    position: 'relative',
    textAlignVertical: 'center',
    width: '100%',
    color: Colors.light.text.primary,
    borderRadius: AppDimensions.borderRadius.input,
    borderWidth: 1,
  },
  focusedInput: {
    borderColor: Colors.light.app,
    borderWidth: 2,
  },
}

[amitpdev]

@R0EYK please try adding higher zIndex to GooglePlacesTextInput itself something like:

style={{
            zIndex: 10,
            input: [
              styles.textInput,
              inputStyle,
              isFocused && styles.focusedInput,
              { paddingEnd: 32 },
            ],
            suggestionsContainer: styles.suggestionsContainer,
            suggestionText: {
              main: { color: Colors.light.text.primary },
              secondary: { color: Colors.light.text.primary },
            },
            loadingIndicator: { color: $black },
          }}

[RoeyKimhi]

@R0EYK please try adding higher zIndex to GooglePlacesTextInput itself something like:

style={{
            zIndex: 10,
            input: [
              styles.textInput,
              inputStyle,
              isFocused && styles.focusedInput,
              { paddingEnd: 32 },
            ],
            suggestionsContainer: styles.suggestionsContainer,
            suggestionText: {
              main: { color: Colors.light.text.primary },
              secondary: { color: Colors.light.text.primary },
            },
            loadingIndicator: { color: $black },
          }}

I have tried doing both

 <GooglePlacesTextInput
          languageCode={languageCode}
          value={value}
          types={types}
          onTextChange={onChangeText}
          detailsFields={['addressComponents', 'formattedAddress', 'location']}
          hideOnKeyboardDismiss
          scrollEnabled
          showClearButton={isFocused}
          showLoadingIndicator
          apiKey={ENV.config.GOOGLE_MAPS.API_KEY}
          placeHolderText={placeholder}
          fetchDetails={true}
          onFocus={handleInputFocus}
          onBlur={handleInputBlur}
          debounceDelay={300}
          onPlaceSelect={handlePlaceSelect}
          includedRegionCodes={regionCodes}
          style={{
            zIndex: 10,
            input: [
              styles.textInput,
              inputStyle,
              isFocused && styles.focusedInput,
              { paddingEnd: 32 },
            ],
            suggestionsContainer: styles.suggestionsContainer,
            suggestionText: {
              main: { color: Colors.light.text.primary },
              secondary: { color: Colors.light.text.primary },
            },
            loadingIndicator: { color: $black },
          }}
        />

and also

      <GooglePlacesTextInput
          languageCode={languageCode}
          value={value}
          types={types}
          onTextChange={onChangeText}
          detailsFields={['addressComponents', 'formattedAddress', 'location']}
          hideOnKeyboardDismiss
          scrollEnabled
          showClearButton={isFocused}
          showLoadingIndicator
          apiKey={ENV.config.GOOGLE_MAPS.API_KEY}
          placeHolderText={placeholder}
          fetchDetails={true}
          onFocus={handleInputFocus}
          onBlur={handleInputBlur}
          debounceDelay={300}
          onPlaceSelect={handlePlaceSelect}
          includedRegionCodes={regionCodes}
          style={{
            container: { zIndex: 10 },
            input: [
              styles.textInput,
              inputStyle,
              isFocused && styles.focusedInput,
              { paddingEnd: 32 },
            ],
            suggestionsContainer: styles.suggestionsContainer,
            suggestionText: {
              main: { color: Colors.light.text.primary },
              secondary: { color: Colors.light.text.primary },
            },
            loadingIndicator: { color: $black },
          }}
        />
        {!isFocused && shouldDisplayCenterIcon && (
          <Pressable style={styles.iconCorner} onPress={handleIconPress} hitSlop={10}>
            <GPS />
          </Pressable>
        )}

Both giving the same result where the map behind is scrolling instead of the suggestions box