How to setup rnuilib(wix) for a React Native CLI Project.
Tags: reactnative, mobile, frontend, rnuilib
Published: 2024-04-03 15:18:12

## Introduction

Welcome aboard! In this guide, we're going to embark on a journey to set up the [RNUILIB](https://wix.github.io/react-native-ui-lib/) library with your React Native CLI app. RNUILIB, short for React Native UI Library, offers a plethora of components and themes designed to craft stunning, responsive apps. Excited? Let's get started!


## Prerequisites

Before you begin, make sure you have the following installed on your machine:

- Node
- npm
- React Native CLI
- Android Studio or Xcode (for iOS development)

## Side Note

If you're itching to get started pronto, you can expedite the process by checking out the below repository. It'll have you up and running in a snap!

{% github suryanshsingh2001/react-native-rnuilib-wix-starter %}


## Create a New React Native App

Let's kick things off by creating a new React Native app named `MyApp`. Execute the following command:


```bash
npx react-native init MyApp
```

Once the project is built, navigate to the project directory:

```bash
cd MyApp
```

## React Navigation Library Installation (Optional)

If you want to use React Navigation library in your project, you can install it by running the following command:
```bash
npm install @react-navigation/native react-native-screens react-native-safe-area-context react-native-gesture-handler
```

This will install the required dependencies for React Navigation library.
Also, you can install the stack navigator by running the following command:
```bash
npm install @react-navigation/stack
```

Note: Make sure to import react-native-gesture-handler in your project's entry file (For eg: `App.tsx` or `index.js`) as shown below:

```javascript
import 'react-native-gesture-handler';
```

## RNUILIB Installation

To install the RNUILIB library, run the following command:
```bash
npm install react-native-ui-lib
```

Make sure to install the peer dependencies by running the following command:

```bash
npm i react-native-reanimated react-native-gesture-handler
```

Note: Make sure to setup react-native-reanimated in `babel.config.js` file as shown below:
```javascript
module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: ['react-native-reanimated/plugin'],
};
```

## Dive in Code

Firstly, start by building your app by running the following command:
```bash
npx react-native run-android
```
or
```bash
npx react-native run-ios
```


Once your app is up and running, you can start tweaking the `App.tsx` file located in your project directory.



```javascript
import React from 'react';
import {Colors, Text, View} from 'react-native-ui-lib';


const App = () => {
  return (
    <View flex center backgroundColor={Colors.$backgroundDarkActive}>
      <Text text30 white>
        Hello RNUILIB with React Native
      </Text>
    </View>
  );
};

export default App;
```

## Behold, the Final Output!

![App.js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zu508wwbntq33pmr1nkf.png)

You may look into the RNUILIB documentation for more information on how to use the library.

Source: [RNUILIB Docs](https://wix.github.io/react-native-ui-lib/docs/getting-started/setup)