[SOLVED] React, spread operator while using a TypeScript props interface

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. 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; }'

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

Answer Checked By – Mary Flores (BugsFixing Volunteer)