React-native: [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?)
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

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

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