Fonts Plugin

The font plugin, a utility for the styled function, provides a unified way to pass font families to your styles. It lets you specify a styled object with fontFamily, fontWeight, and fontStyle properties.

Usage:

Include the FontResolver plugin in your config. To customize font resolution, pass a mapFonts callback function to the constructor.
import { FontResolver } from '@gluestack-style/react';
export const config = {
aliases: {},
tokens: {},
plugins: [new FontResolver()],
};
Below is an example of an original styled object that will be processed by mapFonts
{
fontFamily: 'Nunito Sans',
fontWeight: 800,
fontStyle: 'italic',
}
The mapFonts function is responsible for merging font styles in a unified format, based on the specified strategy. The strategy is determined by the STYLE_FONT_RESOLVER_STRATEGY environment variable, which can be set to either expo or web.
If the strategy is set to 'expo', the function will adhere to the 'expo-google-fonts' naming convention. This involves removing any spaces from the fontFamily property, concatenating the fontWeight property with the corresponding weight name (e.g., '800ExtraBold'), and capitalizing the first letter of the fontStyle property.If the strategy is set to 'web', the function will adhere to a web naming convention. In either case, the mapFonts function will merge the font styles into a unified format that can be used by the application.
Below is an example of a resolved fonts object
{
fontFamily: 'NunitoSans_800ExtraBold_Italic',
}

Example:

function App() {
const StyledText = styled(Text, {
fontFamily: "Nunito Sans",
fontWeight: 800,
fontStyle: "italic",
fontSize: "$xl",
color: "$black",
_dark: {
color: "$white",
},
})
return (
<Provider config={config}>
<StyledText>Hello world</StyledText>
</Provider>
)
}

mapFonts:

To use a different naming convention for your fonts, provide a custom mapFonts function to the font plugin constructor and pass it inside the config.
const CustomFontResolver = new FontResolver({
mapFonts: (style) => {
if (Platform.OS !== 'web') {
style.fontFamily =
style.fontFamily + '-' + style.fontWeight + '-' + style.fontStyle;
style.fontWeight = undefined;
style.fontStyle = undefined;
}
},
}),
export const config = {
aliases: {},
tokens: {},
plugins: [CustomFontResolver],
};
Edit this page on GitHub