[InputAccessoryView] Does not support device orientation change

[demchenkoalex]

Hi everyone.

I've noticed that InputAccessoryView does not change its width when device orientation changes (related #24473). Moreover, if app is initially ran in landscape mode, right part (usually send button) is going off-screen, see examples below.

As stated in this comment my understanding that this is a known issue and it is being tracked somewhere (T27974328?)

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

Line 26 in 30491a2

// TODO: Support rotation, anchor to left and right without breaking frame x coordinate (T27974328).

I am more than happy to fix this myself and submit a PR, however after 3 hours of trying I just don't know where to go. Maybe somebody can share some thoughts about this issue. My only observation is that the latest PR #21179 with changes to the safe area was using code very similar to https://github.com/stockx/SafeAreaInputAccessoryViewWrapperView/blob/master/SafeAreaInputAccessoryViewWrapperView/Classes/SafeAreaInputAccessoryViewWrapperView.swift and width is resizing normally in this native code, so the problem might be deeper than in the RCTInputAccessoryViewContent.m class.

React Native version:

System:
    OS: macOS 10.15.2
    CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
    Memory: 702.91 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
Binaries:
    Node: 13.3.0 - /usr/local/bin/node
    Yarn: 1.21.1 - /usr/local/bin/yarn
    npm: 6.13.6 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
  iOS SDK:
    Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
  Android SDK:
    API Levels: 23, 27, 28, 29
    Build Tools: 28.0.3, 29.0.2
    System Images: android-29 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom
IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.6010548
    Xcode: 11.3.1/11C504 - /usr/bin/xcodebuild
npmPackages:
    react: ^16.12.0 => 16.12.0
    react-native: ^0.61.5 => 0.61.5

Steps To Reproduce

1. Run RNTester app from the React Native repository and choose InputAccessoryView example
2. Rotate the simulator/device
3. (Optional) Close and run RNTester app while in landscape mode, choose InputAccessoryView example, see that Send button is off-screen

Describe what you expected to happen:

InputAccessoryView's width automatically resizes when changing between portrait and landscape orientation. Trailing layout anchor is preserving safe area boundaries (right now it's off-screen if ran from landscape).

Snack, code example, screenshot, or link to a repository:

https://github.com/facebook/react-native/tree/master/RNTester#30491a208513451efa6c2a62a116c61b21363a22

Ran in portrait mode example GIF: https://imgur.com/a/TE3VxxI
Ran in landscape mode example GIF: https://imgur.com/a/4bt5LPz

[hramos]

I looked into T27974328, which is a reference to a task in our (Facebook's) internal task tracker, but that task refers to a different issue with InputAccessoryView. From what I could see in a related task, it looks like we're aware that InputAccessoryView doesn't work that great in landscape, and any PR that helps here would be appreciated.

[jeswinsimon]

Ok so the reason for InputAccessoryView having a fixed width is because its subviews are set to screen width initially and doesn't change.

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

Line 17 in 619d5d6

subview.width = (YGValue) { RCTScreenSize().width, YGUnitPoint };

Moreover, if app is initially ran in landscape mode, right part (usually send button) is going off-screen, see examples below.

This is because the screen size is calculated once and cached.

react-native/React/Base/RCTUtils.m

Lines 304 to 310 in 619d5d6

	CGSize RCTScreenSize()
	{
	// FIXME: this caches the bounds at app start, whatever those were, and then
	// doesn't update when the device is rotated. We need to find another thread-
	// safe way to get the screen size.
	static CGSize size;

I think the right fix would be to remove the fixed width for the subviews and use AutoLayout constraints. The RCTInputAccessoryViewContent view is set constraint based and adjusts automatically but the subviews we insert have fixed width from above RCTInputAccessoryShadowView.

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

Lines 67 to 71 in 619d5d6

	- (void)insertReactSubview:(UIView *)subview atIndex:(NSInteger)index
	{
	[super insertReactSubview:subview atIndex:index];
	[_safeAreaContainer insertSubview:subview atIndex:index];
	}

I am still trying to figure out the lifecycle of view/shadow view/view managers, I shall update here if I make any progress.

@hramos @demchenkoalex @PeteTheHeat @janicduplessis Please share your thoughts if any.

[demchenkoalex]

I guess it will not be so simple to fix, moreover, I have experienced another bug with InputAccessoryView which is hiding completely after modal is being shown on the same screen, so I wrote this https://github.com/flyerhq/react-native-keyboard-accessory-view (with interactive dismiss support on iOS using PanResponder). It works fine for me, so I am leaving it here, just in case if someone is looking for a solution until this is fixed.

[chirag-singhal]

@demchenkoalex Is this a good issue to get started on? I'd love to take a stab at it.

[PeteTheHeat]

@chirag-singhal I think this is a decent issue to get started on, input accessory view was the first thing I built when I started working on React Native (which is why it has a bunch of edge case bugs like this).

Some thoughts:

• @jeswinsimon is on the right track, the shadow view subview.width constraint must be removed. Instead, try adding an autolayout constraint in RCTInputAccessoryViewContent's insertReactSubview method.
• Put a bunch of breakpoints everywhere and try to understand how layout parameters of various views change.
• Possibly make use of https://developer.apple.com/documentation/uikit/uideviceorientationdidchangenotification?language=objc. This might not be necessary since autolayout constraints take orientation into consideration.

[chirag-singhal]

@PeteTheHeat Anybody can take this issue, I broke my mac screen while working today. So i have to shift to another laptop which runs on linux OS. Can you tell me any issue which i can work on?

[cristianoccazinsp]

What's the status of this issue? Still a bug in RN 0.62.2

[luanccp]

Still a bug in RN 0.66.3

[Dragollla]

Present in 0.70.2

[jl-casella]

Any update on this?

[mauriciomeirelles]

Hey all, just FYI that I have a fix for both Fabric and old renderer here.

#43303