From bb711d2030fce467500b11cf0a2f09b1225d7444 Mon Sep 17 00:00:00 2001 From: Azim Gadzhiagayev Date: Thu, 4 Nov 2021 00:09:15 +0500 Subject: [PATCH 1/7] Removed flatlist inversion (by inverted=true prop) which used [transform: translate] css hack and instead adding flatlist array items in reverse order [unshift instead of push]; It also reverses ScrollView event response received from browser [e.nativeEvent.configOffset *= -1]; --- .../react-native/VirtualizedList/index.js | 43 ++++++++++++------- 1 file changed, 28 insertions(+), 15 deletions(-) diff --git a/packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js b/packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js index 23a9ccea5..91dac46da 100644 --- a/packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js +++ b/packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js @@ -361,6 +361,14 @@ type State = { class VirtualizedList extends React.PureComponent { static contextType: typeof VirtualizedListContext = VirtualizedListContext; + pushOrUnshift(input: Array, item: Item) { + if (this.props.inverted) { + input.unshift(item) + } else { + input.push(item) + } + } + // scrollToEnd may be janky without getItemLayout prop scrollToEnd(params?: ?{animated?: ?boolean, ...}) { const animated = params ? params.animated : true; @@ -707,7 +715,7 @@ class VirtualizedList extends React.PureComponent { ); } else if (this.props.onViewableItemsChanged) { const onViewableItemsChanged = this.props.onViewableItemsChanged - this._viewabilityTuples.push({ + this.pushOrUnshift(this._viewabilityTuples, { viewabilityHelper: new ViewabilityHelper(this.props.viewabilityConfig), onViewableItemsChanged, }); @@ -807,9 +815,9 @@ class VirtualizedList extends React.PureComponent { const key = keyExtractor(item, ii); this._indicesToKeys.set(ii, key); if (stickyIndicesFromProps.has(ii + stickyOffset)) { - stickyHeaderIndices.push(cells.length); + this.pushOrUnshift(stickyHeaderIndices, cells.length); } - cells.push( + this.pushOrUnshift(cells, { const stickyHeaderIndices = []; if (ListHeaderComponent) { if (stickyIndicesFromProps.has(0)) { - stickyHeaderIndices.push(0); + this.pushOrUnshift(stickyHeaderIndices, 0); } const element = React.isValidElement(ListHeaderComponent) ? ( ListHeaderComponent @@ -887,7 +895,7 @@ class VirtualizedList extends React.PureComponent { // $FlowFixMe ); - cells.push( + this.pushOrUnshift(cells, @@ -936,7 +944,7 @@ class VirtualizedList extends React.PureComponent { stickyBlock.offset - initBlock.offset - (this.props.initialScrollIndex ? 0 : initBlock.length); - cells.push( + this.pushOrUnshift(cells, /* $FlowFixMe(>=0.111.0 site=react_native_fb) This comment * suppresses an error found when Flow v0.111 was deployed. To * see the error, delete this comment and run Flow. */ @@ -953,7 +961,7 @@ class VirtualizedList extends React.PureComponent { const trailSpace = this._getFrameMetricsApprox(first).offset - (stickyBlock.offset + stickyBlock.length); - cells.push( + this.pushOrUnshift(cells, /* $FlowFixMe(>=0.111.0 site=react_native_fb) This comment * suppresses an error found when Flow v0.111 was deployed. To * see the error, delete this comment and run Flow. */ @@ -969,7 +977,7 @@ class VirtualizedList extends React.PureComponent { const firstSpace = this._getFrameMetricsApprox(first).offset - (initBlock.offset + initBlock.length); - cells.push( + this.pushOrUnshift(cells, /* $FlowFixMe(>=0.111.0 site=react_native_fb) This comment * suppresses an error found when Flow v0.111 was deployed. To see * the error, delete this comment and run Flow. */ @@ -1006,7 +1014,7 @@ class VirtualizedList extends React.PureComponent { endFrame.offset + endFrame.length - (lastFrame.offset + lastFrame.length); - cells.push( + this.pushOrUnshift(cells, /* $FlowFixMe(>=0.111.0 site=react_native_fb) This comment suppresses * an error found when Flow v0.111 was deployed. To see the error, * delete this comment and run Flow. */ @@ -1022,7 +1030,7 @@ class VirtualizedList extends React.PureComponent { // $FlowFixMe )): any); - cells.push( + this.pushOrUnshift(cells, React.cloneElement(element, { key: '$empty', onLayout: event => { @@ -1042,7 +1050,7 @@ class VirtualizedList extends React.PureComponent { // $FlowFixMe ); - cells.push( + this.pushOrUnshift(cells, @@ -1367,7 +1375,7 @@ class VirtualizedList extends React.PureComponent { * error found when Flow v0.68 was deployed. To see the error delete this * comment and run Flow. */ if (frame.inLayout) { - framesInLayout.push(frame); + this.pushOrUnshift(framesInLayout, frame); } } const windowTop = this._getFrameMetricsApprox(this.state.first).offset; @@ -1505,6 +1513,11 @@ class VirtualizedList extends React.PureComponent { }; _onScroll = (e: Object) => { + var contentOffset = (this.props.inverted) ? { + x: - e.nativeEvent.contentOffset.x, + y: - e.nativeEvent.contentOffset.y, + } : e.nativeEvent.contentOffset + this._nestedChildLists.forEach(childList => { childList.ref && childList.ref._onScroll(e); }); @@ -1514,7 +1527,7 @@ class VirtualizedList extends React.PureComponent { const timestamp = e.timeStamp; let visibleLength = this._selectLength(e.nativeEvent.layoutMeasurement); let contentLength = this._selectLength(e.nativeEvent.contentSize); - let offset = this._selectOffset(e.nativeEvent.contentOffset); + let offset = this._selectOffset(contentOffset); let dOffset = offset - this._scrollMetrics.offset; if (this._isNestedWithSameOrientation()) { @@ -2048,10 +2061,10 @@ function describeNestedLists(childList: { const styles = StyleSheet.create({ verticallyInverted: { - transform: [{scaleY: -1}], + flexDirection: 'column-reverse', }, horizontallyInverted: { - transform: [{scaleX: -1}], + flexDirection: 'row-reverse', }, row: { flexDirection: 'row', From 31d1d9d1db6f1e873f58a32e50748eadd4c845fa Mon Sep 17 00:00:00 2001 From: Azim Gadzhiagayev Date: Mon, 13 Dec 2021 23:52:09 +0500 Subject: [PATCH 2/7] Fix flatlist bug where half of the content won't render on mobile safari (ios 15); --- .../react-native/VirtualizedList/index.js | 29 +++++++++++++++++-- 1 file changed, 26 insertions(+), 3 deletions(-) diff --git a/packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js b/packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js index 91dac46da..4d78f6339 100644 --- a/packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js +++ b/packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js @@ -1203,6 +1203,12 @@ class VirtualizedList extends React.PureComponent { _defaultRenderScrollComponent = props => { const onRefresh = props.onRefresh; + const inversionStyle = this.props.inverted + ? this.props.horizontal + ? styles.rowReverse + : styles.columnReverse + : null; + if (this._isNestedWithSameOrientation()) { // $FlowFixMe - Typing ReactNativeComponent revealed errors return ; @@ -1231,11 +1237,23 @@ class VirtualizedList extends React.PureComponent { props.refreshControl ) } + contentContainerStyle={StyleSheet.compose( + inversionStyle, + this.props.contentContainerStyle, + )} /> ); } else { // $FlowFixMe Invalid prop usage - return ; + return ( + + ); } }; @@ -1703,6 +1721,11 @@ class VirtualizedList extends React.PureComponent { this._getFrameMetricsApprox, this._scrollMetrics, ); + + // revert the state if calculations are off + if (newState.first === newState.last) { + newState = state + } } } } else { @@ -2061,10 +2084,10 @@ function describeNestedLists(childList: { const styles = StyleSheet.create({ verticallyInverted: { - flexDirection: 'column-reverse', + transform: [{scaleY: -1}], }, horizontallyInverted: { - flexDirection: 'row-reverse', + transform: [{scaleX: -1}], }, row: { flexDirection: 'row', From 947191f0fd5d43fcb5731e60fc3652e40fc7315d Mon Sep 17 00:00:00 2001 From: Azim Gadzhiagayev Date: Tue, 14 Dec 2021 00:39:21 +0500 Subject: [PATCH 3/7] Reset contentOffset as the inversion is done by css transform translate; --- .../src/vendor/react-native/VirtualizedList/index.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js b/packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js index 4d78f6339..163fdaf8c 100644 --- a/packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js +++ b/packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js @@ -1531,11 +1531,6 @@ class VirtualizedList extends React.PureComponent { }; _onScroll = (e: Object) => { - var contentOffset = (this.props.inverted) ? { - x: - e.nativeEvent.contentOffset.x, - y: - e.nativeEvent.contentOffset.y, - } : e.nativeEvent.contentOffset - this._nestedChildLists.forEach(childList => { childList.ref && childList.ref._onScroll(e); }); @@ -1545,7 +1540,7 @@ class VirtualizedList extends React.PureComponent { const timestamp = e.timeStamp; let visibleLength = this._selectLength(e.nativeEvent.layoutMeasurement); let contentLength = this._selectLength(e.nativeEvent.contentSize); - let offset = this._selectOffset(contentOffset); + let offset = this._selectOffset(e.nativeEvent.contentOffset); let dOffset = offset - this._scrollMetrics.offset; if (this._isNestedWithSameOrientation()) { From 5548f3ab68f5dfac293e9592e0efd6ed61c3b50e Mon Sep 17 00:00:00 2001 From: Azim Gadzhiagayev Date: Tue, 14 Dec 2021 08:40:14 +0500 Subject: [PATCH 4/7] Comment computeWindowedRenderLimits reset behaviour; --- .../src/vendor/react-native/VirtualizedList/index.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js b/packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js index 163fdaf8c..1a1e27db6 100644 --- a/packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js +++ b/packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js @@ -1718,6 +1718,8 @@ class VirtualizedList extends React.PureComponent { ); // revert the state if calculations are off + // this would only happen on the inverted flatlist (probably a bug with overscroll-behavior) + // when scrolled from bottom all the way up until onEndReached is triggered if (newState.first === newState.last) { newState = state } From e25e91eb834579cb7f15c0af5d668b6e0c7eebbf Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Mon, 10 Jan 2022 10:45:18 +0530 Subject: [PATCH 5/7] Revert "[fix] numberOfLines=1 on Safari" This reverts commit 562db69a0f3305b07f252ad26b4661bb92bcb72c. --- .../Text/__tests__/__snapshots__/index-test.js.snap | 2 +- packages/react-native-web/src/exports/Text/index.js | 11 +++++++++-- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/packages/react-native-web/src/exports/Text/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/Text/__tests__/__snapshots__/index-test.js.snap index 7c1a743be..d9790bb13 100644 --- a/packages/react-native-web/src/exports/Text/__tests__/__snapshots__/index-test.js.snap +++ b/packages/react-native-web/src/exports/Text/__tests__/__snapshots__/index-test.js.snap @@ -159,7 +159,7 @@ exports[`components/Text prop "numberOfLines" value is set 1`] = ` exports[`components/Text prop "numberOfLines" value is set to one 1`] = `
`; diff --git a/packages/react-native-web/src/exports/Text/index.js b/packages/react-native-web/src/exports/Text/index.js index a2a74ce47..e87af4c95 100644 --- a/packages/react-native-web/src/exports/Text/index.js +++ b/packages/react-native-web/src/exports/Text/index.js @@ -73,11 +73,12 @@ const Text: React.AbstractComponent = const classList = [ classes.text, hasTextAncestor === true && classes.textHasAncestor, - numberOfLines != null && classes.textMultiLine + numberOfLines === 1 && classes.textOneLine, + numberOfLines != null && numberOfLines > 1 && classes.textMultiLine ]; const style = [ props.style, - numberOfLines != null && { WebkitLineClamp: numberOfLines }, + numberOfLines != null && numberOfLines > 1 && { WebkitLineClamp: numberOfLines }, selectable === true && styles.selectable, selectable === false && styles.notSelectable, onPress && styles.pressable @@ -179,6 +180,12 @@ const classes = css.create({ font: 'inherit', whiteSpace: 'inherit' }, + textOneLine: { + maxWidth: '100%', + overflow: 'hidden', + textOverflow: 'ellipsis', + whiteSpace: 'pre' + }, // See #13 textMultiLine: { display: '-webkit-box', From 9f71d4e783eea78384db390b10bbdf461c355cb4 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Mon, 10 Jan 2022 10:46:33 +0530 Subject: [PATCH 6/7] fix: text ellipsis issue for Safari --- packages/react-native-web/src/exports/Text/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/react-native-web/src/exports/Text/index.js b/packages/react-native-web/src/exports/Text/index.js index e87af4c95..a9f08c15d 100644 --- a/packages/react-native-web/src/exports/Text/index.js +++ b/packages/react-native-web/src/exports/Text/index.js @@ -184,7 +184,8 @@ const classes = css.create({ maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis', - whiteSpace: 'pre' + whiteSpace: 'pre', + wordWrap: 'normal' }, // See #13 textMultiLine: { From f226d357575830074d744902f03fcde365bd9ba7 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Tue, 11 Jan 2022 01:41:59 +0530 Subject: [PATCH 7/7] fix snapshot tests --- .../src/exports/Text/__tests__/__snapshots__/index-test.js.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-native-web/src/exports/Text/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/Text/__tests__/__snapshots__/index-test.js.snap index d9790bb13..da9988b41 100644 --- a/packages/react-native-web/src/exports/Text/__tests__/__snapshots__/index-test.js.snap +++ b/packages/react-native-web/src/exports/Text/__tests__/__snapshots__/index-test.js.snap @@ -159,7 +159,7 @@ exports[`components/Text prop "numberOfLines" value is set 1`] = ` exports[`components/Text prop "numberOfLines" value is set to one 1`] = `
`;