Could you try to change your component to this:
import React from 'react'
import type { AvatarProps, DimensionsType } from '../shared/types';
const Avatar: React.FC<AvatarProps> = ({
userName,
userLastName,
userImg,
onPress,
backgroundColorAvatar,
editMode,
onPressEdit,
editButtonIcon,
backgroundColorEditButton,
textStyle,
}) => {
return <>
{/* Here your component implementation */}
</>;
};
that's a way to describe the types of a functional component at least is more clean and descriptive. Please notice React.FC<YourType> allows you to extend all the common props a functional component has, plus all YourType fields. This allows you to render children's components like this:
import React from 'react';
import { Text } from 'react-native';
// Yous an example type
export interface AvatarProps {
userName: string;
userLastName: string;
}
/**
* A children component that doesn't render nothing but you can implement
* whatever you want here
*/
const MyChildrenComponent = () => {
return <></>;
};
const Avatar: React.FC<AvatarProps> = ({ userName, userLastName, children }) => {
return (
<>
{children}
<Text>{userName + ' ' + userLastName}</Text>
{/* Here the rest of your component implementation */}
</>
);
};
const SomeParentComponent = () => {
return (
<Avatar userName="Something" userLastName="">
{/* Notice here I can insert my own component as a children of Avatar component */}
<MyChildrenComponent />
</Avatar>
);
};
this approach has several cons (you can read more about it here) because basically you are typing the function and not his arguments (props) and the children argument is always implied even if you use it or not.
UPDATE: As mentioned in the comments React.FC isn't needed actually you can implement your component without using it like this:
const Avatar: (props: AvatarProps) => JSX.Element = ({
userName,
userLastName,
userImg,
onPress,
backgroundColorAvatar,
editMode,
onPressEdit,
editButtonIcon,
backgroundColorEditButton,
textStyle,
}) => {
return <>{/* Here your component implementation */}</>;
};
where JSX.Element is the return value of your component in this case (there are also different types you can use to type the return of a functional component, this is just an example)
