Have you considered updating your component to this structure?
import React from 'react'
import type { AvatarProps, DimensionsType } from '../shared/types';
const Avatar: (props: AvatarProps) => JSX.Element = ({
userName,
userLastName,
userImg,
onPress,
backgroundColorAvatar,
editMode,
onPressEdit,
editButtonIcon,
backgroundColorEditButton,
textStyle,
}) => {
return <>
{/* Your component goes here */}
</>;
};
This method provides a clearer and more descriptive way of defining the types for a functional component. Using
(props: AvatarProps) => JSX.Element
allows you to include all standard props along with any additional fields specified in
AvatarProps. This enables you to incorporate child components as shown below:
import React from 'react';
import { Text } from 'react-native';
export interface AvatarProps {
userName: string;
userLastName: string;
}
const MyChildrenComponent = () => {
return <></>;
};
const Avatar: (props: AvatarProps) => JSX.Element = ({ userName, userLastName, children }) => {
return (
<>
{children}
<Text>{userName + ' ' + userLastName}</Text>
{/* Include the remaining component implementation here */}
</>
);
};
const SomeParentComponent = () => {
return (
<Avatar userName="Something" userLastName="">
<MyChildrenComponent />
</Avatar>
);
};
While this approach has its drawbacks, such as not explicitly typing the function arguments (props) and the implicit nature of the children argument, it offers a structured way to define functional components. For more details, refer tothis article.
UPDATE: It's worth noting that React.FC is not necessary. You can define your component without using it like so:
const Avatar: (props: AvatarProps) => JSX.Element = ({
userName,
userLastName,
userImg,
onPress,
backgroundColorAvatar,
editMode,
onPressEdit,
editButtonIcon,
backgroundColorEditButton,
textStyle,
}) => {
return <>{/* Your component implementation */}</>;
};
In this example, JSX.Element represents the return type of the component, but there are other options available for specifying the return type of a functional component.