Setup
#
Setting up the theme providerFor Pearl UI to work correctly, you need to wrap your application with the ThemeProvider
provided by the library.
Go to the root of your app and do the following:
App.tsx
import * as React from 'react';
// Import the ThemeProvider componentimport { ThemeProvider } from 'pearl-ui'
const App = () => { return ( // Wrap your app components with the ThemeProvider <ThemeProvider> // {... other components go here} </ThemeProvider> );}
#
ThemeProvider PropsName | Required | Type | Default | Description |
---|---|---|---|---|
initialColorMode | false | "light" | Initial color mode for the app. | |
theme | false | baseTheme | The theme configuration object. | |
haveFontsLoaded | false | true | A flag that describes the loading status of the custom fonts. |
#
Loading default fontsPearl UI uses Poppins as the font family in the default theme (For more information, check out the Default Theme section).
To include the font family into the app, we use the @expo/google-fonts package:
expo install @expo-google-fonts/poppins expo-font
The font family can then be loaded in the following manner:
App.tsx
// Import the useFonts hook and the default fonts usedimport { useFonts, Poppins_300Light, Poppins_400Regular, Poppins_500Medium, Poppins_600SemiBold, Poppins_700Bold, Poppins_800ExtraBold, Poppins_300Light_Italic, Poppins_700Bold_Italic, Poppins_200ExtraLight, Poppins_100Thin_Italic, Poppins_100Thin, Poppins_400Regular_Italic, Poppins_500Medium_Italic, Poppins_600SemiBold_Italic, Poppins_800ExtraBold_Italic, Poppins_900Black, Poppins_900Black_Italic, Poppins_200ExtraLight_Italic,} from "@expo-google-fonts/poppins";
const App = () => { // Load the fonts using the hook and get the loading flag const [haveFontsLoaded] = useFonts({ "Poppins-Hairline": Poppins_100Thin, "Poppins-HairlineItalic": Poppins_100Thin_Italic, "Poppins-Thin": Poppins_200ExtraLight, "Poppins-ThinItalic": Poppins_200ExtraLight_Italic, "Poppins-Light": Poppins_300Light, "Poppins-LightItalic": Poppins_300Light_Italic, "Poppins-Regular": Poppins_400Regular, "Poppins-RegularItalic": Poppins_400Regular_Italic, "Poppins-Medium": Poppins_500Medium, "Poppins-MediumItalic": Poppins_500Medium_Italic, "Poppins-SemiBold": Poppins_600SemiBold, "Poppins-SemiBoldItalic": Poppins_600SemiBold_Italic, "Poppins-Bold": Poppins_700Bold, "Poppins-BoldItalic": Poppins_700Bold_Italic, "Poppins-ExtraBold": Poppins_800ExtraBold, "Poppins-ExtraBoldItalic": Poppins_800ExtraBold_Italic, "Poppins-Black": Poppins_900Black, "Poppins-BlackItalic": Poppins_900Black_Italic, });
return ( // Pass the loading flag into the provider <ThemeProvider haveFontsLoaded={haveFontsLoaded}> // {... other components go here} </ThemeProvider> );}
The ThemeProvider
optionally expects a haveFontsLoaded
prop which ensures that your app loads only after all the underlying fonts have loaded.
That's it, You're good to go!