[InputAccessoryView] Does not support device orientation change #27887

demchenkoalex · 2020-01-28T10:23:36Z

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

Run RNTester app from the React Native repository and choose InputAccessoryView example
Rotate the simulator/device
(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 · 2020-02-01T00:03:07Z

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 · 2020-02-13T04:04:29Z

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 added the Bug label Jan 28, 2020

react-native-bot added the Component: InputAccessoryView label Jan 28, 2020

hramos added Issue: Author Provided Repro Good first issue labels Jan 31, 2020

facebook / react-native

[InputAccessoryView] Does not support device orientation change #27887

[InputAccessoryView] Does not support device orientation change #27887

demchenkoalex commented Jan 28, 2020

This comment has been minimized.

hramos commented Feb 1, 2020

This comment has been minimized.

jeswinsimon commented Feb 13, 2020

facebook / react-native

Join GitHub today

[InputAccessoryView] Does not support device orientation change #27887

[InputAccessoryView] Does not support device orientation change #27887

Comments

demchenkoalex commented Jan 28, 2020

Steps To Reproduce

This comment has been minimized.

hramos commented Feb 1, 2020

This comment has been minimized.

jeswinsimon commented Feb 13, 2020