React Native Getting Started With NativeBase Cross Platform UI Components

Native Base is a essential cross platform UI(User Interface) components for react native mobile application development language for both Android and iOS devices. Native Base is one of the most popular UI components group with extreme layout design and functionality. Native Base is completely free and open source means you can use it anywhere any place and any type of application like personal or commercial. So in this tutorial we would going to install and NativeBase Cross Platform UI Components in react native project. So let’s get started 🙂

Minimum system requirement :

  • Node version is >= 6.0
  • NPM version is >= 4.0

Native base also gives us a simple application on Google Play Store explained all of its components. You can download and install the Native Base official android UI components demo app from here : https://play.google.com/store/apps/details?id=io.market.nativebase.geekyants.nativebasekitchensink

Contents in this project Getting Started With NativeBase Cross Platform UI Components for React Native Android iOS App development:

1. To install the Native Base on your currently created or newly build react native application project, First you need to goto your project folder in CMD like i did in below folder and execute the npm install native-base --save  command.

2. This command will start installing all the Native Base libraries and dependencies which you need to use UI components of native base in your react native app. Below is the screenshot of CMD after successfully installed the native base library.

3. Now execute the react-native link command in your project folder. This command would refresh the complete react native project and manage all the newly added dependencies in its index.

4. Screenshot of CMD after successfully executed above command.

Here you go now your react native app project is ready to use the Native base UI Components.

List of components in NativeBase:

  1. Anatomy
  2. ActionSheet
  3. Badge
  4. Button
  5. Card
  6. Check Box
  7. Deck Swiper
  8. FABs
  9. Footer Tabs
  10. Form
  11. Header
  12. Icon
  13. Layout
  14. List
  15. Picker
  16. Radio Button
  17. Search Bar
  18. Segment
  19. Spinner
  20. Swipable List
  21. Tabs
  22. Thumbnail
  23. Toast
  24. Typography
  25. Drawer
  26. Ref

You can read all the components here on Native Base official website.

Leave a Reply

Your email address will not be published. Required fields are marked *