Setup
Getting started
Install the package, mount the providers, and everything in the reference works as documented.
Glowup is pre-1.0. The API can still change between minor versions — pin the version you build against.
1. Install
The package itself.
npm install @its/glowup-ui
2. Install the peer dependencies
Native modules are peers so your app owns their versions. These three are all the library needs; on web, react-native-web brings react-dom.
npx expo install \
react-native-safe-area-context \
react-native-svg \
@expo/vector-icons
3. Mount the providers
ThemeProvider is required; AlertProvider and ToastProvider only if you call Alert() or useToast().
import {
ThemeProvider,
AlertProvider,
ToastProvider,
} from "@its/glowup-ui";
import { SafeAreaProvider } from "react-native-safe-area-context";
export default function App() {
return (
<ThemeProvider>
<SafeAreaProvider>
<AlertProvider>
<ToastProvider>
<Screens />
</ToastProvider>
</AlertProvider>
</SafeAreaProvider>
</ThemeProvider>
);
}
4. Build a screen
Layout primitives take token names, not numbers, so a screen never hardcodes a spacing value.
import { Button, Typography, VStack } from "@its/glowup-ui";
export const Screens = () => (
<VStack p="m" spacing="s">
<Typography variant="headlineMedium">Hello</Typography>
<Button iconName="check" onPress={() => {}}>
Tap me
</Button>
</VStack>
);
5. Read the theme
Everything the library paints comes from here, and so should everything you build beside it.
import { useTheme } from "@its/glowup-ui";
const { theme, toggleTheme } = useTheme();
// theme.colors.primary, theme.spacing.m, theme.shape.large, theme.isDark