[InputAccessoryView] Does not support device orientation change

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?) https://github.com/facebook/react-native/blob/30491a208513451efa6c2a62a116c61b21363a22/Libraries/Text/TextInput/RCTInputAccessoryViewContent.m#L26

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

[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. https://github.com/facebook/react-native/blob/619d5d60dfa94966e7104febec08166c1b5eca49/Libraries/Text/TextInput/RCTInputAccessoryShadowView.m#L17

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. https://github.com/facebook/react-native/blob/619d5d60dfa94966e7104febec08166c1b5eca49/React/Base/RCTUtils.m#L304-L310

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.

https://github.com/facebook/react-native/blob/619d5d60dfa94966e7104febec08166c1b5eca49/Libraries/Text/TextInput/RCTInputAccessoryViewContent.m#L67-L71

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.

[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.