Friday, 27 January 2017

When developing using React Native, we reference two separate libraries (both React and React Native).

React

React is more generic and also used on the web, essentially it ensures all the components work together. It is also responsible for understanding how components should behave. Any components you define will extend Component which is defined by React.

React Native

Provides the default core components that translate to native components. It can take a component and place it on the mobile phone's screen. It is basically the link between your Javascript and the mobile device.

Thursday, 26 January 2017

ESLint is a tool that analyses your JavaScript for potential errors and can be installed into many common text editors. This can help you pick up errors in your JavaScript without reloading your website or react native app, which can help you increase your productivity... YAY!

ESLint has a few setup layers - this is split into editor specific config and project specific config. This means we can configure which ESLint rules to validate our code using on a project by project basis. There are some preset configurations for this so that as a developer you don't need to add rules one by one.

Tuesday, 24 January 2017

In React Native, to add navigation to your app you can use the Navigator component. You can have as many navigators as you want in your app e.g. you may have one for your whole app or multiple if you are using tabs with different navigation stacks for each tab. This tutorial will explain how to add a single navigator to your react native app. Firstly, add the navigator as the base for your application so specify it in the index.ios.js and the index.android.js:

// Import the Navigator from React Native
import React, { Component } from 'react';
import {
AppRegistry,
Navigator
} from 'react-native';
import MainScene from './app/scenes/mainScene'
import AddGoalScene from './app/scenes/addGoalScene'
export default class Goalie extends Component {
renderScene(route, navigator) {
// Specify the properties to pass to the scene you will
// render. It is useful to pass the navigator around the
// scenes so that you can push and pop to the navigation
// stack.
var globalNavigatorProps = {
navigator: navigator,
goal: route.goal
};
// Based on the route passed to the navigator you can
// determine which scene to render.
switch(route.ident) {
case "MainScene":
return ( <MainScene {...globalNavigatorProps} />);
case "AddGoalScene":
return ( <AddGoalScene {...globalNavigatorProps} />);
default:
return ( <MainScene {...globalNavigatorProps} />);
}
}
render() {
return (
// Render your navigator
// You must specify an initial route, which will become
// your root view for the app. The initialRoute is just
// an object with an identifier you can use to define
// which screen should be displayed, and whatever other
// info you would like to pass in.
// You must also specify a renderScene function which
// has the args route and navigator, this must return
// what you would like to render on the navigation stack.
<Navigator
initialRoute={{ident: "MainScene", goal: "MainScene" }}
renderScene={this.renderScene} />
);
}
}
AppRegistry.registerComponent('Goalie', () => Goalie);

The next step is to be able to add and remove from the navigation stack. For simplicity, I will demonstrate this using back and forward buttons:

Monday, 16 January 2017

One awesome thing about React Native is that you can use the npm to install packages which allow you to reuse JavaScript code that someone else has written(see here for list of packages)! This post will take you through how to install/uninstall packages.

Installing Packages

First, you will need to find a package you would like to install on the npm website. Once you find a package, go to your react native project's folder in the terminal and type:

npm install react-native-checkbox-field --save

--save means that the module you are installing will be automatically added to your package.json's dependencies. If you don't want your package.json to update, leave off the --save. After completing the install and updating your package.json, you can then use your new package as described on the packages page on the npm website, e.g:

import { CheckboxField, Checkbox} from 'react-native-checkbox-field';

Uninstalling Packages

Uninstalling packages is similar to installing packages. Go to your react native project's folder in the terminal and type:

npm uninstall react-native-checkbox-field --save

--save means that the module you are uninstalling will be automatically removed from your package.json's dependencies. If you don't want your package.json to update, leave off the --save. After completing the uninstall and updating your package.json, you will no longer have access to the package you have uninstalled so you should remove all references to it.

Thursday, 12 January 2017

Laying out components in React Native is done using flexbox, the key difference though is that style names are written camelcase e.g. background-color would be backgroundColor when defining it as part of a React Native Stylesheet. Today, I'll take you through the key ways you can layout your components using flexbox:

Parent Properties

display: flex;

In web dev, if you want to layout your page using flexbox you will need to specify "display: flex;" in your style for that HTML element. However, in react native this is unnecessary.

flexDirection

row (default): layout child components left to right

row-reverse: layout child components right to left

column: layout child components top to bottom

column-reverse: layout child components bottom to top

flexWrap

nowrap (default): components try to fit on one line

wrap: components can wrap onto new line (left to right)

wrap-reverse: components can wrap onto new line (right to left)

flexFlow

Shorthand for flexDirection and flexWrap e.g. column wrap

justifyContent

Distributes space left over once all the child items have been rendered.

flex-start: components are rendered at the start of the parent

flex-end: components are rendered at the end of the parent

center: components are rendered at the center of the parent

space-between: components are rendered equidistant apart, with a component aligned with both the start and end of the parent component

space-around: components are rendered equidistant apart, with a space at before the first and last component

alignItems

How components are aligned vertically for row layout or horizontally for column layout:

flex-start: aligned with the top of the parent layout for row, and with the left of the parent for column

flex-end: aligned with the bottom of the parent layout for row, and with the right of the parent for column

Wednesday, 11 January 2017

In this post, I will take you through how to create a component that is reusable in iOS/Android. First off, we will make a folder where we place all our reusable code, I have called it app and created it under the folder that was created when using the react-native command to initialise your app. There will be a few different things that go in this folder, so I have created another folder under app called components.

ViewContainer Component

I have chosen a simple component for the purpose of this tutorial, and it is a ViewContainer component. It is effectively a react native view, with specified styling applied and will form the base of all the screens you add to your app. Under app/components I add a new folder called viewContainer with 2 new files, the first file defines how the component is rendered and is called viewContainer.js:

The first file imports React and Component, React is a default export (see here for explanation) and so doesn't need to be in {}. We import Component so that we can define a new component and how it is rendered, this is defined in the render function. We also import View from react native, as this is the type of existing component we want to base our custom component off. And finally, we also import the style for the view container which is called style.js:

Monday, 9 January 2017

Hi everyone, React Native is a cool framework I've been learning about lately that lets you build mobile apps using Javascript. So over the next few weeks I will document my efforts with developing apps in React Native!

Getting Started

Just follow the React Native Getting Started guide to download everything you require. Note: iOS apps can only be developed on a Mac. I will be developing an app for both Android and iOS over this series so will be using a Mac. If you get errors, you may need to update node/npm if you have previously installed these.

Initialising the App

In your terminal, change to your development directory or where you want your react native project to be saved.

Enter the command

react-native init [project_name]

This will setup your React Native project

Enter the command

cd [project_name]

Enter the command

react-native run-ios

from inside your React Native project directory to see the base iOS output

To see the base Android output:

Open the android folder in Android studio

Go to Tools > Android > AVD Manager and setup a device, this will handle installing anything you need for the emulator to run

Run the virtual device you created

Enter the command

react-native run-android

from inside your React Native project directory to see the base Android output

Editing the view

You can edit the view displayed in the index.android.js and index.ios.js files in your preferred text editor.

GameKit makes it really easy to add global scoreboards to an app, where you can compare yourself to Game Center friends or everyone who has played on the all time scoreboard. This article will take you through how to add it to your apps.

Initial Setup

First, go to iTunes Connect and select your app, and then click features. It should look something like this:

Then click on the plus next to leaderboards and select "Single Leaderboard". You should now be at a page that looks like this:

Fill out the fields, the Leaderboard Id will be how you reference it in the code. Ensure you also add a language, the name here will be the name that appears to users viewing your scoreboard:

Once you are done click save, and ensure that Game Center is enabled for your app against the build you are setting up. Then you will need to also enable it via Xcode. Open Xcode and ensure that GameKit is added as a Linked Framework/Library:

Finally, check the capabilities to ensure Game Center is successfully enabled:

Coding a Leaderboard

First, ensure the user is logged in when they first open the application by authenticating the player in the viewDidLoad function on one of the initial ViewController's presented by the application. Ensure the state of whether game center is enabled or not is saved, as this will allow you whether to show the option to view leaderboard after a user has played your game. For convenience and code simplicity, gameCenterEnabled is a global variable in this example.

Next, you will want a view with a button to show the leaderboard , the view controller for this view should implement GKGameCenterControllerDelegate and handle dismissal and opening of the leaderboard. In this example saving of the score happens here as this view is displayed upon game completion. However, saving of the score can happen anywhere in your application.