Skip to content

Instantly share code, notes, and snippets.

@s2t2
Created July 24, 2016 21:55
Show Gist options
  • Save s2t2/e9d48c85037e47a5b826b5d267fce483 to your computer and use it in GitHub Desktop.
Save s2t2/e9d48c85037e47a5b826b5d267fce483 to your computer and use it in GitHub Desktop.

Reproduction Instructions

Testing React Native boilerplate

Initialize a new react-native application:

react-native init MyNativeApp
cd MyNativeApp/

Use Android Studio to start a new Android Virtual Device (AVD) according to the following specs:

  • Android SDK Build Tools 23.0.1
  • Nexus 5 Device
  • Marshmellow 23 x86 OS

Run the react-native packager.

react-native run-android

The boilerplate application shows up in the AVD as expected.

screenshot 2016-07-24 22 03 41

Testing Native-Base

Shut down the packager and the AVD.

Install native-base.

npm install native-base --save

Edit index.android to use native-base components:

import React, { Component } from 'react';
import {AppRegistry, Text} from 'react-native';
import {Container, Header, Footer, Title, Content, Button, Icon} from 'native-base';

class MyNativeApp extends Component {
  render() {
    return (
      <Container>
        <Header>
          <Title>My Native App!</Title>
        </Header>

        <Content>
          <Text>Hello world.</Text>
        </Content>

        <Footer>
          <Button>Press me!</Button>
        </Footer>
      </Container>
    );
  }
}

AppRegistry.registerComponent('MyNativeApp', () => MyNativeApp);

Start the AVD and then the packager to see if native-base components are working:

react-native run-android

The components are showing up as expected.

screenshot 2016-07-24 22 15 59

Testing Icons

Shut down the packager and the AVD.

Edit index.android.js, just the button:

// ...
<Button>
  <Icon name="ios-radio-outline" />
</Button>
// ...

Start the AVD and then the packager to see if the icon is working. As expected, it is not, because the icon assets have not yet been installed.

screenshot 2016-07-24 22 27 17

Shut down the packager and the AVD.

Copy the project directory a few times and apply each of the strategies below using a different copy...

Asset Installation Strategy A (via rnpm)

Per the native-base instructions related to Android using rnpm, install react-native-vector-icons:

rnpm link

This creates a new directory called android/app/src/main/assets/fonts which contains some font files.

Start the AVD and then the packager to see if the icon is working. Unfortunately it is not.

screenshot 2016-07-24 22 27 17

Asset Installation Strategy C (manually)

According to the manual instructions:

mkdir -p android/app/src/main/assets/fonts
cp -rf node_modules/react-native-vector-icons/Fonts/ android/app/src/main/assets/fonts/

Edit android/settings.gradle:

rootProject.name = 'MyNativeApp'

include ':app'

include ':react-native-vector-icons'
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')

Edit android/app/build.gradle:

// ...
dependencies {
    compile fileTree(dir: "libs", include: ["*.jar"])
    compile "com.android.support:appcompat-v7:23.0.1"
    compile "com.facebook.react:react-native:+"  // From node_modules
    compile project(':react-native-vector-icons')
}
// ...

Start the AVD and then the packager.

screenshot 2016-07-24 23 17 20

Success!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment