Merge branch 'main' of https://github.com/rezkiy37/Expensify into fea…

…ture/24464-editing-category-money-request

contributingGuides/STYLE.md

@@ -491,6 +491,19 @@ When writing a function component you must ALWAYS add a `displayName` property a
     export default Avatar;
 ```
 
+## Forwarding refs
+
+When forwarding a ref define named component and pass it directly to the `forwardRef`. By doing this we remove potential extra layer in React tree in form of anonymous component.
+
+```javascript
+    function FancyInput(props, ref) {
+        ...
+        return <input {...props} ref={ref} />
+    }
+
+    export default React.forwardRef(FancyInput)
+```
+
 ## Stateless components vs Pure Components vs Class based components vs Render Props - When to use what?
 
 Class components are DEPRECATED. Use function components and React hooks.

contributingGuides/TS_CHEATSHEET.md

@@ -43,24 +43,28 @@
 - [1.2](#forwardRef) **`forwardRef`**
 
   ```ts
-  import { forwardRef, useRef, ReactNode } from "react";
+  // CustomTextInput.tsx
+
+  import { forwardRef, useRef, ReactNode, ForwardedRef } from "react";
   import { TextInput, View } from "react-native";
 
   export type CustomTextInputProps = {
     label: string;
     children?: ReactNode;
   };
 
-  const CustomTextInput = forwardRef<TextInput, CustomTextInputProps>(
-    (props, ref) => {
-      return (
-        <View>
-          <TextInput ref={ref} />
-          {props.children}
-        </View>
-      );
-    }
-  );
+  function CustomTextInput(props: CustomTextInputProps, ref: ForwardedRef<TextInput>) {
+    return (
+      <View>
+        <TextInput ref={ref} />
+        {props.children}
+      </View>
+    );
+  };
+
+  export default forwardRef(CustomTextInput);
+
+  // ParentComponent.tsx
 
   function ParentComponent() {
     const ref = useRef<TextInput>();