A boilerplate to bootstrap React Native mobile applications that use Apollo Client 3 for GraphQL, with an aim to provide best developer experience and performance out of the box.
Current implementation of the boilerplate uses React Native 0.63.2
together with TypeScript.
- Typescript - A superset of Javascript providing static typing, classes and interfaces.
- React Navigation - Provides built-in support for navigation between screens.
- Apollo Client 4 - Core Apollo client components to provide seamless GraphQL integration.
- Apollo Cache Persist - Utilizes async storage to persist and rehydrate the Apollo store.
- Styled Components - Powerful CSS in JS module providing template literals to support dynamic styling.
- Babel - Cross platform Javascript transpiler.
- TSLint - Enforces code styling, and standards. Airbnb's tslint guidelines are followed by default.
- CodePush - Enables updates to be delivered seamlessley to User devices.
- React Native SVG - Adds SVG support for React Native applications.
- React Native Bootsplash - Enables programmatic showing of Splash Screen.
- React i18next - Integrates i18n with React Native
- React i18next Parser - Localize as you code. Extract and generate localization files without breaking a sweat.
- Jest and Enzyme - Testing support for React based Projects
- Run
yarn
to install dependencies cd ios && pod install && cd ..
to install iOS Podsyarn start
to invoke the metro bundleryarn ios
oryarn android
package on respective emulators/devices.
Use yarn rename <Appname>
to rename the app throughout.
In addition to above packages, Storybook is also integrated as a development dependency. StoryBook enables developers to test UI components in isolation. To run Storybook server set IS_STORYBOOK
option in .env
to true
. And then, start the application via react-native run-ios
or react-native run-android
.
Until proper mocks are being added, current testing scenarios make use of a simple Hasura instance. You can find it here and hoist it together with Docker. You may update relevant variables in .env
before running the tests.
To run existing Test Suites run yarn test
. On occasions where some UI component with existing __snapshots__
directory is being updated, run yarn test -u
to update the snapshots.
This template also includes a sample workflow to verify merges to master via github actions. You may enable/disable it depending on your use cases.
As of present, the React Native version can be upgraded through react-native upgrade
. However, on some occasions, this process might introduce breaking changes. If so, please follow the changes specified on React Native upgrade helper.
Please refer to CONTRIBUTING.md for instructions on how to contribute to the boilerplate.
This folder structure follows the boilerplate code for the sake of brewity.
.
├── android
├── ios
├── src
│ ├── App.tsx
│ ├── Components - Atomic Design inspired folder structure
│ │ ├── Atoms
│ │ │ ├── __snapshots__ - Jest generated snapshots of the component
│ │ │ │ └── TestAtom.spec.ts.snap
│ │ │ ├── TestAtom
│ │ │ │ ├── TestAtom.impl.tsx
│ │ │ │ ├── TestAtom.interface.tsx
│ │ │ │ ├── TestAtom.spec.tsx
│ │ │ │ └── index.ts
│ │ │ └── index.ts
│ │ ├── Molecules
│ │ │ ├── TestMolecule
│ │ │ │ ├── index.tsx
│ │ │ │ └── styles.ts
│ │ │ └── index.ts
│ │ ├── Organisms
│ │ │ ├── TestOrganism
│ │ │ │ ├── index.tsx
│ │ │ │ └── styles.ts
│ │ │ └── index.ts
│ │ ├── Templates
│ │ │ ├── TestTemplate
│ │ │ │ ├── index.tsx
│ │ │ │ └── styles.ts
│ │ │ └── index.ts
│ ├── Definitions
│ │ ├── Styled
│ │ │ ├── index.ts
│ │ │ └── theme.ts
│ │ └── index.ts
│ ├── Graphql
│ │ ├── TestQuery
│ │ │ │ ├── TestQuery.spec.ts
│ │ │ │ └── TestQuery.ts
│ │ ├── apollo.ts
│ │ └── index.ts
│ ├── I18n
│ │ ├── index.ts
│ │ └── locales
│ │ ├── en
│ │ │ ├── common.json
│ │ │ ├── home.json
│ │ │ └── index.ts
│ │ ├── kr
│ │ │ ├── common.json
│ │ │ ├── home.json
│ │ │ └── index.ts
│ │ ├── index.ts
│ │ └── tr
│ │ ├── common.json
│ │ ├── home.json
│ │ └── index.ts
│ ├── Interfaces
│ │ ├── Scenes
│ │ │ └── Home.d.ts
│ │ ├── index.ts
│ │ ├── env.d.ts
│ │ └── styled.d.ts
│ ├── Router
│ │ └── index.tsx
│ ├── Screens
│ │ ├── Home
│ │ │ ├── index.spec.ts
│ │ │ ├── index.ts
│ │ │ └── styled.ts
│ ├── Services
│ │ ├── API
│ │ │ └── HTTP
│ │ │ ├── Http.d.ts
│ │ │ ├── index.spec.ts
│ │ │ └── index.ts
│ │ ├── DeeplinkService.tsx
│ │ └── index.ts
│ └── Styled
│ └── index.tsx
├── static
│ └── images
│ └── testImage.png
├── storybook
│ ├── stories
│ │ └── TestAtom.story.tsx
│ ├── addons.ts
│ ├── index.ts
│ ├── rn-addons.ts
│ ├── tsconfig.json
│ └── webpack.config.js
├── test
│ ├── Helpers
│ │ └── render.tsx
│ ├── jest.setup.ts
│ ├── mocks.ts
│ └── tsconfig.jest.json
├── tsconfig.json
├── app.json
├── babel.config.js
├── global.d.ts
├── index.js
├── jest.config.js
├── metro.config.js
└── package.json