Get started with React Native in lightning speed.

May 10, 2018 0 Comments

Get started with React Native in lightning speed.

 

 

Check out part two of this FREE guide.

In case you missed part one, you can catch up but if you’re even mildly experienced with React Native programmer it’s basically a paraphrasing of the getting started section of the docs. So you don’t really need to go back to catch up.

This week we’re going to get something working on the screen, namely a scrollable list, of which we use alot of at Zonder. This is a really useful component as it’s extremely flexible. After you run react-native run-ios your simulator should launch. If you get this error message, just close the packager and re-run react-native run-ios.

As I mentioned last week your app should be loaded to 100% in the packager. If you encounter any issues where the app is hanging on the launch screen for too long. This is a good place to check for an error.

The library we will be using to make our flatlist is the react-native-elements library by React Native Training. To install run

npm install — save react-native-elements

If you run into the following error it can be debugged by running.

npm install — save react-native-vector-icons

Indeed, errors in this format are extremely common in React Native and I have never not gotten around them by simply running:

npm install --save missing-library-name

NB: missing-library-name is a placeholder for whatever library the error message is yelling at you about being missing is. If you get an error regarding Material icons being missing on iOS, you need to run:

react-native link react-native-vector-icons

I often need to run react-native-link after I install a library but the use of it seems arbitrary and the command is known to be unstable, so I don’t recommend it unless a Google search of your error suggests it might help.

The next step is to simply copy and paste this code into your App.js

/
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
/
import React, { Component } from 'react';
import {
AppRegistry,
Platform,
StyleSheet,
Text,
View,
FlatList
} from 'react-native';
import { ListItem } from 'react-native-elements'
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
data : [{
name: 'Amy Farha',
avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
subtitle: 'Vice President'
},
{
name: 'Chris Jackson',
avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
subtitle: 'Vice Chairman'
}]
}
}
keyExtractor = (item, index) => index
renderItem = ({ item }) => (
<ListItem
title={item.name}
subtitle={item.subtitle}
avatar={{ source: { uri: item.avatar_url } }}
/>
)
render() {
return (
<FlatList
keyExtractor={this.keyExtractor}
data={this.state.data}
renderItem={this.renderItem}
/>
)
}
}
AppRegistry.registerComponent('AwesomeProject', () => App);
/
 Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
Platform,
StyleSheet,
Text,
View,
FlatList
} from 'react-native';
import { ListItem } from 'react-native-elements'
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
data : [{
name: 'Amy Farha',
avatarurl: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg&apos;,
subtitle: 'Vice President'
},
{
name: 'Chris Jackson',
avatarurl: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg&apos;,
subtitle: 'Vice Chairman'
}]
}
}
keyExtractor = (item, index) => index
renderItem = ({ item }) => (
<ListItem
title={item.name}
subtitle={item.subtitle}
avatar={{ source: { uri: item.avatar_url } }}
/>
)
render() {
return (
<FlatList
keyExtractor={this.keyExtractor}
data={this.state.data}
renderItem={this.renderItem}
/>
)
}
}
AppRegistry.registerComponent('AwesomeProject', () => App);

The app should work pretty much straight out of the box and render a list of your two users like so.

Note that I currently don’t have the avatar working. But I will update this once I do. The link is not broken, I checked. But I think that there may be some issues with how it is being read in through the component state. If you have any suggestions on what you would like to see me make the app do next, please don’t hesitate to reach out here or in the comments. The code is available on Github here.

Thanks for your attention, it’s the most valuable thing you can give anyone. The hardest thing about writing these posts is often getting started, so any suggestions/requests for topics would be appreciated! I also welcome feedback on previous posts.

If you liked what you have read here and would like to hear more from me please feel free to sign up for my e-mail list on my personal site here, or at the very least…

https://www.youtube.com/watch?v=DdCYMvaUcrA


Tag cloud