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 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?
Navigate to your root React Native project folder (i.e
cd YOUR_PROJECT_NAME
)Install NativeBase using
npm install native-base --save
commandConnect 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