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:/expo/react-native/archive/sdk-30.0.0.tar.gz => https:/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.

react-native/Libraries/Text/TextInput/RCTBaseTextInputView.m

Lines 478 to 485 in 630e9fa

	if (rootView) {
	UIView *accessoryView = [strongSelf->_bridge.uiManager viewForNativeID:nativeID
	withRootTag:rootView.reactTag];
	if (accessoryView && [accessoryView isKindOfClass:[RCTInputAccessoryView class]]) {
	strongSelf.backedTextInputView.inputAccessoryView = ((RCTInputAccessoryView *)accessoryView).inputAccessoryView;
	[strongSelf reloadInputViewsIfNecessary];
	}
	}

Also found this. Perhaps the rootView wasn't found because of some problem here?

react-native/React/Views/RCTComponent.h

Lines 51 to 56 in 630e9fa

	// TODO: this is kinda dumb - let's come up with a
	// better way of identifying root React views please!
	static inline BOOL RCTIsReactRootView(NSNumber *reactTag)
	{
	return reactTag.integerValue % 10 == 1;
	}

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.

react-native/React/Views/RCTComponent.h

Lines 51 to 56 in 630e9fa

	// TODO: this is kinda dumb - let's come up with a
	// better way of identifying root React views please!
	static inline BOOL RCTIsReactRootView(NSNumber *reactTag)
	{
	return reactTag.integerValue % 10 == 1;
	}

Here's the code that goes looking

react-native/Libraries/Text/TextInput/RCTBaseTextInputView.m

Lines 472 to 488 in 630e9fa

	- (void)setCustomInputAccessoryViewWithNativeID:(NSString *)nativeID
	{
	#if !TARGET_OS_TV
	__weak RCTBaseTextInputView *weakSelf = self;
	[_bridge.uiManager rootViewForReactTag:self.reactTag withCompletion:^(UIView *rootView) {
	RCTBaseTextInputView *strongSelf = weakSelf;
	if (rootView) {
	UIView *accessoryView = [strongSelf->_bridge.uiManager viewForNativeID:nativeID
	withRootTag:rootView.reactTag];
	if (accessoryView && [accessoryView isKindOfClass:[RCTInputAccessoryView class]]) {
	strongSelf.backedTextInputView.inputAccessoryView = ((RCTInputAccessoryView *)accessoryView).inputAccessoryView;
	[strongSelf reloadInputViewsIfNecessary];
	}
	}
	}];
	#endif /* !TARGET_OS_TV */
	}

[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

[roger-ngx]

any update with this ?