[android] OverKeyboardView after upgrading to expo 52 doesnt use all screen and when press outside crashes the app #862

Mako-L · 2025-03-15T16:18:25Z

Describe the bug
I use OverKeyboardView to show a poup menu for users to press inside and before upgrading to expo 52 and all its packages upgrade after running expo-doctor on android it doesnt have a full screen view as in there is a margin bottom that when pressed crashes with error: ERROR Your app just crashed. After opening the mode it doesnt let me click correcly on anything. See the error below.

java.lang.ClassCastException: android.view.ViewRootImpl cannot be cast to android.view.View
  com.facebook.react.uimanager.TouchTargetHelper.findClosestReactAncestor(TouchTargetHelper.java:155)
  com.facebook.react.uimanager.TouchTargetHelper.findTargetTagAndCoordinatesForTouch(TouchTargetHelper.java:94)
  com.facebook.react.uimanager.JSTouchDispatcher.findTargetTagAndSetCoordinates(JSTouchDispatcher.java:223)
  com.facebook.react.uimanager.JSTouchDispatcher.handleTouchEvent(JSTouchDispatcher.java:93)
  com.facebook.react.uimanager.JSTouchDispatcher.handleTouchEvent(JSTouchDispatcher.java:68)
  com.reactnativekeyboardcontroller.views.overlay.OverKeyboardRootViewGroup.onInterceptTouchEvent(OverKeyboardViewGroup.kt:126)
  android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2669)
  android.view.View.dispatchPointerEvent(View.java:16743)
  android.view.ViewRootImpl$ViewPostImeInputStage.processPointerEvent(ViewRootImpl.java:8031)
  android.view.ViewRootImpl$ViewPostImeInputStage.onProcess(ViewRootImpl.java:7791)
  android.view.ViewRootImpl$InputStage.deliver(ViewRootImpl.java:7180)
  android.view.ViewRootImpl$InputStage.onDeliverToNext(ViewRootImpl.java:7237)
  android.view.ViewRootImpl$InputStage.forward(ViewRootImpl.java:7203)
  android.view.ViewRootImpl$AsyncInputStage.forward(ViewRootImpl.java:7369)
  android.view.ViewRootImpl$InputStage.apply(ViewRootImpl.java:7211)
  android.view.ViewRootImpl$AsyncInputStage.apply(ViewRootImpl.java:7426)
  android.view.ViewRootImpl$InputStage.deliver(ViewRootImpl.java:7184)
  android.view.ViewRootImpl$InputStage.onDeliverToNext(ViewRootImpl.java:7237)
  android.view.ViewRootImpl$InputStage.forward(ViewRootImpl.java:7203)
  android.view.ViewRootImpl$InputStage.apply(ViewRootImpl.java:7211)
  android.view.ViewRootImpl$InputStage.deliver(ViewRootImpl.java:7184)
  android.view.ViewRootImpl.deliverInputEvent(ViewRootImpl.java:10319)
  android.view.ViewRootImpl.doProcessInputEvents(ViewRootImpl.java:10270)
  android.view.ViewRootImpl.enqueueInputEvent(ViewRootImpl.java:10238)
  android.view.ViewRootImpl$WindowInputEventReceiver.onInputEvent(ViewRootImpl.java:10461)
  android.view.InputEventReceiver.dispatchInputEvent(InputEventReceiver.java:295)
  android.os.MessageQueue.nativePollOnce(Native Method)
  android.os.MessageQueue.next(MessageQueue.java:358)
  android.os.Looper.loopOnce(Looper.java:189)
  android.os.Looper.loop(Looper.java:317)
  android.app.ActivityThread.main(ActivityThread.java:8787)
  java.lang.reflect.Method.invoke(Native Method)
  com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:591)
  com.android.internal.os.ZygoteInit.main(ZygoteInit.java:871)

Code snippet


import React, { useCallback, useEffect, useRef, useState } from "react";
import {
  View,
  TextInput,
  TouchableOpacity,
  ScrollView,
  Text,
  useWindowDimensions,
  ActivityIndicator,
  findNodeHandle,
  UIManager,
  Platform,
  Modal,
} from "react-native";
import { KeyboardController, OverKeyboardView } from "react-native-keyboard-controller";
import { useThemeContext } from "@/theme/ThemeContext";
import { useBoundStore, useConversationStore } from "@/components/state/useBoundStore";
import { styles } from "./styles";
import CustomText from "@/components/CustomText";
import { FileItem } from "./types";
import { RegenIcon, StopIcon, PaperclipIcon } from "@/components/atoms/GlobalIcons";
import { AntDesign } from "@expo/vector-icons";
import UploadMenu from "./UploadMenu";
import FileCard from "./FileCard";
import { em } from "@/utils/scale";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { initialWindowMetrics } from "react-native-safe-area-context";

const InputBox: React.FC = () => {
 /** other code **/

  return (
    <>
      <View style={[styles.containerTextInputWrapper, { paddingBottom: initialWindowMetrics?.insets.bottom }]}>
        <View style={[styles.regenWrapper]}>
          {regenerateResponse && (
            <TouchableOpacity style={[styles.regen, { backgroundColor: colorConstants.BLUE_BG }]} onPress={handleSubmitRegen} disabled={isStreaming}>
              <View style={{ marginRight: em(0.5) }}>
                <RegenIcon fill={colorConstants.MEDICAL_BLUE} />
              </View>
              <CustomText style={[styles.regenText, { color: colorConstants.MEDICAL_BLUE }]}>Regenerate Response</CustomText>
            </TouchableOpacity>
          )}
          {cancelResponse && (
            <TouchableOpacity style={[styles.regen, { backgroundColor: colorConstants.BLUE_BG }]} onPress={() => stopGeneration(profile)}>
              <View style={{ marginRight: em(0.5) }}>
                <StopIcon fill={colorConstants.MEDICAL_BLUE} />
              </View>
              <CustomText style={[styles.regenText, { color: colorConstants.MEDICAL_BLUE }]}>Stop Generating</CustomText>
            </TouchableOpacity>
          )}
        </View>
        <ScrollView
          ref={fileScrollViewRef}
          horizontal
          showsHorizontalScrollIndicator={false}
          style={styles.fileScrollView}
          keyboardShouldPersistTaps="always"
        >
          {files.map((file: FileItem, index: number) => (
            <FileCard key={index} file={file} index={index} />
          ))}
        </ScrollView>
        <View style={[styles.inputBoxContainer, { padding: getContainerPadding(), paddingTop: 0 }]}>
          <View style={styles.innerContainer}>
            <View style={styles.buttonLeftWrapper}>
              <TouchableOpacity
                ref={buttonRef}
                style={[styles.button, { backgroundColor: colorConstants.MEDICAL_BG_GREY }]}
                onPress={() => {
                  measureButton();
                  setShowUploadMenu(!showUploadMenu);
                }}
                onLayout={handleButtonLayout}
              >
                <PaperclipIcon width={em(1.5)} height={em(1.5)} fill={colorConstants.MEDICAL_BLUE} />
              </TouchableOpacity>
            </View>
            <TextInput
              style={[
                styles.textArea,
                {
                  backgroundColor: colorConstants.MEDICAL_BG_GREY,
                  color: colorConstants.MEDICAL_BLACK,
                },
              ]}
              placeholder={`Message Kahoq`}
              placeholderTextColor={colorConstants.MEDICAL_BLACK}
              multiline
              value={inputText}
              onChangeText={setInputText}
              onSubmitEditing={handleSubmit}
              onFocus={() => {
                setMainMenuChat("chats");
              }}
            />
            <View style={styles.buttonRightWrapper}>
              <TouchableOpacity
                style={[
                  styles.button,
                  {
                    backgroundColor:
                      conversationLoading || isStreaming || inputText.trim() === "" ? colorConstants.SEND_BG : colorConstants.MEDICAL_BLUE,
                  },
                ]}
                onPress={handleSubmit}
                disabled={conversationLoading || isStreaming || inputText.trim() === ""}
              >
                {conversationLoading ? (
                  <View style={{ width: em(1.5), height: em(1.5), justifyContent: "center", alignItems: "center" }}>
                    <ActivityIndicator color={colorConstants.MEDICAL_BLACK} size="small" />
                  </View>
                ) : (
                  <AntDesign
                    name="arrowup"
                    size={em(1.5)}
                    color={conversationLoading || isStreaming || inputText.trim() === "" ? colorConstants.SEND_ICON : "#FFF"}
                  />
                )}
              </TouchableOpacity>
            </View>
          </View>
        </View>

        <OverKeyboardView visible={showUploadMenu}>
          {/* <Modal transparent={true} visible={showUploadMenu} onRequestClose={() => setShowUploadMenu(false)}> */}
          <TouchableOpacity style={styles.modalOverlay} activeOpacity={1} onPress={() => setShowUploadMenu(false)}>
            <View
              style={{
                position: "absolute",
                top: modalPosition.top,
                left: modalPosition.left,
                marginBottom: insets.bottom,
                ...Platform.select({
                  android: {
                    elevation: 5,
                    backgroundColor: "transparent",
                  },
                  ios: {},
                }),
              }}
            >
              <UploadMenu setShowUploadMenu={setShowUploadMenu} />
            </View>
          </TouchableOpacity>

          {/* </Modal> */}
        </OverKeyboardView>
      </View>
    </>
  );
};

export default InputBox;

Repo for reproducing
Link

To Reproduce
Steps to reproduce the behavior:

click open modal
when modal open click on home or in the bottom tabs area.
app crashes
also nothing is clickable i think

Expected behavior
I should work as it works on ios with no problem

Screenshots

Smartphone (please complete the following information):

Desktop OS: mac os
Device: pixel 8
OS: android
RN version: 0.76.7
RN architecture: new
JS engine: idk
Library version: 1.16.7

Additional context
Add any other context about the problem here.

The text was updated successfully, but these errors were encountered:

Mako-L · 2025-03-15T18:29:21Z

I made a repo to show the bug, this happens only on android not on ios. Thank you in advance guys you are awesome.

Mako-L · 2025-03-15T18:40:06Z

Also to mention this only happens on real device on simulator seems fine.

kirillzyusko · 2025-03-15T20:34:42Z

Thank you @Mako-L for describing the problem and your effort you put in preparation for the reproduction example.

Indeed, this problem exist and it's reproducible in example project as well. Basically - on paper it works well, but on Fabric I can not resize the window to take a full screen width.

If I understand correctly for fixing this problem I have to create custom shadow nodes and update width/height accordingly, so that all components know their dimensions and can be laid out properly.

Will try to look into it in nearest days, thank you again for providing a repo ❤️

Mako-L assigned kirillzyusko Mar 15, 2025

Mako-L changed the title ~~OverKeyboardView after upgrading to expo 52 doesnt use all screen and when press outside crashes the app~~ ]OverKeyboardView after upgrading to expo 52 doesnt use all screen and when press outside crashes the app Mar 15, 2025

Mako-L changed the title ~~]OverKeyboardView after upgrading to expo 52 doesnt use all screen and when press outside crashes the app~~ [android] OverKeyboardView after upgrading to expo 52 doesnt use all screen and when press outside crashes the app Mar 15, 2025

kirillzyusko added 🐛 bug Something isn't working 🤖 android Android specific 🏭 fabric Changes specific to new (fabric/jsi) architecture OverKeyboardView Anything related to OverKeyboardView repro provided Issue contains reproduction repository/code labels Mar 15, 2025

kirillzyusko linked a pull request Mar 16, 2025 that will close this issue

feat: OverKeyboardView with custom ShadowNode #863

Draft

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[android] OverKeyboardView after upgrading to expo 52 doesnt use all screen and when press outside crashes the app #862

[android] OverKeyboardView after upgrading to expo 52 doesnt use all screen and when press outside crashes the app #862

Mako-L commented Mar 15, 2025 •

edited

Loading

Mako-L commented Mar 15, 2025 •

edited

Loading

Mako-L commented Mar 15, 2025

kirillzyusko commented Mar 15, 2025

[android] OverKeyboardView after upgrading to expo 52 doesnt use all screen and when press outside crashes the app #862

[android] OverKeyboardView after upgrading to expo 52 doesnt use all screen and when press outside crashes the app #862

Comments

Mako-L commented Mar 15, 2025 • edited Loading

Mako-L commented Mar 15, 2025 • edited Loading

Mako-L commented Mar 15, 2025

kirillzyusko commented Mar 15, 2025

Mako-L commented Mar 15, 2025 •

edited

Loading

Mako-L commented Mar 15, 2025 •

edited

Loading