Skip to main content

Setup

Setting up the theme provider#

For 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 Props#

NameRequiredTypeDefaultDescription
initialColorModefalse"light" | "dark" | "system""light"Initial color mode for the app.
themefalsePearlThemebaseThemeThe theme configuration object.
haveFontsLoadedfalsebooleantrueA flag that describes the loading status of the custom fonts.

Loading default fonts#

Pearl 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!