Relay Native

Relay Native is a project template (aka boilerplate) for creating mobile apps with:

• React Native framework for building native apps with React.
• Expo library for better development experience.
• Relay framework for using GraphQL with React.
• TypeScript language for type checking and better code quality.
• React Navigation library for navigation.
• NativeBase for using ready to use generic components of React Native
• Jest for testing.
• TSLint, ESLint and Prettier for checking TypeScript and JavaScript readability, maintainability, and functionality errors.

It also contains these features:

• Absolute Imports which is very useful and makes it easier to quickly understand where the import is coming from. For more information checkout this article.
• JWT Authentication for those who want to see examples of implementation of join and login mutations with JWT.
• Drawer with Tabbar for those who want to see examples of implementation of tabbar inside drawer with react-navigation and NativeBase together.

This project was bootstrapped with Create React Native App. In order to see the most recent CRNA readme visit here.

Table of Contents

• Directory Layout
• Prerequisites
• Installation
• Running
  • with Expo
  • without Expo
• Testing and Formatting
• License

Directory Layout

├── node_modules/                  # 3rd-party libraries and utilities
├── coverage/                      # Coverage reports
├── data/                          # Data files such as schema.json that use for graphql
├── modules/                       # Extra declaring for typescript modules
├── src/                           # Application source code
│   ├── components/                # Shared React components + Pages
│   ├── mutations/                 # Relay Mutations
│   ├── navigators/                # Navigators for pages
│   ├── tests/                     # Jest test files
│   ├── App.tsx                    # Root component
│   ├── constants.tsx              # Constants variables of project
│   ├── env.json                   # Environment variables
│   ├── package.json               # Deaclearing package name for absolute path imports
│   └── relay-environment.js       # Relay Modern client
├── package.json                   # The list of project dependencies + NPM scripts
└── App.js                         # <== Application entry point (main) <===

Prerequisites

• Node Version Manager (preferred)
• Node.js v9.3.0 or higher (preferable to install with nvm install node)
• Yarn v1.3.2 or higher (preferable to install with nvm install node)
• WebStorm editor (preferred) or VS Code

Installation

• npm install -g create-react-native-app
• git clone git@github.com:30murgh/relay-native.git
• cd relay-native
• yarn install
• cp src/env.sample.json src/env.json

Running

You can run the app with or without Expo.

Before anything, run yarn relay

with Expo

First run yarn start

Then scan the QR code with your installed Expo app.

without Expo

Plug in your device or make sure you have emulator installed.

For running on IOS use yarn run ios

For running on Android use yarn run android

Testing and Formatting

Relay Native uses Jest for testing and uses TSLint, ESLint and Prettier for linting and formatting. Tests are also written in typescript.

In order to test the project use on of the commands below:

• yarn test
• yarn coverage

In order to check the project's code style run yarn lint

License

Copyright © 2018-present 30murgh Community. This source code is licensed under the MIT license found in the LICENSE file.