Build React Native App (2) - Setup NativeBase and Buttons

From this series, we will NativeBase library to the program

Note. I spent almost one day to return 500 error from 0.57.2 and today I noticed that 0.57.3 is released and this version fixed the "return 500" error.

Reference site

• NativeBase Homepage
• Github Sample Ex2

Currnet version

D:\GitRepo\reactnative>npm --version
6.3.0

D:\GitRepo\reactnative>react-native --version
react-native-cli: 2.0.1
react-native: n/a - not inside a React Native project directory

D:\GitRepo\reactnative>yarn --version
1.9.4

Creating React Native App

$ react-native init ex2

If you want to specify the version, add "--version 0.57.3" at the end.

Add NativeBase to React Native

$ npm install native-base --save
...
+ native-base@2.8.1
added 71 packages from 42 contributors, removed 50 packages, updated 829 packages and audited 34989 packages in 138.542s
found 0 vulnerabilities
$
$ yarn
$
$ react-native link
rnpm-install info Linking assets to ios project
rnpm-install WARN ERRGROUP Group 'Resources' does not exist in your Xcode project. We have created it automatically for you.
rnpm-install info Linking assets to android project
rnpm-install info Assets have been successfully linked to your project

Add NativeBase button on the screen

file ex2\app.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import {Platform, StyleSheet} from 'react-native';
import { Container, Header, Content, Button, Text } from 'native-base';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <Container>
      <Header />
      <Content>
        <Button light><Text> Light </Text></Button>
        <Button primary><Text> Primary </Text></Button>
        <Button success><Text> Success </Text></Button>
        <Button info><Text> Info </Text></Button>
        <Button warning><Text> Warning </Text></Button>
        <Button danger><Text> Danger </Text></Button>
        <Button dark><Text> Dark </Text></Button>
      </Content>
    </Container>      
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

Result

Summary

From next blog, we will add Redux to the React Native Applicatoin