123 lines
3.1 KiB
JavaScript
123 lines
3.1 KiB
JavaScript
/**
|
|
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @flow strict-local
|
|
* @format
|
|
*/
|
|
|
|
import type {AnimatedPropsAllowlist} from './nodes/AnimatedProps';
|
|
|
|
import * as ReactNativeFeatureFlags from '../../src/private/featureflags/ReactNativeFeatureFlags';
|
|
|
|
/**
|
|
* Styles allowed by the native animated implementation.
|
|
*
|
|
* In general native animated implementation should support any numeric or color property that
|
|
* doesn't need to be updated through the shadow view hierarchy (all non-layout properties).
|
|
*/
|
|
const SUPPORTED_COLOR_STYLES: {[string]: true} = {
|
|
backgroundColor: true,
|
|
borderBottomColor: true,
|
|
borderColor: true,
|
|
borderEndColor: true,
|
|
borderLeftColor: true,
|
|
borderRightColor: true,
|
|
borderStartColor: true,
|
|
borderTopColor: true,
|
|
color: true,
|
|
tintColor: true,
|
|
};
|
|
|
|
const SUPPORTED_STYLES: {[string]: true} = {
|
|
...SUPPORTED_COLOR_STYLES,
|
|
borderBottomEndRadius: true,
|
|
borderBottomLeftRadius: true,
|
|
borderBottomRightRadius: true,
|
|
borderBottomStartRadius: true,
|
|
borderEndEndRadius: true,
|
|
borderEndStartRadius: true,
|
|
borderRadius: true,
|
|
borderTopEndRadius: true,
|
|
borderTopLeftRadius: true,
|
|
borderTopRightRadius: true,
|
|
borderTopStartRadius: true,
|
|
borderStartEndRadius: true,
|
|
borderStartStartRadius: true,
|
|
elevation: true,
|
|
opacity: true,
|
|
transform: true,
|
|
zIndex: true,
|
|
/* ios styles */
|
|
shadowOpacity: true,
|
|
shadowRadius: true,
|
|
/* legacy android transform properties */
|
|
scaleX: true,
|
|
scaleY: true,
|
|
translateX: true,
|
|
translateY: true,
|
|
};
|
|
|
|
const SUPPORTED_TRANSFORMS: {[string]: true} = {
|
|
translateX: true,
|
|
translateY: true,
|
|
scale: true,
|
|
scaleX: true,
|
|
scaleY: true,
|
|
rotate: true,
|
|
rotateX: true,
|
|
rotateY: true,
|
|
rotateZ: true,
|
|
perspective: true,
|
|
skewX: true,
|
|
skewY: true,
|
|
...(ReactNativeFeatureFlags.shouldUseAnimatedObjectForTransform()
|
|
? {matrix: true}
|
|
: {}),
|
|
};
|
|
|
|
const SUPPORTED_INTERPOLATION_PARAMS: {[string]: true} = {
|
|
inputRange: true,
|
|
outputRange: true,
|
|
extrapolate: true,
|
|
extrapolateRight: true,
|
|
extrapolateLeft: true,
|
|
};
|
|
|
|
/**
|
|
* Default allowlist for component props that support native animated values.
|
|
*/
|
|
export default {
|
|
style: SUPPORTED_STYLES,
|
|
} as AnimatedPropsAllowlist;
|
|
|
|
export function allowInterpolationParam(param: string): void {
|
|
SUPPORTED_INTERPOLATION_PARAMS[param] = true;
|
|
}
|
|
|
|
export function allowStyleProp(prop: string): void {
|
|
SUPPORTED_STYLES[prop] = true;
|
|
}
|
|
|
|
export function allowTransformProp(prop: string): void {
|
|
SUPPORTED_TRANSFORMS[prop] = true;
|
|
}
|
|
|
|
export function isSupportedColorStyleProp(prop: string): boolean {
|
|
return SUPPORTED_COLOR_STYLES.hasOwnProperty(prop);
|
|
}
|
|
|
|
export function isSupportedInterpolationParam(param: string): boolean {
|
|
return SUPPORTED_INTERPOLATION_PARAMS.hasOwnProperty(param);
|
|
}
|
|
|
|
export function isSupportedStyleProp(prop: string): boolean {
|
|
return SUPPORTED_STYLES.hasOwnProperty(prop);
|
|
}
|
|
|
|
export function isSupportedTransformProp(prop: string): boolean {
|
|
return SUPPORTED_TRANSFORMS.hasOwnProperty(prop);
|
|
}
|