ForwardRef for H3

example/src/pages/MainScreen.tsx

@@ -9,7 +9,8 @@ import {
   ListItemNav,
   useIOExperimentalDesign,
   ListItemSwitch,
-  useIOThemeContext
+  useIOThemeContext,
+  H3
 } from "@pagopa/io-app-design-system";
 import APP_ROUTES from "../navigation/routes";
 import { AppParamsList } from "../navigation/params";
@@ -87,9 +88,16 @@ const MainScreen = (props: Props) => {
 
   const renderDSSectionFooter = () => <VSpacer size={24} />;
 
+  const mRef = React.useRef(null);
+  React.useEffect(() => {
+    // eslint-disable-next-line no-console
+    console.log(`=== MainScreen ref (${mRef}) current (${mRef.current})`);
+  }, []);
+
   return (
     <>
       <View style={IOStyles.horizontalContentPadding}>
+        <H3 ref={mRef}>{"Mio titolo"}</H3>
         <ListItemSwitch
           label="Abilita Design Sperimentale"
           value={isExperimental}

src/components/typography/BaseTypography.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from "react";
-import { StyleProp, Text, TextStyle } from "react-native";
+import { StyleProp, Text, TextStyle, View } from "react-native";
 import { IOColors } from "../../core/IOColors";
 import {
   IOFontFamily,
@@ -43,7 +43,10 @@ const calculateTextStyle = (
  * @param props
  * @constructor
  */
-export const BaseTypography: React.FC<OwnProps> = props => {
+export const BaseTypography: React.FC<OwnProps> = React.forwardRef<
+  View,
+  OwnProps
+>((props, ref) => {
   const fontStyle = useMemo(
     () =>
       calculateTextStyle(props.color, props.weight, props.isItalic, props.font),
@@ -54,8 +57,8 @@ export const BaseTypography: React.FC<OwnProps> = props => {
     : [props.fontStyle, fontStyle];
 
   return (
-    <Text allowFontScaling={false} {...props} style={style}>
+    <Text ref={ref} allowFontScaling={false} {...props} style={style}>
       {props.children}
     </Text>
   );
-};
+});

src/components/typography/Factory.tsx

@@ -1,4 +1,5 @@
 import React, { useMemo } from "react";
+import { View } from "react-native";
 import { IOColors } from "../../core";
 import { IOFontWeight } from "../../utils/fonts";
 import { XOR } from "../../utils/types";
@@ -74,7 +75,10 @@ function isDefaultFactoryProps<WeightPropsType, ColorsPropsType>(
 export function useTypographyFactory<
   WeightPropsType extends IOFontWeight,
   ColorsPropsType extends IOColors
->(props: FactoryProps<WeightPropsType, ColorsPropsType>) {
+>(
+  props: FactoryProps<WeightPropsType, ColorsPropsType>,
+  ref?: React.ForwardedRef<View>
+) {
   // Use different strategy to calculate the default values, based on DefaultProps
   const { weight, color } = useMemo(
     () =>
@@ -89,5 +93,5 @@ export function useTypographyFactory<
     [props]
   );
 
-  return <BaseTypography weight={weight} color={color} {...props} />;
+  return <BaseTypography weight={weight} color={color} ref={ref} {...props} />;
 }

src/components/typography/H3.tsx

@@ -1,3 +1,5 @@
+import React from "react";
+import { View } from "react-native";
 import { IOTheme, useIOExperimentalDesign } from "../../core";
 import { FontFamily, IOFontWeight } from "../../utils/fonts";
 import { useTypographyFactory } from "./Factory";
@@ -26,17 +28,20 @@ const legacyH3LineHeight = 34;
 /**
  * `H3` typographic style
  */
-export const H3 = (props: H3Props) => {
+export const H3 = React.forwardRef<View, H3Props>((props, ref) => {
   const { isExperimental } = useIOExperimentalDesign();
 
-  return useTypographyFactory<AllowedWeight, AllowedColors>({
-    ...props,
-    defaultWeight: isExperimental ? defaultWeight : legacyDefaultWeight,
-    defaultColor: isExperimental ? defaultColor : legacyDefaultColor,
-    font: isExperimental ? font : legacyFontName,
-    fontStyle: {
-      fontSize: isExperimental ? h3FontSize : legacyH3FontSize,
-      lineHeight: isExperimental ? h3LineHeight : legacyH3LineHeight
-    }
-  });
-};
+  return useTypographyFactory<AllowedWeight, AllowedColors>(
+    {
+      ...props,
+      defaultWeight: isExperimental ? defaultWeight : legacyDefaultWeight,
+      defaultColor: isExperimental ? defaultColor : legacyDefaultColor,
+      font: isExperimental ? font : legacyFontName,
+      fontStyle: {
+        fontSize: isExperimental ? h3FontSize : legacyH3FontSize,
+        lineHeight: isExperimental ? h3LineHeight : legacyH3LineHeight
+      }
+    },
+    ref
+  );
+});