@buttercloud/upzaar-ui-native v1.1.2

Upzaar UI Components Library for React Native

Getting Started

1. Install Upzaar UI

npm install @buttercloud/upzaar-ui-native

yarn add @buttercloud/upzaar-ui-native

pnpm i @buttercloud/upzaar-ui-native

2. 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"),
  ],
};

3. Start using components

import { Button } from '@buttercloud/upzaar-ui-native'

Fonts

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

Using SVG Icons

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