Input Accessory View has weird animation/only mounts after screen is fully pushed

[mrousavy]

🐛 Bug Report

When using the <InputAccessoryView> component, the accessory view (UIResponder::inputAccessoryView) either has a weird animation on push, or doesn't mount at all until the push animation has fully completed (componentDidAppear event).

Here's a demo showing both cases:

https://user-images.githubusercontent.com/15199031/112853829-8af53600-90ad-11eb-8e77-cdf25d66aa12.MP4

This feels like it is related to https://github.com/wix/react-native-navigation/issues/7019 and https://github.com/wix/react-native-navigation/issues/2622.

Have you read the Contributing Guidelines on issues?

yea

To Reproduce

1. Create a screen with an example view, e.g. <View style={{ width: 100, height: 40, backgroundColor: 'red' }} />
2. Wrap <TextInput>/<View> with <InputAccessoryView>
3. Push the screen

See repro/input-accessory-view.

Expected behavior

I expect it to be already mounted and not have any slide in animation

Actual Behavior

It either slides in from the right, but delayed compared to the actual page content, or doesn't mount at all until the screen has been fully pushed.

Your Environment

• React Native Navigation version: cef992918cce652427d85d6a52e8d9ded65b95c6
• React Native version: 0.64.0
• Platform(s) (iOS, Android, or both?): iOS

[mrousavy]

Reproduceable sample (in the playground app): repro/input-accessory-view

Looks like this:

https://user-images.githubusercontent.com/15199031/112989442-390fe700-9165-11eb-9d01-efce5891281a.MP4

First push it looks weird and jumps, second push it doesn't mount at all.

cc @yogevbd

[yogevbd]

I found two problems here in RN:

1. The TextInput is being focused in the middle of the push animations which results in this weird glitch. I'm thinking of delaying the autoFocus to when the push animation is ended (componentDidAppear).
2. The InputAccessoryView is being measured and its frame is being updated multiple times in the middle of the push animation which causes another glitch. Here I think that our best option is to waitForRender for that specific screen.

@mrousavy wdyt?

[mrousavy]

I actually have waitForRender: true on that screen, doesn't look like this changes anything 🤔

[yogevbd]

https://user-images.githubusercontent.com/10794586/113505573-55869780-9548-11eb-9020-4366c71dd3de.mov

All I did is adding waitForRender to your example

[mrousavy]

Huh, I must've missed something then. Thanks!

Do you want to close this or keep it open?

[mrousavy]

@yogevbd where did you add the waitForRender? I also added waitForRender in my app (uses 7.12.0-snapshot.1506, so current master), and there still seems to be something wrong (even with the minimal code, no re-renders or anything.)

https://user-images.githubusercontent.com/15199031/113572892-5cc9a600-9619-11eb-835f-47947a590dff.MP4

I added waitForRender literally everywhere, at default options, at the ChatPage options, and on the push command:

        {
          animations: {
            push: {
              waitForRender: true,
              content: {
                waitForRender: true,
                enter: {
                  waitForRender: true,
                },
              },
            },
          },
        }

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If you believe the issue is still relevant, please test on the latest version and report back. Thank you for your contributions.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If you believe the issue is still relevant, please test on the latest version and report back. Thank you for your contributions.

[timothyerwin]

I'm using react-navigation . Does anyone know if there might be a similar way to address this? The InputAccessory has similar weird delayed animations or something as opposed to showing immediately. I'd love to fix this.