DEV Community

Chandrasekar Kuppusamy
Chandrasekar Kuppusamy

Posted on • Originally published at Medium on

Creating Reusable UI for React Native using NativeBase

What is NativeBase?

NativeBase is a reusable UI component library which helps to create React Native UI component rapidly with ease. It enables component support for both iOS and Android natively.

For Example: ActionSheet UI in iOS and BottomSheet UI in Android without adding any extra dependencies.

It’s time to say goodbye to index.android.js and index.ios.js for creating UI with cross-platform support.

Reference : https://docs.nativebase.io/#Introduction

How to setup?

  1. Navigate to your root React Native project folder (i.e cd YOUR_PROJECT_NAME)
  2. Install NativeBase using npm install native-base --save command
  3. Connect your existing React Native project using react-native link command.

Boom! You’re good to go. Now you can use all the components and property of NativeBase in your project.

Customization?

Yes! There is an option for that too. Native Base is built on top of React Native and it provides variety of options using themes, styles, variables and components.

Run this command from terminal to view the Native Base theme folder

node node_modules/native-base/ejectTheme.js
Enter fullscreen mode Exit fullscreen mode

Now the native-base-theme folder is enabled on your project root. Play with all .js files to change color, background, font, size, text and other properties used in the Component.

Please refer official docs for the supported components with NativeBase here

Top comments (0)