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.
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.
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.
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...
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.
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.
Success!