React-native: InputAccessoryView doesn't work inside React Native Modal

[kadoshms]

Environment

Environment:
OS: macOS Sierra 10.12.6
Node: 8.6.0
Yarn: 1.7.0
npm: 5.3.0
Watchman: 4.9.0
Xcode: Xcode 9.2 Build version 9C40b
Android Studio: 2.3 AI-162.4069837

Packages: (wanted => installed)
react: 16.3.1 => 16.3.1
react-native: https://github.com/expo/react-native/archive/sdk-30.0.0.tar.gz => https://github.com/expo/react-native/archive/sdk-30.0.0.tar.gz

Description

InputAccessoryView doesn't work when used inside a react-native Modal.

Reproducible Demo

https://snack.expo.io/@kadoshms/inputaccessoryview-inside-modal

[leiz-me]

Facing the same issue. Any idea?

[euroclydon37]

Just ran into this.

[euroclydon37]

Best I Could Do

I'm not proficient with Objective-C and I had a friend look this over with me.

From what I could tell, it seems like rootView is nil here.
https://github.com/facebook/react-native/blob/630e9faf74e78c42ff14625f84ff63b24ceec0d0/Libraries/Text/TextInput/RCTBaseTextInputView.m#L478-L485

Also found this. Perhaps the rootView wasn't found because of some problem here?
https://github.com/facebook/react-native/blob/630e9faf74e78c42ff14625f84ff63b24ceec0d0/React/Views/RCTComponent.h#L51-L56

UI Heirarchy Screenshots

The InputAccessoryView simply doesn't get inserted into UIInputSetHostView. Here are some screenshots on the UI hierarchy

_In a normal View_

_In a modal_

[euroclydon37]

So I did some xcode debugging and found that it's searching the wrong root view. I'm further convinced that this section of code is the issue. I think that Modals aren't adhering to the reactTag pattern here. This would lead a Modal to not be counted as a root view (because, perhaps, it has a reactTag of 22 or 12 instead of 21 or 11) and for the app to keep looking. Once a rootView is found, the app ends up crawling the wrong view, and thus not finding the InputAccessoryView to associate with the textInput.
https://github.com/facebook/react-native/blob/630e9faf74e78c42ff14625f84ff63b24ceec0d0/React/Views/RCTComponent.h#L51-L56

Here's the code that goes looking
https://github.com/facebook/react-native/blob/630e9faf74e78c42ff14625f84ff63b24ceec0d0/Libraries/Text/TextInput/RCTBaseTextInputView.m#L472-L488

[gbalduzzi]

I'm facing the same issue and it's actually blocking in my situation.

Are there any ways to workaround this issue?

[kotomono]

any news on this? i'm facing the problem as the numeric textinput is inside a modal and it's blocking me

[thymikee]

@euroclydon37 are you able to preare a PR with a fix using your findings?

[cpojer]

This is a real bug but it is unlikely we'll be able to spend any time on a fix so I'm going to close this issue. It seems that you already have a way to fix it so if you could send a Pull Request, we are happy to review and land it.

[schvenk]

I know this is closed but am blocked by this myself and would love a fix. @euroclydon37 any chance of a PR?

[EmilyRagan]

Interested as well! I'm running into this problem

[thanh90]

any update with this ?