13 Aug 2017

ReactNative Startup App using NativeBase and Expo

NativeBase and Expo together provide a good starting point for ReactNative apps. This post provides the steps to set this up.
 The GitHub repo for NativeBase is here. An Expo with Create React Native App (CRNA) version of the repo is here.

Clone the NativeBase Starter App

Start by cloning the Expo/CRNA version of the app and switching to the cloned directory

git clone https://github.com/GeekyAnts/NativeBase-KitchenSink/tree/CRNA
cd CRNA

Install Packages

Install the following packages:

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

Update package.json

You may want to update the version of react-native in the package.json:

"react-native": "https://github.com/expo/react-native/archive/sdk-19.0.0.tar.gz",

Insert the following line in package.json:

"main": "node_modules/expo/AppEntry.js",

Update app.json

Insert the following block in the app.json after the displayName:

  "expo": {
    "name": "NativebaseKitchenSink",
    "description": "An empty new project",
    "slug": "blank",
    "privacy": "public",
    "sdkVersion": "19.0.0",
    "version": "1.0.0",
    "orientation": "portrait",
    "primaryColor": "#cccccc",
    "packagerOpts": {
      "assetExts": ["ttf", "mp4"]
    },
    "ios": {
      "supportsTablet": true
    }
  }

Update App.js

In the App.js, replace the render block with the following:

  async componentWillMount() {
    console.log('componentWillMount');
    await
    Expo.Font.loadAsync({
      'Roboto': require('native-base/Fonts/Roboto.ttf'),
      'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),
      'Ionicons': require('@expo/vector-icons/fonts/Ionicons.ttf'),
    });
    console.log('componentWillMount, back from loadAsync');
    this.setState({isReady: true});
  }

  render() {
    if (!this.state.isReady) {
      return ;
    }

    return ;
  }

Run Expo

Open the project in Expo and start it on the iOS simulator.

Use My Repo As A Shortcut

Enter these commands to clone my version of the repo:

git clone https://github.com/rgstephens/NativeBase-KitchenSink.git
npm install

Open the project in Expo and start it on the iOS simulator.


Tags:
0 comments