WithReanimated#forwardRef

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilz5753/rnutils",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "React Native Utils",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -166,6 +166,7 @@
   "dependencies": {
     "cacache": "^18.0.1",
     "lodash": "^4.17.21",
-    "lru-cache": "^10.1.0"
+    "lru-cache": "^10.1.0",
+    "react-native-svg": "^14.1.0"
   }
 }

src/dynamicStyles/reanimated.tsx

@@ -1,5 +1,13 @@
 import { isEqual, isFunction } from 'lodash';
-import React, { Component, useEffect, type ComponentType } from 'react';
+import React, {
+  Component,
+  useEffect,
+  type ComponentType,
+  forwardRef,
+  type ForwardRefExoticComponent,
+  type PropsWithoutRef,
+  type RefAttributes,
+} from 'react';
 import {
   ActivityIndicator,
   FlatList,
@@ -24,6 +32,7 @@ import Animated, {
   useSharedValue,
   type DerivedValue,
   type SharedValue,
+  type AnimateProps,
 } from 'react-native-reanimated';
 export type CustomDimensionValue = number | `${number}%`;
 export type StrNum = string | number;
@@ -642,7 +651,9 @@ export function useDimensionSizesStyle({
 const $ = Animated.createAnimatedComponent;
 export function WithAnimated<T extends object>(
   Comp: ComponentType<T>
-): React.FC<Animated.AnimateProps<T>> {
+): ForwardRefExoticComponent<
+  PropsWithoutRef<Readonly<AnimateProps<T>>> & RefAttributes<T>
+> {
   class Class<T> extends Component<T> {
     render = () => {
       let C = Comp as any;
@@ -651,9 +662,9 @@ export function WithAnimated<T extends object>(
   }
   let _Component = isFunction(Comp) ? Class<T> : Comp;
   let Render = $(_Component) as any;
-  return (props: Readonly<Animated.AnimateProps<T>>) => (
-    <Render {...{ layout: Layout, ...props }} />
-  );
+  return forwardRef((props: Readonly<Animated.AnimateProps<T>>, ref) => (
+    <Render {...{ layout: Layout, ...props, ref }} />
+  ));
 }
 export const ReView = WithAnimated(View);
 export const ReScrollView = WithAnimated(ScrollView);

yarn.lock

@@ -2551,6 +2551,7 @@ __metadata:
     react-native: 0.72.6
     react-native-builder-bob: ^0.20.0
     react-native-reanimated: 3.3.0
+    react-native-svg: ^14.1.0
     release-it: ^15.0.0
     typescript: ^5.3.3
   peerDependencies:
@@ -6800,6 +6801,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"css-select@npm:^5.1.0":
+  version: 5.1.0
+  resolution: "css-select@npm:5.1.0"
+  dependencies:
+    boolbase: ^1.0.0
+    css-what: ^6.1.0
+    domhandler: ^5.0.2
+    domutils: ^3.0.1
+    nth-check: ^2.0.1
+  checksum: 2772c049b188d3b8a8159907192e926e11824aea525b8282981f72ba3f349cf9ecd523fdf7734875ee2cb772246c22117fc062da105b6d59afe8dcd5c99c9bda
+  languageName: node
+  linkType: hard
+
 "css-tree@npm:^1.1.2, css-tree@npm:^1.1.3":
   version: 1.1.3
   resolution: "css-tree@npm:1.1.3"
@@ -6810,7 +6824,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"css-what@npm:^6.0.1":
+"css-what@npm:^6.0.1, css-what@npm:^6.1.0":
   version: 6.1.0
   resolution: "css-what@npm:6.1.0"
   checksum: b975e547e1e90b79625918f84e67db5d33d896e6de846c9b584094e529f0c63e2ab85ee33b9daffd05bff3a146a1916bec664e18bb76dd5f66cbff9fc13b2bbe
@@ -7354,7 +7368,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"domelementtype@npm:^2.0.1, domelementtype@npm:^2.2.0":
+"dom-serializer@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "dom-serializer@npm:2.0.0"
+  dependencies:
+    domelementtype: ^2.3.0
+    domhandler: ^5.0.2
+    entities: ^4.2.0
+  checksum: cd1810544fd8cdfbd51fa2c0c1128ec3a13ba92f14e61b7650b5de421b88205fd2e3f0cc6ace82f13334114addb90ed1c2f23074a51770a8e9c1273acbc7f3e6
+  languageName: node
+  linkType: hard
+
+"domelementtype@npm:^2.0.1, domelementtype@npm:^2.2.0, domelementtype@npm:^2.3.0":
   version: 2.3.0
   resolution: "domelementtype@npm:2.3.0"
   checksum: ee837a318ff702622f383409d1f5b25dd1024b692ef64d3096ff702e26339f8e345820f29a68bcdcea8cfee3531776b3382651232fbeae95612d6f0a75efb4f6
@@ -7370,6 +7395,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"domhandler@npm:^5.0.2, domhandler@npm:^5.0.3":
+  version: 5.0.3
+  resolution: "domhandler@npm:5.0.3"
+  dependencies:
+    domelementtype: ^2.3.0
+  checksum: 0f58f4a6af63e6f3a4320aa446d28b5790a009018707bce2859dcb1d21144c7876482b5188395a188dfa974238c019e0a1e610d2fc269a12b2c192ea2b0b131c
+  languageName: node
+  linkType: hard
+
 "domutils@npm:^2.5.2, domutils@npm:^2.8.0":
   version: 2.8.0
   resolution: "domutils@npm:2.8.0"
@@ -7381,6 +7415,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"domutils@npm:^3.0.1":
+  version: 3.1.0
+  resolution: "domutils@npm:3.1.0"
+  dependencies:
+    dom-serializer: ^2.0.0
+    domelementtype: ^2.3.0
+    domhandler: ^5.0.3
+  checksum: e5757456ddd173caa411cfc02c2bb64133c65546d2c4081381a3bafc8a57411a41eed70494551aa58030be9e58574fcc489828bebd673863d39924fb4878f416
+  languageName: node
+  linkType: hard
+
 "dot-case@npm:^3.0.4":
   version: 3.0.4
   resolution: "dot-case@npm:3.0.4"
@@ -7514,6 +7559,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"entities@npm:^4.2.0":
+  version: 4.5.0
+  resolution: "entities@npm:4.5.0"
+  checksum: 853f8ebd5b425d350bffa97dd6958143179a5938352ccae092c62d1267c4e392a039be1bae7d51b6e4ffad25f51f9617531fedf5237f15df302ccfb452cbf2d7
+  languageName: node
+  linkType: hard
+
 "env-editor@npm:^0.4.1":
   version: 0.4.2
   resolution: "env-editor@npm:0.4.2"
@@ -14800,6 +14852,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-svg@npm:^14.1.0":
+  version: 14.1.0
+  resolution: "react-native-svg@npm:14.1.0"
+  dependencies:
+    css-select: ^5.1.0
+    css-tree: ^1.1.3
+  peerDependencies:
+    react: "*"
+    react-native: "*"
+  checksum: ed94adac9bf3144c5dcbf37a2956ab672d402f11c0ed75cda247d1d9136ce8977f4d01bcfc813ba576bd61ece420d66306c148057e2552828aa8fe9bad173d46
+  languageName: node
+  linkType: hard
+
 "react-native-web@npm:~0.19.6":
   version: 0.19.9
   resolution: "react-native-web@npm:0.19.9"