Getting started with React Native and NativeBase

Curious to know about react native functionality and making apps with a easy install feature which was recently released by facebook with the exponent team known as Create React Native App or popularly CRNA, i went ahead to make an app. Facing some issues i finally discovered the correct steps to make your app work in an instant with React native CRNA and NativeBase.

What is CRNA?

CRNA(Create React native app ) helps you make React Native apps with no build configuration, which means you do not need any android studio installation or xcode to setup and run your app. It really makes life easier if you wish to write plain javascript app and get started quickly.

What is NativeBase?

NativeBase is an UI component library , which includes many reusable and easy to use components such as header, buttons, cards to make your applications UI faster and easier. It has easy to learn syntax with great documentation and examples. With a strong community to support the Nativebase docs and libary components are getting updated almost every week. Link.


So to get started with the installation ..

  1. Install node js.
  2. Create a directory on your machine where you link your mobile projects to be . Go to the directory and install CRNA with the below commands :
$ npm install -g create-react-native-app
$ create-react-native-app my-app
$ cd my-app/
$ npm start

3. npm start command starts the building and deployment of your app. The command line displays a QR code which you can use to try the app on your mobile.

To use QR code and try app on your mobile download Expo app from your app store or play store and follow the instructions.

Also, you can connect to app using the ip link displayed on command line.

4) If you face any ip conflicts please restart your machine and connect to the same network with which the mobile is connected.

5) Next step is to install NativeBase. Check the NativeBase CRNA installation part in the link.

6) The steps involve running the commands :

npm install native-base --save
npm install @expo/vector-icons --save

Ignore any warnings you may see on your screen and go ahead to write code for the app.

NativeBase components include custom fonts and you have to include and load them in your code before rendering the components.

Eg :

async componentWillMount() {
await Expo.Font.loadAsync({
'Roboto': require('native-base/Fonts/Roboto.ttf'),
'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),
});

If the font is not included , you will see an error in your app when you run it to load them.

Complete example :

Thats it! It should get your app running.

Also do check Part 2 of this tutorial series which Covers a tab boilerplate to help you quickly get your tab based app setup. It uses custom fonts, ex-navigation and nativebase components saving you a lot of setup and exploration time .

Any suggestions are welcome!