Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6290

Possible to create React Native Stylesheet with custom style props?

$
0
0

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

Viewing all articles
Browse latest Browse all 6290

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>