mateusz1913 / react-native-avoid-softinput

Native solution for common React Native problem of focused views being covered by soft input view.
https://mateusz1913.github.io/react-native-avoid-softinput/
MIT License
700 stars 17 forks source link

Animation feels like lagging With mimic IOS behavior and flickering when turned off #182

Open 25khattab opened 12 months ago

25khattab commented 12 months ago

Environment

Library version: 4.0.1 OS version: Pixel 7, android 13

Affected platforms

Current behavior

There is 2 problems first one with AvoidSoftInput.setShouldMimicIOSBehavior(true); The animation feels like lagging for some reason it works fine if the keyboard is under the input as it clear in the video, but it begins to lag when it pushes the view and I don't know why it doesn't animate correctly

https://github.com/mateusz1913/react-native-avoid-softinput/assets/53271078/69feacf2-698f-4962-b173-ba8ddc535ac2

when I remove the animation delay it flickers like mad man

https://github.com/mateusz1913/react-native-avoid-softinput/assets/53271078/f817d7b4-f1ad-4993-91e7-1c5008e0ffb2

Expected behavior

the animation should be smooth like the example app which is strange for some reason or maybe like whatsapp handles it.

https://github.com/mateusz1913/react-native-avoid-softinput/assets/53271078/b76d038c-8d40-49b6-9d0b-6b7a99da4934

Reproduction

https://github.com/25khattab/react-native-template

25khattab commented 12 months ago

@mateusz1913 sorry for many issues in that little time

mateusz1913 commented 12 months ago

Regarding the first recording, I don't see any wrong behavior. When the first 2 inputs are focused, the padding is applied, but there's no need to change the scroll offset. For the 3rd input, there's a scroll by minimal offset 5/10px, because the keyboard top edge is covering that input only by a few pixels. The rest of inputs would be fully covered by the keyboard and the library is correctly scrolling them, so that they are displayed above the keyboard.

Regarding the second recording and comparing it to the Whatsapp - I assume that Whatsapp doesn't use edge-to-edge, instead relying on standard android:windowSoftInputMode="adjustResize" behavior. If that's what you would expect (so no animation), then you can just enable the library for iOS (AvoidSoftInput.setEnabled(Platform.OS === 'ios')) and leave the android handling to the default OS behavior (so not calling AvoidSoftInput.setShouldMimicIOSBehavior)

25khattab commented 12 months ago

Ok i will test it but regarding the first video the last 2 inputs the animation when closing the keyboard isn't smooth at all

mateusz1913 commented 12 months ago

If it's smooth in the example app and not smooth in your app, then I'd check either styles applied to the scroll view, or consider applying the padding manually - you can check the sticky footer example where the offset is applied to reanimated shared value and then the spacer view is animated - that may give better control over the animation

dkahdwk commented 11 months ago

It's the same issue. Can't Android use this library?

mateusz1913 commented 11 months ago

@dkahdwk what do you mean?

dkahdwk commented 11 months ago

@dkahdwk what do you mean?

Same bug in android like @25khatab issue.

fukemy commented 11 months ago

just use react-native-keyboard-controller

saadi-ninjasCode commented 10 months ago

@25khattab , @mateusz1913 , @dkahdwk , I faced the same issue. Actually, this is not a bug. You have to tweak the values . In my case, I set the value as following.

AvoidSoftInput.setEnabled(true);
AvoidSoftInput.setShouldMimicIOSBehavior(true);
AvoidSoftInput.setHideAnimationDuration(100);
AvoidSoftInput.setShowAnimationDuration(100);