Upzaar UI Components Library for React Native

# Getting Started
1. Install Upzaar UI
```bash
npm install @buttercloud/upzaar-ui-native
```
```bash
yarn add @buttercloud/upzaar-ui-native
```
```bash
pnpm i @buttercloud/upzaar-ui-native
```
2. Include Upzaar UI in your `tailwind.config.js` file

This library is built with tailwindcss using [NativeWind](https://www.nativewind.dev/), make sure to follow their setup guide [here](https://www.nativewind.dev/quick-starts/expo)
then update your `tailwind.config.js` file

```javascript
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
```javascript
import { Button } from '@buttercloud/upzaar-ui-native'
```

# Fonts

Upzaar UI uses Poppins and Roboto from google fonts

```bash
expo install expo-font @expo-google-fonts/poppins @expo-google-fonts/roboto
```

Then update your root `_layout.tsx` with

```javascript
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](https://docs.expo.dev/develop/user-interface/fonts/#use-a-google-font) for more info

# Using SVG Icons 

If you want to use icons exported from this library

```bash
npx expo install react-native-svg
yarn add --dev react-native-svg-transformer
```

Then update your `metro.config.js`

```javascript
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
```javascript
import { AddUserIcon } from '@buttercloud/upzaar-ui-native'

<AddUserIcon />
```

For more info check [SVG docs on expo](https://docs.expo.dev/versions/latest/sdk/svg/) and [SVG Transformer](https://github.com/kristerkari/react-native-svg-transformer)