Build an iOS and Android app in 45 minutes and 30 seconds using React Native(Ignite Bowser and react-native-elements) — Part I

In this tutorial series, I will guide you through creating an iOS and Android App with Ignite Bowser using react-native-elements for layout and styling in 45 mins and 30 seconds. Don't ask why the 30 seconds. We will be creating a Liverpool Football Club First Team App which lists the first team then you can click to open a detailed view of the selected/current player.

In this post, we’ll go through the steps of creating the players' model. Part 2 we will build the list using react-native-elements. Part 3 will be creating and styling the player detail page. We want to illustrate how to use Ignite Bowser stack with real examples.

ignite new Liverpool — boilerplate bowser

When prompted choose expo by typing y

cd Liverpool
yarn start
npx ignite-cli --help
npx ignite-cli doctor

Your app is ready to go, just joking there is still 44 mins to go so let's continue.

Download the logo and JSON file if you want to follow along or create your own logo and data file:

https://ignite-bowser-tuts.s3.amazonaws.com/liverpool/ignite-bowser-react-native-elements-files.zip

Before we start the next step, install Reactotron

infinitered/reactotron

Unfortunately, I will not be going over installing it in this tutorial, please go to the link and read the docs.

Defining Our Model

Copy or drop the JSON file into the app/models/root-store folder.

let’s start building our data model. You can see here we have our different players as a JSON file Alison Becker is the first one, so I’m going to actually copy that in because we need to modify our root-store.

A root-store is basically something set up by Ignite for you. It’s a MOBX state tree store that contains basically all of your application state out of the box.

copy this from the JSON file (the first node):

"id": "alisson-becker",
"name": "Alisson Becker",
"href": "https://www.liverpoolfc.com/team/first-team/player/alisson-becker",
"image": "https://ignite-bowser-tuts.s3.amazonaws.com/liverpool/alisson-becker.jpeg",
"position": "GOALKEEPER",
"age": 20

Then go to the root-store.ts and create the following :

export const PlayerModel = types
.model({
id: types.identifier,
name: types.string,
href: types.string,
image: types.string,
position: types.string,
age: types.number,
})

after that bring in the data from the JSON file :

const playerData = require("./player-data.json")

app/models/root-store/root-store.ts

then create the players array from the PlayerModel

players: types.array(PlayerModel)

place that in the RootStore

export const RootStoreModel = types
.model("RootStore")
.props({
players: types.array(PlayerModel),
}).actions(self => ({
afterCreate() {
self.players = playerData.players
},
}))

If you check Reactotron:

you will see your data has populated, congratulations you have successfully set up your model and populated the data.

In Part 2 we will install react-native-elements and build a list and style it as the screenshot on the start of the tutorial, thanks for joining, will upload part 2 in the next day or 2.