TheLazy.Dev
Portfolio GitHub

Blog

reactnative |mobile |frontend |rnuilib

How to setup rnuilib(wix) for a React Native CLI Project.

suryanshsingh2001

Suryansh Singh

Posted on April 3, 2024

How to setup rnuilib(wix) for a React Native CLI Project.

Introduction

Welcome aboard! In this guide, we're going to embark on a journey to set up the RNUILIB 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 logo suryanshsingh2001 / react-native-rnuilib-wix-starter

This template repostory is a quick starter project for rnuilib with react-native CLI App along with React Navigation.

React Native RNUILib Starter

Hacktoberfest Blog React Native RNUILib React Navigation PRs Welcome License: MIT

This repository provides a quick starter project for React Native using RNUILib (React Native UI Library) with React Native CLI, along with React Navigation integration. It's perfect for jumpstarting your React Native development with a solid foundation.

šŸš€ Features

  • React Native CLI setup
  • React Navigation pre-configured
  • RNUILib (React Native UI Library) integration
  • React Native Vector Icons setup
  • Ready-to-use project structure

šŸ“‹ Prerequisites

Before you begin, ensure you have the following installed:

šŸ› ļø Installation

  1. Clone the repository:

    git clone https://github.com/yourusername/react-native-rnuilib-starter.git
cd react-native-rnuilib-starter
    Enter fullscreen mode Exit fullscreen mode

  2. Install dependencies:

    npm install
# or
yarn install
    Enter fullscreen mode Exit fullscreen mode

  3. Install iOS pods (if developing for iOS):

    cd ios && pod install && cd ..
    Enter fullscreen mode Exit fullscreen mode

šŸš€ Running the App

For Android:

npx react-native run-android
Enter fullscreen mode Exit fullscreen mode

For iOS:

npx react-native run-ios
Enter fullscreen mode Exit fullscreen mode

šŸ“ Project Structure

react-native-rnuilib-starter/
ā”œā”€ā”€ src/
ā”‚   ā”œā”€ā”€ components/
ā€¦
View on GitHub

Create a New React Native App

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

npx react-native init MyApp
Enter fullscreen mode Exit fullscreen mode

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

cd MyApp
Enter fullscreen mode Exit fullscreen mode

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:

npm install @react-navigation/native react-native-screens react-native-safe-area-context react-native-gesture-handler
Enter fullscreen mode Exit fullscreen mode

This will install the required dependencies for React Navigation library.
Also, you can install the stack navigator by running the following command:

npm install @react-navigation/stack
Enter fullscreen mode Exit fullscreen mode

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:

import 'react-native-gesture-handler';
Enter fullscreen mode Exit fullscreen mode

RNUILIB Installation

To install the RNUILIB library, run the following command:

npm install react-native-ui-lib
Enter fullscreen mode Exit fullscreen mode

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

npm i react-native-reanimated react-native-gesture-handler
Enter fullscreen mode Exit fullscreen mode

Note: Make sure to setup react-native-reanimated in babel.config.js file as shown below:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: ['react-native-reanimated/plugin'],
};
Enter fullscreen mode Exit fullscreen mode

Dive in Code

Firstly, start by building your app by running the following command:

npx react-native run-android
Enter fullscreen mode Exit fullscreen mode

or

npx react-native run-ios
Enter fullscreen mode Exit fullscreen mode

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

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;
Enter fullscreen mode Exit fullscreen mode

Behold, the Final Output!

App.js

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

Source: RNUILIB Docs

šŸ’– šŸ’Ŗ šŸ™… šŸš©
suryanshsingh2001
Suryansh Singh

Posted on April 3, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

How to setup rnuilib(wix) for a React Native CLI Project.
reactnative How to setup rnuilib(wix) for a React Native CLI Project.

April 3, 2024