chore: wrap List.Item in forwardRef (#4233)

Author: DimitarNestorov

src/components/List/ListItem.tsx

@@ -15,6 +15,7 @@ import color from 'color';
 import { Style, getLeftStyles, getRightStyles } from './utils';
 import { useInternalTheme } from '../../core/theming';
 import type { $RemoveChildren, EllipsizeProp, ThemeProp } from '../../types';
+import { forwardRef } from '../../utils/forwardRef';
 import TouchableRipple from '../TouchableRipple/TouchableRipple';
 import Text from '../Typography/Text';
 
@@ -126,24 +127,27 @@ export type Props = $RemoveChildren<typeof TouchableRipple> & {
  *
  * @extends TouchableRipple props https://callstack.github.io/react-native-paper/docs/components/TouchableRipple
  */
-const ListItem = ({
-  left,
-  right,
-  title,
-  description,
-  onPress,
-  theme: themeOverrides,
-  style,
-  titleStyle,
-  titleNumberOfLines = 1,
-  descriptionNumberOfLines = 2,
-  titleEllipsizeMode,
-  descriptionEllipsizeMode,
-  descriptionStyle,
-  descriptionMaxFontSizeMultiplier,
-  titleMaxFontSizeMultiplier,
-  ...rest
-}: Props) => {
+const ListItem = (
+  {
+    left,
+    right,
+    title,
+    description,
+    onPress,
+    theme: themeOverrides,
+    style,
+    titleStyle,
+    titleNumberOfLines = 1,
+    descriptionNumberOfLines = 2,
+    titleEllipsizeMode,
+    descriptionEllipsizeMode,
+    descriptionStyle,
+    descriptionMaxFontSizeMultiplier,
+    titleMaxFontSizeMultiplier,
+    ...rest
+  }: Props,
+  ref: React.ForwardedRef<View>
+) => {
   const theme = useInternalTheme(themeOverrides);
   const [alignToTop, setAlignToTop] = React.useState(false);
 
@@ -218,6 +222,7 @@ const ListItem = ({
   return (
     <TouchableRipple
       {...rest}
+      ref={ref}
       style={[theme.isV3 ? styles.containerV3 : styles.container, style]}
       onPress={onPress}
       theme={theme}
@@ -249,7 +254,8 @@ const ListItem = ({
   );
 };
 
-ListItem.displayName = 'List.Item';
+const Component = forwardRef(ListItem);
+Component.displayName = 'List.Item';
 
 const styles = StyleSheet.create({
   container: {
@@ -288,4 +294,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default ListItem;
+export default Component;