Docs: ForwardRef convention

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>();