PAD.io

A React-native list-creating app.

Table of Contents

1. Development
   • Setup
   • Env Variables
   • Running
   • Debugging
   • Development Tools
2. JS Style Guide
   • Import Statements
   • Conditional Rendering

Development

Setup

Expo is a set of tools, libraries and services which let you build native iOS and Android apps by writing JavaScript and React.

Install Expo-CLI globally first:

npm install -g expo-cli

Then install the app dependencies:

yarn install

Back to top

Env Variables

Create a file named .env in the root directory with the following format:

DEBUG=false
PERSIST_STATE=false

IMPORTANT NOTE:

If you change the value of a variable in .env, you must make a change to env.js in order for the new value to be applied. See: https://github.com/christopherbot/botghani-notepad/issues/168

Running

To run the application on an iphone simulator (like Xcode):

yarn ios

To run the application on an android emulator:

yarn andriod

Back to top

Debugging

In order to debug the app, remote debugging must be enabled on the device or simulator.

On the iPhone simulator:

1. Press Cmd + D to open the development menu
2. Click Debug Remote JS

If remote debugging is unavailable, ensure that production mode is not enabled. In the browser Metro bundler, production mode is displayed as a toggle near the QR code.

Back to top

Development tools

React Native Debugger

React Native Debugger is a standalone app that allows for easy debugging of React Native apps.

To install the app: brew cask install react-native-debugger (you may need to run brew update beforehand)

Before opening the app, ensure that no other React-native debugger is open.

To open the app: yarn rnd.

Note the port in the RND is run on 19001 because Expo runs on port 19000.

Expo Mobile App

To run your Expo app on your own personal mobile device download the Expo mobile app for iOS or Andriod.

To see the scanable QR code run:

yarn start

In order to install a fresh version of the Expo app, you can do the following:

1. In the simulator menu bar, click Hardware > Erase All Content and Settings....
2. Delete the Expo app within the simulator by clicking and holding down on the Expo app icon on the home page and clicking the x.
3. Run yarn start and the expo app will be re-installed.

Back to top

JS Style Guide

Import Statements

Import statements should be written in the following order:

• external packages & libs
• state files
• util files
• React components
• styles
• relative path imports

E.g.

import Module from 'package'
import { action } from 'state/actions'
import { myFunction } from 'utils/myFunction'
import Component from 'components/Component'
import style from 'styles/style'
import LocalComponent from './LocalComponent'
import localStyle from './localStyle'

Back to top

Conditional Rendering

The format for conditionally rendering markup and React components depends on its size or nesting. Examples provided below:

{ condition && <Component prop1={value} /> }

{ condition ? <Component prop1={value} /> : <OtherComponent /> }

{
  condition &&
    <Component
      prop1={value1}
      prop2={value2}
      prop3={value3}
      prop4={value4}
      prop5={value5}
    />
}

{
  condition &&
    <Component prop1={value}>
      <Child />
    </Component>
}

{
  condition
    ? (
      <Component
        prop1={value1}
        prop2={value2}
        prop3={value3}
        prop4={value4}
        prop5={value5}
      />
    )
    : (
      <OtherComponent>
        <Child />
      </OtherComponent>
    )
}

Back to top