-NPM version 6.4.1
-expo version 2.6.14
-Atom 1.34.0
-NativeBase 2.10.0. Please refer to link
Note: React Native has too many dependencies and issues for a beginner like me. I have gone through those and it has burnt my many precious hours. Even though I decided to use NativeBase framework to speed up my development cycle but I still need to clear those hurdle that blocked me to get to the end result. I reused sample code from NativeBase as a very simple kickstart for beginners like me to avoid those unnecessary frustration.
Steps
- Run command below to create your first React navigation project.
$ expo init AwesomeNativeBase
- During the prompt of the "Choose a template", choose "> blank minimum dependencies to run and an empty root component" option
- When project creation process is completed, change to "AwesomeNativeBase" directory, run the command below to install native-base component.
$ npm install native-base --save
- Run command below to install vector-icons.
$ npm install @expo/vector-icons --save
- Launch App.js using the Atom IDE. Paste the sample code as shown below
import React, { Component } from 'react';
import { StatusBar } from 'react-native';
import { Container, Header, Title, Content, Footer, FooterTab, Button, Left, Right, Body, Icon, Text } from 'native-base';
import {Font, Expo, AppLoading} from 'expo';
export default class AnatomyExample extends Component {
state={
isReady: false
}
async componentWillMount() {
await Font.loadAsync({
'Roboto': require('native-base/Fonts/Roboto.ttf'),
'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),
});
this.setState({isReady:true})
}
render() {
if (!this.state.isReady) {
return <AppLoading />;
}
return (
<Container>
<Header>
<Left>
<Button transparent>
<Icon name='menu' />
</Button>
</Left>
<Body>
<Title>Header</Title>
</Body>
<Right />
</Header>
<Content>
<Text>
This is Content Section
</Text>
</Content>
<Footer>
<FooterTab>
<Button full>
<Text>Footer</Text>
</Button>
</FooterTab>
</Footer>
<StatusBar hidden />
</Container>
);
}
}
- Back to your command prompt, enter command below to start your CLI.
$ expo start
- Expo Metro bundler will be launched.
- I'm using Expo Android client to conduct my testing. Please refer to link.
- Make sure "Tunnel" is selected at the "Connection" field. Use the Expo Android client to scan the QR code, your application will be launched as shown in the screenshot below.
