Upgrade to react-native-web v0.19.9 #24482
Conversation
|
Hey! I see that you made changes to our Form component. Make sure to update the docs in FORMS.md accordingly. Cheers! |
|
@aimane-chnaif Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button] |
|
🚀 Deployed to production by https://github.com/puneetlath in version: 1.3.96-15 🚀
|
|
🚀 Deployed to staging by https://github.com/mountiny in version: 1.3.98-0 🚀
|
|
🚀 Deployed to production by https://github.com/roryabraham in version: 1.3.98-5 🚀
|
| var isEventTargetScrollable = scrollLength > clientLength; | ||
| var delta = this.props.horizontal ? ev.deltaX || ev.wheelDeltaX : ev.deltaY || ev.wheelDeltaY; | ||
| - var leftoverDelta = delta; | ||
| + var leftoverDelta = delta * 0.5; |
There was a problem hiding this comment.
root cause here #31402 (comment)
There was a problem hiding this comment.
@rushatgabhane @situchan this is not something new, i just applied a patch from https://github.com/Expensify/react-native-web/pull/16/files
and was not removed until now https://github.com/Expensify/react-native-web/blob/master/packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js#L815, i am pretty sure it helped with scroll issues we had.
|
Just a note that there was a minor regression related to this upgrade: #31101 |
| @@ -14,21 +14,19 @@ function focusComposerWithDelay(textInput: TextInput | null): FocusComposerWithD | |||
| return (shouldDelay = false) => { | |||
| // There could be other animations running while we trigger manual focus. | |||
| // This prevents focus from making those animations janky. | |||
| InteractionManager.runAfterInteractions(() => { | |||
There was a problem hiding this comment.
Coming from #31210 (select an emoji with Enter).
After we remove InteractionManager.runAfterInteractions, the focus will be executed in the keydown event handler, which will result in an extra newline in the composer input box.
| @@ -7,6 +8,7 @@ const BaseInvertedFlatListWithRef = forwardRef((props, ref) => ( | |||
| // eslint-disable-next-line react/jsx-props-no-spreading | |||
| {...props} | |||
| ref={ref} | |||
| contentContainerStyle={styles.justifyContentEnd} | |||
There was a problem hiding this comment.
Hey there! It's been a while but still going to ask
We have passed this style to this component in the parent component https://github.com/getusha/App/blob/c97ff978ee258af698628b6a4632074dec451ddb/src/pages/home/report/ReportActionsList.js#L361
What is the reason for duplicating it here?
Coming from #31487, |
Nice job fixing patch conflict 😄 |
| @@ -14,21 +14,19 @@ function focusComposerWithDelay(textInput: TextInput | null): FocusComposerWithD | |||
| return (shouldDelay = false) => { | |||
| // There could be other animations running while we trigger manual focus. | |||
| // This prevents focus from making those animations janky. | |||
| InteractionManager.runAfterInteractions(() => { | |||
There was a problem hiding this comment.
This also caused #27612 where after the emoji picker modal is hidden, focus is put on the composer input immediately even if we closed that modal to open another one, this resulted in a flicker because focus is lost again to the new modal.
Details
Deprecated props
nativeIdreplaced withidpropfocusablereplaced withtabIndexproppointerEventsreplaced withpointerEventsstyle propertyselectablereplaced withuserSelectstyle propertykeyboardTypereplaced withinputModepropthere are values which didn't have a replacement with the new prop used on native currently,
visible-passwordandascii-capablethey thenkeyboardTypewill still be used on native files.returnKeyTypereplaced withenterKeyHintpropeditablereplaced withreadOnlypropnumberOfLinesreplaced withrowsprop forTextInputcomponentaccessibility*replacedaria*propsWe may use some
accessibility*props in order to prevent some 3rd part libraries from breaking.for example
@testing-library/react-native: usingaria-labelinstead ofaccessibilityLabelwill cause the testing library from getting the component usingqueryByLabelTexttextAlignVerticalprop replaced withverticalAlignstyleDeprecated style properties/values
transformarray value to space-separated string functions. e.g.transform: 'scale(2)'there are limitations using the space-separated string functions with Animated components, some transforms are still using array values more info: [Animated] Cannot animate string transform properties (v0.19) necolas/react-native-web#2528
resizeModestyle replaced withresizeModepropBreaking changes based on the usages in the codebase
position:relativeby default.InteractionManager.More information can be found on this release note
Fixed Issues
$ #16660
PROPOSAL: #16660 (comment)
Tests
No Specific test cases
Offline tests
QA Steps
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectiontoggleReportand notonIconClick)myBool && <MyComponent />.src/languages/*files and using the translation methodWaiting for Copylabel for a copy review on the original GH to get the correct copy.STYLE.md) were followedAvatar, I verified the components usingAvatarare working as expected)/** comment above it */thisproperly so there are no scoping issues (i.e. foronClick={this.submit}the methodthis.submitshould be bound tothisin the constructor)thisare necessary to be bound (i.e. avoidthis.submit = this.submit.bind(this);ifthis.submitis never passed to a component event handler likeonClick)StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG))Avataris modified, I verified thatAvataris working as expected in all cases)ScrollViewcomponent to make it scrollable when more elements are added to the page.mainbranch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTeststeps.Screenshots/Videos
Web
Mobile Web - Chrome
Mobile Web - Safari
Desktop
iOS
Android