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.

Sign up for GitHub

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

Jump to bottom

Expose style prop of chidren of KeyboardAwareScrollView #325

Closed
sem4phor opened this issue Jan 11, 2024 · 2 comments · Fixed by #321
Closed

Expose style prop of chidren of KeyboardAwareScrollView #325

sem4phor opened this issue Jan 11, 2024 · 2 comments · Fixed by #321
Assignees
@kirillzyusko
Labels
🐛 bug Something isn't working 📚 components Anything related to the exported components of this library KeyboardAwareScrollView 📜 Anything related to KeyboardAwareScrollView component

Comments

@sem4phor
Copy link

Is your feature request related to a problem? Please describe.
When using the KeyboardAwareScrollView component with react-native-web there is no way in styling it's internal child (<Reanimated.View style={view}>{children}</Reanimated.View>) which I need to do because it needs to span the whole screen for me and therefore i have to add flex: 1 to it somehow.

Describe the solution you'd like
Expose the style prop of that child.

Describe alternatives you've considered
Importing a css file on some other way and target that div.
@kirillzyusko
Copy link
Owner

@sem4phor will this PR #321 fix your problem?

I think then you can specify contentContainerStyle={{flex: 1}} and it should work, right?

@sem4phor
Copy link
Author

Yes thank you 🙏

@kirillzyusko kirillzyusko mentioned this issue Jan 11, 2024
Merged
1 task
kirillzyusko added a commit that referenced this issue Jan 12, 2024
@kirillzyusko
fix: remove wrapper view from KeyboardAwareScrollView (#321)
ec912c0 
## 📜 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

<!-- High level overview of important changes -->
<!-- For example: fixed status bar manipulation; added new types
declarations; -->
<!-- If your changes don't affect one of platform/language below - then
remove this platform/language -->

### 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

- [x] CI successfully passed
@kirillzyusko kirillzyusko added 🐛 bug Something isn't working 📚 components Anything related to the exported components of this library labels Jan 12, 2024
@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
Assignees

@kirillzyusko kirillzyusko

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
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: remove wrapper view from KeyboardAwareScrollView kirillzyusko/react-native-keyboard-controller
2 participants
@sem4phor @kirillzyusko