I've been trying to implement the following custom Text component in React Native.
import React from 'react';import { Text as RNText, TextStyle } from 'react-native';export interface TextProps { children: React.ReactNode; type?: 'title' | 'large' | 'medium' | 'small'; weight?: 'thin' | 'light' | 'regular' | 'bold'; color?: string; style?: TextStyle;};const Text = ({ children, type, weight, color, style = {}}: TextProps) => { const fontSize = () => { switch (type) { case 'title': return 24; case 'large': return 28; case 'medium': return 18; case 'small': return 14; default: return 16; } }; const fontFamily = () => { switch (weight) { case 'thin': return 'Lato-Thin'; case 'light': return 'Lato-Light'; case 'regular': return 'Lato-Regular'; case 'bold': return 'Lato-Bold'; default: return 'Lato-Regular'; } }; return (<RNText style={{ fontFamily, fontWeight, color: color || '#fff', {...style} }}> {children}</RNText> );};export default Text;However, I have an error on <RNText> : "Type {} is missing the following properties from type 'Text': measure, measureInWindow, measureLayout, setNativeProps and 9 more"
If i remove the style props of the <RNText> component, I've got another error in VSCode: "Conversion of type {children: React.ReactNode} to type Text may be a mistake because neither type sufficiently overlaps with the other. If it was intentional, convert the expression to unknown first"
Seems like I would have the set the wrong type for the children props ?
Thanks in advance !