Upzaar UI Components Library for React Native
- Install Upzaar UI
npm install @buttercloud/upzaar-ui-native
yarn add @buttercloud/upzaar-ui-native
pnpm i @buttercloud/upzaar-ui-native
- Include Upzaar UI in your
tailwind.config.js
file
This library is built with tailwindcss using NativeWind, make sure to follow their setup guide here
then update your tailwind.config.js
file
module.exports = {
content: [
"./node_modules/@buttercloud/upzaar-ui-native/src/**/*.{js,ts,jsx,tsx}",
],
presets: [
require("@buttercloud/upzaar-ui-native/tailwind.config"),
],
};
- Start using components
import { Button } from '@buttercloud/upzaar-ui-native'
Upzaar UI uses Poppins and Roboto from google fonts
expo install expo-font @expo-google-fonts/poppins @expo-google-fonts/roboto
Then update your root _layout.tsx
with
import { useFonts } from "expo-font"
import {
Poppins_100Thin,
Poppins_200ExtraLight,
Poppins_300Light,
Poppins_400Regular,
Poppins_500Medium,
Poppins_600SemiBold,
Poppins_700Bold,
Poppins_800ExtraBold,
Poppins_900Black,
} from "@expo-google-fonts/poppins"
import {
Roboto_100Thin,
Roboto_300Light,
Roboto_400Regular,
Roboto_500Medium,
Roboto_700Bold,
Roboto_900Black,
} from "@expo-google-fonts/roboto"
export default function RootLayout() {
let [fontsLoaded, fontError] = useFonts({
Poppins_100Thin,
Poppins_200ExtraLight,
Poppins_300Light,
Poppins_400Regular,
Poppins_500Medium,
Poppins_600SemiBold,
Poppins_700Bold,
Poppins_800ExtraBold,
Poppins_900Black,
Roboto_100Thin,
Roboto_300Light,
Roboto_400Regular,
Roboto_500Medium,
Roboto_700Bold,
Roboto_900Black,
})
if (!fontsLoaded && !fontError) {
return null
}
}
Check Expo Fonts for more info
If you want to use icons exported from this library
npx expo install react-native-svg
yarn add --dev react-native-svg-transformer
Then update your metro.config.js
const { getDefaultConfig } = require("expo/metro-config");
module.exports = (() => {
const config = getDefaultConfig(__dirname);
const { transformer, resolver } = config;
config.transformer = {
...transformer,
babelTransformerPath: require.resolve("react-native-svg-transformer"),
};
config.resolver = {
...resolver,
assetExts: resolver.assetExts.filter((ext) => ext !== "svg"),
sourceExts: [...resolver.sourceExts, "svg"],
};
return config;
})();
then you can start importing icons like this
import { AddUserIcon } from '@buttercloud/upzaar-ui-native'
<AddUserIcon />
For more info check SVG docs on expo and SVG Transformer