I have a custom Text component which takes a custom style prop which is used to set the fontFamily
by a loaded custom font. The purpose is to make sure the text font is only one of the loaded fonts.
However, since the custom style prop is not included in NamedStyles, i.e. ViewStyle | TextStyle | ImageStyle, the font
style is considered a string, so it needs the as const
assertion, unlike a NamedStyle like justifyContent
which has a type literal set by its value, and throws a type error if passed a string that is not included in its union type.
Is it possible to include custom style props in a style sheet, so it knows to treat font
as type 'bold' | 'regular'
instead of type string
?
Code context below:
import { StyleSheet } from 'react-native';export const s = StyleSheet.create({ ..., text: { ..., font: 'bold' as const, // Type error without const assertion },});
import type { ..., TextStyle as BaseTextStyle } from 'react-native';...export interface TextStyle extends Omit<BaseTextStyle, 'fontFamily' | 'fontWeight'> { font?: 'bold' | 'regular';}