Chandrasekar Kuppusamy's Blog

Creating Reusable UI for React Native using NativeBase

Chandrasekar Kuppusamy's photo
Chandrasekar Kuppusamy
·

1 min read

What is NativeBase?

NativeBase is a reusable UI component library, which helps to create React Native UI components 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 a UI with cross-platform support.

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

How to set up?

  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 the below command from terminal to view the Native Base theme folder

node node_modules/native-base/ejectTheme.js

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

React Native