Create your first React Native mobile app - Haze API App
Your own Haze Air Pollution Index mobile app
In this workshop we will be developing a React Native mobile app using Expo. We will use an API (Application Programming Interface) as the input/resources/database for the mobile application. The app would consume the JSON resources provided by the API to create a presentable interface where the user can check the daily haze Air Pollution Index in their mobile devices.
- We will need your iOS or Android phone installed with the Expo mobile app, so that the app can tested on your phone.
- 1.Understand the basic concept of React/React Native
- 2.Publish the app to a website or at least run it on your phone
- At least some basic understanding of programming is needed, preferably in JavaScript as this is the main language used throughout this course
Doesn't know anything about programming? No worries! Armed with just some common sense and a bit of patience you can go through this workshop as well. If you need any help you can just raise your hand or message me at @joevo2
- 1.
- 2.We will be presented with
App.jsin the text editor area, and on the right you will see preview of your app. Where you can toggle between iOS, Android and Web. - 3.To run your phone you can toggle it to iOS/Android and press the "Run on your device" , then scan the QR code using the installed Expo app on your phone.
- 4.Referring to the code below, the top part consists all the imports, which consists all the library installed using NPM which you can see in your
package.json. The rest are imported from other local file such as theAssetExamplecomponent. - 5.In the
render()function is where we have HTML-like syntax called JSX where we can create the user interface for the app. Component such asText,Viewcan be imported fromreact nativeas shown in line 2. The full list of component can be referred at the official React Native documentation. - 6.From line 27 onward we can see the various of styling that has been set, and used by the
Viewcomponent in line 14 as suchView style={styles.container}>. The styling syntax is similar to that of CSS but camel cased. The full list of supported styling can be referred here.
App.js
import * as from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
// You can import from local files
import AssetExample from './components/AssetExample';
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.paragraph}>
Change code in the editor and watch it change on your phone!
Save to get a shareable url.
</Text>
<Card>
<AssetExample />
</Card>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},
});
React is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications, as it is optimal for fetching rapidly changing data that needs to be recorded
In layman term, we can use React to build interactive interface where we can manipulate the data on the screen, fetch data from database etc.
In this workshop we will be using React Native instead React. React Native works the same as React but instead of using
div and dealing with HTML, we would use React Native component like View and dealing with mobile app libraries.The added benefit of using React Native is that instead of using Swift and Kotlin/Java to develop iOS and Android app, we could use JavaScript instead where it will be compiled by React Native into the respective code.
React state allow us update a value efficiently in HTML DOM. As shown in the code below
App.js
export default class App extends React.Component {
state = {
text: 'Testing',
};
onChangeText = incomingText => {
this.setState({ text: incomingText });
};
render() {
return (
<View style={styles.container}>
<Text style={styles.paragraph}>{this.state.text}</Text>
<TextInput
style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
onChangeText={text => this.onChangeText(text)}
/>
</View>
)
}
}
Props allow to pass value or even function to component we created.
App.js
class MyComponent extends React.Component {
render() {
return (
<View>
<Text>{this.props.text}</Text>
</View>
)
}
}
export default class App extends React.Component
render() {
return (
<View style={styles.container}>
<MyComponent text={new Date().toLocaleDateString()} />
</View>
);
}
}
- 1.
- 2.You should receive a confirmation email with instruction on making a simple API call with your token
- 3.You should be presented with a link as shown
https://api.waqi.info/feed/kualalumpur/?token=yourTokenHerewhere you can get a JSON response. - 4.
Token is use to uniquely identify you and your application where usage will be recorded for analytics, security and billing purpose.
JSON (JavaScript Object Notation)
An open-standard file format that uses human-readable text to transmit data objects consisting of attribute–value pairs and array data types
Sample AQI JSON response
{
"status": "ok",
"data": {
"aqi": 150,
"city": {
"geo": [
3.139003,
101.686855
],
"name": "Kuala Lumpur",
"url": "https://aqicn.org/city/kuala-lumpur"
},
"time": {
"s": "2019-09-19 17:00:00",
"tz": "+08:00",
"v": 1568912400
}
}
}
To make an API call we would be using Fetch API which is built in and also commonly being used in modern browser.
App.js
export default class App extends React.Component {
state = {
aqi: 0,
location: '',
};
componentDidMount() {
const location = 'kualalumpur'
const token = 'yourOwnTaken'
fetch(
`https://api.waqi.info/feed/${location}/?token=${token}`
)
.then(res => res.json())
.then(fetchedData => {
this.setState({
location: fetchedData.data.city.name,
aqi: fetchedData.data.aqi,
});
});
}
render() {
return (
<View style={styles.container}>
<Text style={styles.paragraph}>{this.state.text}</Text>
<Text>{this.state.aqi}</Text>
<Text>{this.state.location}</Text>
</View>
);
}
}
In React Native we will be using Flex to layout our UI. Here's the official documentation where you could learn how to position any item anywhere with ease.
What you learnt here is applicable on both React Native development as well as web development.
In this workshop we will be using a third party library called react-native-paper where it provide us with Material Designed style component where we could present our data in a modern and presentable fashion.
- 2.After having your own concept of UI, try to create the component that are required in Snack Expo.
Icons
Expo have a built in set of open source icon. Here's the directory for the full list of icon. Below we have an example on how to implement it.
import { Ionicons } from '@expo/vector-icons';
export default class IconExample extends React.Component {
render() {
return (
<Ionicons name="md-checkmark-circle" size={32} color="green" />
);
}
}