I have this AppText component where I want to use a Props interface while having the ability to accept other props fields that I can consume with a spread operator. Here is my attempt below.
AppText:
import React from "react";
import { View, Text } from "react-native";
import { colors } from "../utils/config";
interface Props {
fontSize?: number;
color?: string;
}
const AppText: React.FC<Props> = ({
children,
fontSize = 16,
color = colors.black,
...restProps
}) => {
return (
<Text {...restProps} style={{ color: color, fontSize: fontSize }}>
{children}
</Text>
);
};
export default AppText;
How I am using my component:
<AppText accessible>Not member yet ? </AppText>
The error I am getting:
Type '{ children: string; accessible: true; }' is not assignable to type 'IntrinsicAttributes & Props & { children?: ReactNode; }'.Property 'accessible' does not exist on type 'IntrinsicAttributes & Props & { children?: ReactNode; }'
You should be able to redefine Props, I assume TextProps can be imported from react-native, like so:
interface Props extends TextProps {
fontSize?: number;
color?: string;
}
This adds TextProps to your properties, the spread operator should understand what elements are left over.