Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: remove wrapper view from KeyboardAwareScrollView #321

Merged
merged 5 commits into from
Jan 12, 2024

Conversation

kirillzyusko
Copy link
Owner

@kirillzyusko kirillzyusko commented Jan 8, 2024

📜 Description

Removed view wrapper. Attached that view as last child + kept padding for this view.

💡 Motivation and Context

The approach with additional view was added in #257

I don't remember exact reason, but for me it seems like it was added, because TExtInputs were not able to grow. However such approach is causing additional issues:

  • breaks styling in some cases
  • stickyHeaderIndices={[0]} produces a crash (because RN will try to attach Animated-based style to REA view)

So in this PR I'm removing this view wrapper and apply additional padding in mostly the same way as it was before #257 (additional child-view in the end of ScrollView, but instead of height I'm animating paddingBottom).

I've tested and it still works (i. e. inputs are growing). E2E tests also passing (so there seems to be 1px difference, which can be neglected, but i had to update assets to assure E2E tests consistency).

Important

This fix will introduce software-mansion/react-native-reanimated#5567. I've added that issue as "known issue" in docs page.
I think it's better to have properly working paper architecture and Fabric can be fixed later (because it's still in early adoption and is not widely used).

Closes #325

📢 Changelog

E2E

  • added detox-clean command (useful when you updated XCode version and haven't run detox tests yet)

JS

  • removed wrapper and moved view as last child

🤔 How Has This Been Tested?

Tested on:

  • e2e (Android, iOS - paper)
  • Pixel 7 Pro (Android 14, paper)

📸 Screenshots (if appropriate):

There is no visual difference 🙂

📝 Checklist

  • CI successfully passed

@kirillzyusko kirillzyusko added 🐛 bug Something isn't working 📚 components Anything related to the exported components of this library labels Jan 8, 2024
@kirillzyusko kirillzyusko self-assigned this Jan 8, 2024
Copy link
Contributor

github-actions bot commented Jan 8, 2024

📊 Package size report

Current size Target Size Difference
112283 bytes 112265 bytes 18 bytes 📈

@kirillzyusko
Copy link
Owner Author

For history purposes I'm attaching pixel diff (it seems like it under/over-scrolls 1px, what can be ignored):

AwareScrollViewKeyboardClosed-diff

@kirillzyusko
Copy link
Owner Author

I opened an issue for Fabric problem in REA repository: software-mansion/react-native-reanimated#5567

@kirillzyusko kirillzyusko marked this pull request as ready for review January 11, 2024 18:48
Copy link
Contributor

PR Preview Action v1.4.6
🚀 Deployed preview to https://kirillzyusko.github.io/react-native-keyboard-controller/pr-preview/pr-321/
on branch gh-pages at 2024-01-11 18:49 UTC

Copy link

argos-ci bot commented Jan 11, 2024

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build Status Details Updated (UTC)
default (Inspect) 👍 Changes approved 59 changes Jan 11, 2024, 6:50 PM

@kirillzyusko kirillzyusko merged commit ec912c0 into main Jan 12, 2024
12 checks passed
@kirillzyusko kirillzyusko deleted the fix/unnecessary-wrapper-view-in-kasv branch January 12, 2024 07:29
@kirillzyusko kirillzyusko added the KeyboardAwareScrollView 📜 Anything related to KeyboardAwareScrollView component label May 29, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🐛 bug Something isn't working 📚 components Anything related to the exported components of this library KeyboardAwareScrollView 📜 Anything related to KeyboardAwareScrollView component
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Expose style prop of chidren of KeyboardAwareScrollView
1 participant