[RNMobile] Update KeyboardAwareFlatList iOS implementation #33170
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Use KeyboardAwareFlatList component instead of KeyboardAwareScrollView to prevent triggering the error: VirtualizedLists should never be nested inside plain ScrollViews with the same orientation because it can break windowing and other functionality - use another VirtualizedList-backed container instead.
fluiddot
added
the
Mobile App - i.e. Android or iOS
|
Size Change: 0 B Total Size: 1.08 MB ℹ️ View Unchanged
|
The work is completed, the only thing it was pending was testing thoroughly the changes as it affects the block list, besides I wanted to double-check that it doesn't introduce undesired side effects. I think it would be great if you include it in the RN upgrade, as we could do the testing there, wdyt? |
@fluiddot given we will likely need to test the RN upgrade thoroughly, it does seem like a good place to include this work. I will update the target branch for this PR and review. |
dcalhoun
changed the base branch from
trunk
to
chore/upgrade-to-react-native-0.66
Awesome, I'll set it ready for review 🎊 . |
dcalhoun
reviewed
Nov 11, 2021
There was a problem hiding this comment.
Thank you for putting this together. 🙇🏻 It will be great to silence this error and potentially improve the performance of the app. I noticed a couple of issues. I hope to make time to explore them a bit more. I will report back any findings.
From testing, I am seeing some odd jumping when at the bottom of the block list. When at the bottom, if I scroll downwards and release, there is small jump that occurs. If scroll slowly upwards, the scroll position appears to jump upwards.
end-of-scroll-jumping.MP4
Additionally, when scrolling very quickly, you can see various UI layout updates occur. This isn't incredibly surprising, given this is a FlatList, but it is not the smoothest. We may have an opportunity to reduce re-renders or it could be some of the props overrides with ...listProps cause issue.
| Frame 1 | Frame 2 | Frame 3 |
|---|---|---|
 |
 |
 |
delayed-ui-layout.MP4
packages/components/src/mobile/keyboard-aware-flat-list/index.ios.js
Outdated
Show resolved
Hide resolved
| latestContentOffsetY.current = | ||
| event.nativeEvent.contentOffset.y; | ||
| } } | ||
| { ...listProps } |
There was a problem hiding this comment.
I wonder if this relocated prop spread is unintentionally overriding some of the props set above, or some of the locally set props are irrelevant. There appears to be only one usage of this component and it sets several style properties itself. We may need to merge the props or remove the locally set props.
keyboardShouldPersistTapsstylescrollViewStylecontentContainerStyle
There was a problem hiding this comment.
Yep, good point, we should review what was the purpose of the different style ones (style, scrollViewStyle and contentContainerStyle) in the original component and decide in each case the best way to proceed, probably some of the local ones are no longer necessary.
…ios.js Co-authored-by: David Calhoun <438664+dcalhoun@users.noreply.github.com>
fluiddot
deleted the
rnmobile/fix/ios-virtualized-lists-scrollviews-error
branch
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Use
KeyboardAwareFlatListcomponent instead ofKeyboardAwareScrollViewto prevent triggering the error:Fixes: #32884
How has this been tested?
Verify that the block list works as expected
The component
KeyboardAwareFlatListis used for rendering the blocks so this has been tested by interacting with the block list:Verify that the block list is aware of the keyboard
Screenshots
N/A
Types of changes
Bug fix
Checklist:
*.native.jsfiles for terms that need renaming or removal).