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

Modified VirtualListCell component to enable 'useNativeDriver' as Animated parameter #1304

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
+12 −26
Open

Modified VirtualListCell component to enable 'useNativeDriver' as Animated parameter #1304

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 12 additions & 26 deletions extensions/virtuallistview/src/VirtualListCell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,14 +123,11 @@ export class VirtualListCell<ItemInfo extends VirtualListCellInfo> extends RX.Co
private _calculatedHeight = 0;

private _topValue: RX.Animated.Value;
private _leftValue: RX.Animated.Value;
private _widthValue: RX.Animated.Value;
private _ref = createRef<RX.Animated.View>();

// we need to split style for position and width because we use native driver for position,
// but native driver doesnt support width
// position style is splitted between animated (top) and static (width, left)
private _animatedStylePosition: RX.Types.AnimatedViewStyleRuleSet;
private _animatedStyleWidth: RX.Types.AnimatedViewStyleRuleSet;
private _staticStylePosition: RX.Types.ViewStyleRuleSet;
private _topAnimation: RX.Types.Animated.CompositeAnimation | undefined;

private _itemKey: string | undefined;
Expand All @@ -145,32 +142,26 @@ export class VirtualListCell<ItemInfo extends VirtualListCellInfo> extends RX.Co
const topValue = this._isVisible ? this._top : VirtualListCell._hiddenTopValue;
this._topValue = RX.Animated.createValue(topValue);

const leftValue = props.left || 0;
this._leftValue = RX.Animated.createValue(leftValue);

if (!props.isScreenReaderModeEnabled && !_isNativeMacOS) {
// On native platforms, we'll stick with translate[X|Y] because it has a performance advantage.
this._animatedStylePosition = RX.Styles.createAnimatedViewStyle({
transform: [{
translateY: this._topValue,
}],
left: this._leftValue,
}]
});
} else {
// We need to work around an IE-specific bug. It doesn't properly handle
// translateY in this case. In particular, if separate translations are used
// within the item itself, it doesn't handle that combination.
this._animatedStylePosition = RX.Styles.createAnimatedViewStyle({
top: this._topValue,
left: this._leftValue,
top: this._topValue
});
}

this._widthValue = RX.Animated.createValue(props.width || 0);

this._animatedStyleWidth = RX.Styles.createAnimatedViewStyle({
width: this._widthValue,
});
this._staticStylePosition = RX.Styles.createViewStyle({
width: this.props.width,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This change will make the width (and left position) of items static after it's first loaded. VLV cells currently support changing widths via a prop. I'm not sure this is a desirable change, at the very least it's a breaking change. Typically width doesn't change on an item in common cases, but I can't speak for all the uses of VLV.

left: this.props.left || 0,
}, false);
}

UNSAFE_componentWillReceiveProps(nextProps: VirtualListCellProps<ItemInfo>) {
Expand All @@ -192,14 +183,6 @@ export class VirtualListCell<ItemInfo extends VirtualListCellInfo> extends RX.Co

this.setItemKey(nextProps.itemKey);

if (this.props.left !== nextProps.left) {
this._leftValue.setValue(nextProps.left);
}

if (this.props.width !== nextProps.width) {
this._widthValue.setValue(nextProps.width);
}

if (this.props.itemKey !== nextProps.itemKey) {
this.setVisibility(nextProps.isVisible);
this.setTop(nextProps.top);
Expand Down Expand Up @@ -285,11 +268,13 @@ export class VirtualListCell<ItemInfo extends VirtualListCellInfo> extends RX.Co
duration: 200,
delay: animationDelay,
easing: _skypeEaseInAnimationCurve,
useNativeDriver: true,
}),
RX.Animated.timing(this._topValue, {
toValue: top,
duration: 400,
easing: _skypeEaseOutAnimationCurve,
useNativeDriver: true,
}),
]);
} else {
Expand All @@ -298,6 +283,7 @@ export class VirtualListCell<ItemInfo extends VirtualListCellInfo> extends RX.Co
duration: 200,
delay: animationDelay,
easing: RX.Animated.Easing.InOut(),
useNativeDriver: true,
});
}

Expand Down Expand Up @@ -346,7 +332,7 @@ export class VirtualListCell<ItemInfo extends VirtualListCellInfo> extends RX.Co

return (
<RX.Animated.View
style={ [_styles.cellView, overflow, this._animatedStylePosition, this._animatedStyleWidth] }
style={ [_styles.cellView, overflow, this._animatedStylePosition, this._staticStylePosition] }
ref={ this._ref }
tabIndex={ this.props.tabIndex }
onLayout={ this.props.onLayout ? this._onLayout : undefined }
Expand Down