Enable animating skew in transforms with native driver (#36933)
Summary: Pull Request resolved: https://github.com/facebook/react-native/pull/36933 Skew is already supported on the platform side; there's no reason to disable animating it. Changelog: [General][Added] - Enable animating skew in transforms with native driver Reviewed By: mdvacca Differential Revision: D45053914 fbshipit-source-id: 31198c35eeb55211a3ff88c968707db65b025f49
This commit is contained in:
Родитель
e2e59c4d0e
Коммит
645b643f68
|
@ -425,6 +425,8 @@ const SUPPORTED_TRANSFORMS = {
|
|||
rotateY: true,
|
||||
rotateZ: true,
|
||||
perspective: true,
|
||||
skewX: true,
|
||||
skewY: true,
|
||||
matrix: ReactNativeFeatureFlags.shouldUseAnimatedObjectForTransform(),
|
||||
};
|
||||
|
||||
|
|
|
@ -44,8 +44,8 @@ export type ____TransformStyle_Internal = $ReadOnly<{|
|
|||
| [number | AnimatedNode, number | AnimatedNode]
|
||||
| AnimatedNode,
|
||||
|}
|
||||
| {|+skewX: string|}
|
||||
| {|+skewY: string|}
|
||||
| {|+skewX: string | AnimatedNode|}
|
||||
| {|+skewY: string | AnimatedNode|}
|
||||
// TODO: what is the actual type it expects?
|
||||
| {|
|
||||
+matrix: $ReadOnlyArray<number | AnimatedNode> | AnimatedNode,
|
||||
|
|
|
@ -74,10 +74,6 @@ function AnimatedView({
|
|||
);
|
||||
}
|
||||
|
||||
function notSupportedByNativeDriver(property: string) {
|
||||
return property === 'skewX' || property === 'skewY';
|
||||
}
|
||||
|
||||
function AnimatedTransformStyleExample(): React.Node {
|
||||
const [properties, setProperties] = React.useState(transformProperties);
|
||||
const [useNativeDriver, setUseNativeDriver] = React.useState(false);
|
||||
|
@ -109,9 +105,6 @@ function AnimatedTransformStyleExample(): React.Node {
|
|||
key={property}
|
||||
label={property}
|
||||
multiSelect
|
||||
disabled={
|
||||
notSupportedByNativeDriver(property) && useNativeDriver
|
||||
}
|
||||
selected={properties[property].selected}
|
||||
onPress={() => {
|
||||
onToggle(property);
|
||||
|
@ -127,9 +120,7 @@ function AnimatedTransformStyleExample(): React.Node {
|
|||
useNativeDriver={useNativeDriver}
|
||||
// $FlowFixMe[incompatible-call]
|
||||
properties={Object.keys(properties).filter(
|
||||
property =>
|
||||
properties[property].selected &&
|
||||
!(useNativeDriver && notSupportedByNativeDriver(property)),
|
||||
property => properties[property].selected,
|
||||
)}
|
||||
/>
|
||||
</View>
|
||||
|
@ -163,7 +154,6 @@ const styles = StyleSheet.create({
|
|||
export default ({
|
||||
title: 'Transform Styles',
|
||||
name: 'transformStyles',
|
||||
description:
|
||||
'Variations of transform styles. `skewX` and `skewY` are not supported on native driver.',
|
||||
description: 'Variations of transform styles.',
|
||||
render: () => <AnimatedTransformStyleExample />,
|
||||
}: RNTesterModuleExample);
|
||||
|
|
Загрузка…
Ссылка в новой задаче