Text
The text component can be used to draw a simple text. Please note that the y origin of the Text is the bottom of the text, not the top.
Name | Type | Description |
---|---|---|
text | string | Text to draw |
font | SkFont | Font to use |
x | number | Left position of the text (default is 0) |
y | number | Bottom position the text (default is 0, the ) |
Simple Text
tsx
import {Canvas ,Text ,useFont ,Fill } from "@shopify/react-native-skia";export constHelloWorld = () => {constfontSize = 32;constfont =useFont (require ("./my-font.ttf"),fontSize );return (<Canvas style ={{flex : 1 }}><Fill color ="white" /><Text x ={0}y ={fontSize }text ="Hello World"font ={font }/></Canvas >);};
tsx
import {Canvas ,Text ,useFont ,Fill } from "@shopify/react-native-skia";export constHelloWorld = () => {constfontSize = 32;constfont =useFont (require ("./my-font.ttf"),fontSize );return (<Canvas style ={{flex : 1 }}><Fill color ="white" /><Text x ={0}y ={fontSize }text ="Hello World"font ={font }/></Canvas >);};
Fonts
Once the fonts are loaded, we provide a matchFont
function that given a font style will return a font object that you can use directly.
tsx
import {useFonts ,Text ,matchFont } from "@shopify/react-native-skia";constDemo = () => {constfontMgr =useFonts ({Roboto : [require ("./Roboto-Medium.ttf"),require ("./Roboto-Regular.ttf"),require ("./Roboto-Bold.ttf"),]});if (!fontMgr ) {return null;}constfontStyle = {fontFamily : "Roboto",fontWeight : "bold",fontSize : 16} asconst ;constfont =matchFont (fontStyle ,fontMgr );return (<Text text ="Hello World"y ={32}x ={32}font ={font } />);};
tsx
import {useFonts ,Text ,matchFont } from "@shopify/react-native-skia";constDemo = () => {constfontMgr =useFonts ({Roboto : [require ("./Roboto-Medium.ttf"),require ("./Roboto-Regular.ttf"),require ("./Roboto-Bold.ttf"),]});if (!fontMgr ) {return null;}constfontStyle = {fontFamily : "Roboto",fontWeight : "bold",fontSize : 16} asconst ;constfont =matchFont (fontStyle ,fontMgr );return (<Text text ="Hello World"y ={32}x ={32}font ={font } />);};
System Fonts
System fonts are available via Skia.FontMgr.System()
.
You can list system fonts via listFontFamilies
function returns the list of available system font families.
By default the function will list system fonts but you can pass an optional fontMgr
object as parameter.
jsx
import {listFontFamilies } from "@shopify/react-native-skia";console .log (listFontFamilies ());
jsx
import {listFontFamilies } from "@shopify/react-native-skia";console .log (listFontFamilies ());
Output example on Android:
["sans-serif", "arial", "helvetica", "tahoma", "verdana", ...]
["sans-serif", "arial", "helvetica", "tahoma", "verdana", ...]
or on iOS:
["Academy Engraved LET", "Al Nile", "American Typewriter", "Apple Color Emoji", ...]
["Academy Engraved LET", "Al Nile", "American Typewriter", "Apple Color Emoji", ...]
By default matchFont, will match fonts from the system font manager:
jsx
import {Platform } from "react-native";import {Canvas ,Text ,matchFont ,Fill ,Skia } from "@shopify/react-native-skia";constfontFamily =Platform .select ({ios : "Helvetica",default : "serif" });constfontStyle = {fontFamily ,fontSize : 14,fontStyle : "italic",fontWeight : "bold",};constfont =matchFont (fontStyle );export constHelloWorld = () => {return (<Canvas style ={{flex : 1 }}><Fill color ="white" /><Text x ={0}y ={fontStyle .fontSize }text ="Hello World"font ={font }/></Canvas >);};
jsx
import {Platform } from "react-native";import {Canvas ,Text ,matchFont ,Fill ,Skia } from "@shopify/react-native-skia";constfontFamily =Platform .select ({ios : "Helvetica",default : "serif" });constfontStyle = {fontFamily ,fontSize : 14,fontStyle : "italic",fontWeight : "bold",};constfont =matchFont (fontStyle );export constHelloWorld = () => {return (<Canvas style ={{flex : 1 }}><Fill color ="white" /><Text x ={0}y ={fontStyle .fontSize }text ="Hello World"font ={font }/></Canvas >);};
The fontStyle
object can have the following list of optional attributes:
fontFamily
: The name of the font family.fontSize
: The size of the font.fontStyle
: The slant of the font. Can benormal
,italic
, oroblique
.fontWeight
: The weight of the font. Can benormal
,bold
, or any of100
,200
,300
,400
,500
,600
,700
,800
,900
.
By default, matchFont
uses the system font manager to match the font style. However, if you want to use your custom font manager, you can pass it as the second parameter to the matchFont
function:
jsx
import {matchFont ,useFonts } from "@shopify/react-native-skia";constfontMgr =useFonts ({Roboto : [require ("../../Tests/assets/Roboto-Medium.ttf"),require ("../../Tests/assets/Roboto-Bold.ttf"),]});constfont =matchFont (fontStyle ,fontMgr );
jsx
import {matchFont ,useFonts } from "@shopify/react-native-skia";constfontMgr =useFonts ({Roboto : [require ("../../Tests/assets/Roboto-Medium.ttf"),require ("../../Tests/assets/Roboto-Bold.ttf"),]});constfont =matchFont (fontStyle ,fontMgr );
Low-level API
The basic usage of the system font manager is as follows.
These are the APIs used behind the scene by the matchFont
function.
tsx
import {Platform } from "react-native";import {Skia ,FontStyle } from "@shopify/react-native-skia";constfamilyName =Platform .select ({ios : "Helvetica",default : "serif" });constfontSize = 32;// Get the system font managerconstfontMgr =Skia .FontMgr .System ();// The custom font manager is available via Skia.TypefaceFontProvider.Make()constcustomFontMgr =Skia .TypefaceFontProvider .Make ();// typeface needs to be loaded via Skia.Data and instanciated via// Skia.Typeface.MakeFreeTypeFaceFromData()// customFontMgr.registerTypeface(customTypeFace, "Roboto");// Matching a fontconsttypeface =fontMgr .matchFamilyStyle (familyName ,FontStyle .Bold );constfont =Skia .Font (typeface ,fontSize );
tsx
import {Platform } from "react-native";import {Skia ,FontStyle } from "@shopify/react-native-skia";constfamilyName =Platform .select ({ios : "Helvetica",default : "serif" });constfontSize = 32;// Get the system font managerconstfontMgr =Skia .FontMgr .System ();// The custom font manager is available via Skia.TypefaceFontProvider.Make()constcustomFontMgr =Skia .TypefaceFontProvider .Make ();// typeface needs to be loaded via Skia.Data and instanciated via// Skia.Typeface.MakeFreeTypeFaceFromData()// customFontMgr.registerTypeface(customTypeFace, "Roboto");// Matching a fontconsttypeface =fontMgr .matchFamilyStyle (familyName ,FontStyle .Bold );constfont =Skia .Font (typeface ,fontSize );