Issue
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
. But I'm getting this error:
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; }'
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 it:
<AppText accessible>Not a member yet ?</AppText>
Solution
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.
Answered By - Todd
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.