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

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay