Facebook/react-native
1
0
Fork 0
mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update createAnimatedComponent type to be correctly translatable to TypeScript (#49881)

Browse Source 
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/49881

Changelog: [Internal]

Reviewed By: huntie

Differential Revision: D70707147

fbshipit-source-id: 84c4f866646ba30cdea43f3d6c2e9d8836d41738
This commit is contained in:
Jakub Piasecki
2025-03-07 04:24:45 -08:00
committed by Facebook GitHub Bot
parent 01881017d3
commit 1174cff2c2
2 changed files with 34 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react-native/Libraries/Animated/createAnimatedComponent.js
Vendored
+24 -12
View File
@@ -36,7 +36,7 @@ export type StrictAnimatedProps<Props: {...}> = $ReadOnly<{
}>;
export type AnimatedComponentType<Props: {...}, +Instance = mixed> = component(
ref: React.RefSetter<Instance>,
ref?: React.RefSetter<Instance>,
...AnimatedProps<Props>
);
@@ -45,29 +45,41 @@ export type StrictAnimatedComponentType<
+Instance = mixed,
> = component(ref: React.RefSetter<Instance>, ...StrictAnimatedProps<Props>);
export default function createAnimatedComponent<TProps: {...}, TInstance>(
Component: component(ref: React.RefSetter<TInstance>, ...TProps),
): AnimatedComponentType<TProps, TInstance> {
export default function createAnimatedComponent<
TInstance: React.ComponentType<any>,
>(
Component: TInstance,
): AnimatedComponentType<
$ReadOnly<React.ElementProps<TInstance>>,
React.ElementRef<TInstance>,
> {
return unstable_createAnimatedComponentWithAllowlist(Component, null);
}
export function unstable_createAnimatedComponentWithAllowlist<
TProps: {...},
TInstance,
TInstance: React.ComponentType<TProps>,
>(
Component: component(ref: React.RefSetter<TInstance>, ...TProps),
Component: TInstance,
allowlist: ?AnimatedPropsAllowlist,
): StrictAnimatedComponentType<TProps, TInstance> {
): StrictAnimatedComponentType<TProps, React.ElementRef<TInstance>> {
const useAnimatedProps = createAnimatedPropsHook(allowlist);
const AnimatedComponent = React.forwardRef<
const AnimatedComponent: StrictAnimatedComponentType<
TProps,
React.ElementRef<TInstance>,
> = React.forwardRef<
StrictAnimatedProps<TProps>,
TInstance,
React.ElementRef<TInstance>,
>((props, forwardedRef) => {
const [reducedProps, callbackRef] = useAnimatedProps<TProps, TInstance>(
props,
const [reducedProps, callbackRef] = useAnimatedProps<
TProps,
React.ElementRef<TInstance>,
>(props);
const ref = useMergeRefs<React.ElementRef<TInstance>>(
callbackRef,
forwardedRef,
);
const ref = useMergeRefs<TInstance>(callbackRef, forwardedRef);
// Some components require explicit passthrough values for animation
// to work properly. For example, if an animated component is
packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap
+10 -8
View File
@@ -648,24 +648,26 @@ export type StrictAnimatedProps<Props: { ... }> = $ReadOnly<{
export type AnimatedComponentType<
Props: { ... },
+Instance = mixed,
> = component(ref: React.RefSetter<Instance>, ...AnimatedProps<Props>);
> = component(ref?: React.RefSetter<Instance>, ...AnimatedProps<Props>);
export type StrictAnimatedComponentType<
Props: { ... },
+Instance = mixed,
> = component(ref: React.RefSetter<Instance>, ...StrictAnimatedProps<Props>);
declare export default function createAnimatedComponent<
TProps: { ... },
TInstance,
TInstance: React.ComponentType<any>,
>(
Component: component(ref: React.RefSetter<TInstance>, ...TProps)
): AnimatedComponentType<TProps, TInstance>;
Component: TInstance
): AnimatedComponentType<
$ReadOnly<React.ElementProps<TInstance>>,
React.ElementRef<TInstance>,
>;
declare export function unstable_createAnimatedComponentWithAllowlist<
TProps: { ... },
TInstance,
TInstance: React.ComponentType<TProps>,
>(
Component: component(ref: React.RefSetter<TInstance>, ...TProps),
Component: TInstance,
allowlist: ?AnimatedPropsAllowlist
): StrictAnimatedComponentType<TProps, TInstance>;
): StrictAnimatedComponentType<TProps, React.ElementRef<TInstance>>;
"
`;