In order to follow an another answer about fontWeight management with custom font, I end up with the following custom Text
component:
import React from "react";import { Text as BaseText, StyleSheet, TextProperties } from "react-native";import Colors from "../constants/Colors";interface Props extends TextProperties { children: any}const styles = StyleSheet.create({ color: { color: Colors.secondary, }, normal: { fontFamily: 'Lato-Regular', }, bold: { fontFamily: 'Lato-Bold', },});const Text = ({ children, style, ...rest }: Props) => { let baseFontStyle = styles.normal; if (style) { baseFontStyle = style.fontWeight === 'bold' ? styles.bold : styles.normal; delete style.fontWeight; } return (<BaseText style={[baseFontStyle, styles.color, style]} {...rest}> {children}</BaseText> );};export default Text;
This code works, but the style.fontWeight property is not recognize by the typescript interpreter integrated to vs-code:
Property 'fontWeight' does not exist on type 'TextStyle | RegisteredStyle<TextStyle> | RecursiveArray<false | TextStyle | RegisteredStyle<TextStyle>>'.Property 'fontWeight' does not exist on type 'RegisteredStyle<TextStyle>'.ts(2339)
But my Props
interface does extend TextProperties
.
How to deal with this?