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!
React-Native-rnuilib-starter Project
This template repostory is a quick starter project for rnuilib with react-native CLI App along with React Navigation.
Quick Start
- Clone the repository
git clone https://github.com/suryanshsingh2001/react-native-rnuilib-wix-starter.git
- Install the dependencies when in the project directory
cd react-native-rnuilib-wix-starter
npm install
- Run the project
npx react-native run-android
or
npx react-native run-ios
-
Open
App.tsx
and start working on your app. -
By Default,
MainStackNavigatior.js
is the root navigator for your screens. You can change it inApp.tsx
file.
Out of the box features
- React Native CLI Setup.
- React Navigation Setup.
- React Native UI Lib Setup.
- React Native Vector Icons Setup
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
Once the project is built, navigate to the project directory:
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:
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:
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:
import 'react-native-gesture-handler';
RNUILIB Installation
To install the RNUILIB library, run the following command:
npm install react-native-ui-lib
Make sure to install the peer dependencies by running the following command:
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:
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:
npx react-native run-android
or
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.
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!
You may look into the RNUILIB documentation for more information on how to use the library.
Source: RNUILIB Docs
Top comments (0)