DreamWalk React-Native Template

Getting started

Initialise a project with the command

npx react-native init ProjectName --template @dreamwalk-os/react-native-apollo-template

This template is configured to use yarn. Once project has been initialised from template, run yarn; npx pod-install

Build Environments

Dev

• Attached to dev backend, used for local development and pushing to DreamWalk Beta platform for internal builds
• Reads from .env.development env file

UAT

• Attached to UAT backend, used for pushing to DreamWalk Beta platform
• Reads from .env.uat env file

Production

• Attached to Production backend, used for pushing to App Store/Play Store.
• Using clients Apple Developer account/Google Play production keystore
• Reads from .env.production env file

Configure app icons

The template is configured to use differenet app icons for dev, UAT, and production environments.

For iOS: In Images asset catalog there is placeholder for each variants app icon which you must populate:

AppIcon Dev
AppIcon UAT
AppIcon

For Android: You must create image assets within all of the android/app/src/main/res/mipmap-XXX directories for the following:

ic_launcher
ic_launcher_round
ic_launcher_dev
ic_launcher_dev_round
ic_launcher_uat
ic_launcher_uat_round

This is easily achieved by creating a new Image Asset from within Android Studio and naming appropriately.

See the Android Studio docs for more information

Configure splash screen

This template uses react-native-bootsplash for handling splash screen. A default DreamWalk logo has been used but can be overridden. Generate a high res asset to be used as the splash image and run:

yarn react-native generate-bootsplash <logoPath>

Generate a launch screen using an original logo file (PNG or SVG)

Options:
  --background <color>  color used as launch screen background (in hexadecimal format) (default: "#fff")
  --logo-width <width>        logo width at @1x (in dp - we recommend approximately ~100) (default: 100)
  --assets-output [path]        path to your static assets directory (useful to require the logo file in JS)
  --flavor <flavor>           [android only] flavor build variant (outputs in an android resource directory other than "main")
  --platforms <platforms>     platforms to generate assets for (comma separated) (default: "android,ios")
  -h, --help                  output usage information

Full command usage example

yarn react-native generate-bootsplash assets/bootsplash_logo_original.png \
  --background=F5FCFF \
  --logo-width=100 \
  --assets-output=assets \
  --flavor=main \
  --platforms=android,ios

See the react-native-bootplash docs for more information

Configure Instabug

This template is configured to use Instabug for bug reporting in release variants of dev and UAT builds.

You'll need to create dev and UAT apps under DreamWalks Instabug account and put token into the instabug.init() call found in App.tsx

GraphQL

Setup

Configure the schema under src/graphql/codegen.yml to point to the GraphQL endpoint for the project.

• Store queries and mutations under the following paths for them to be picked up by codegen: ['src/features/*/graphql/*.graphql', 'src/graphql/**/*.graphql', 'src/graphql/*.graphql']

Generating GraphQL

This application uses GraphQL CodeGen to automatically generate hooks and typescript typings for all our GraphQL queries and mutations.

Running yarn codegen will generate typescript Apollo hooks for any .graphql files in the the src/graphql/ directory or in the graphql subdirectory of a feature.

Versioning

Use one of the following bump scripts to increment versions. This will apply new version and build numbers across all iOS targets and Android.

npx bump
npx bump:major
npx bump:minor
npx bump:patch

These can be combined with the following flags:

Options:
  --type [major|minor|patch]           SemVer release type, optional if --skip-semver-for all is passed
  --skip-semver-for [android|ios|all]  Skips bump SemVer for specified platform
  --skip-code-for [android|ios|all]    Skips bump version codes for specified platform
  --semver                             Pass release version if known. Overwrites calculated SemVer. Optional.
  -h, --help                           output usage information

See the react-native-cli-bump-version docs for more information

Troubleshooting

Script stuck downloading

If you're install script is stuck endlessly downloading and/or stuck with last log:

idealTree: timing arborist:ctor Completed in 1ms

Verify you have yarn installed and re-run the init script. Yarn is required for this template

Permission denied (publickey)# DreamWalk React-Native Template

Getting started

Initialise a project with the command

npx react-native init ProjectName --template @dreamwalk-os/react-native-apollo-template

This template is configured to use yarn. Once project has been initialised from template, run yarn; npx pod-install

Configure splash screen

This template uses react-native-bootsplash for handling splash screen. A default DreamWalk logo has been used but can be overridden. Generate a high res asset to be used as the splash image and run:

yarn react-native generate-bootsplash <logoPath>

Generate a launch screen using an original logo file (PNG or SVG)

Options:
  --background-color <color>  color used as launch screen background (in hexadecimal format) (default: "#fff")
  --logo-width <width>        logo width at @1x (in dp - we recommend approximately ~100) (default: 100)
  --assets-path [path]        path to your static assets directory (useful to require the logo file in JS)
  --flavor <flavor>           [android only] flavor build variant (outputs in an android resource directory other than "main")
  --platforms <platforms>     platforms to generate assets for (comma separated) (default: "android,ios")
  -h, --help                  output usage information

Full command usage example

yarn react-native generate-bootsplash assets/bootsplash_logo_original.png \
  --background-color=F5FCFF \
  --logo-width=100 \
  --assets-path=assets \
  --flavor=main \
  --platforms=android,ios

See the react-native-bootplash docs for more information

Build Environments

Dev

• Attached to dev backend, used for local development and pushing to DreamWalk Beta platform for internal builds
• Reads from .env.development env file

UAT

• Attached to UAT backend, used for pushing to DreamWalk Beta platform
• Reads from .env.uat env file

Production

• Attached to Production backend, used for pushing to App Store/Play Store.
• Using clients Apple Developer account/Google Play production keystore
• Reads from .env.production env file

GraphQL

Setup

Configure the schema under src/graphql/codegen.yml to point to the GraphQL endpoint for the project.

• Store queries and mutations under the following paths for them to be picked up by codegen: ['src/features/*/graphql/*.graphql', 'src/graphql/**/*.graphql', 'src/graphql/*.graphql']

Generating GraphQL

This application uses GraphQL CodeGen to automatically generate hooks and typescript typings for all our GraphQL queries and mutations.

Running yarn codegen will generate typescript Apollo hooks for any .graphql files in the the src/graphql/ directory or in the graphql subdirectory of a feature.

Versioning

Use one of the following bump scripts to increment versions. This will apply new version and build numbers across all iOS targets and Android.

npx bump
npx bump:major
npx bump:minor
npx bump:patch

These can be combined with the following flags:

Options:
  --type [major|minor|patch]           SemVer release type, optional if --skip-semver-for all is passed
  --skip-semver-for [android|ios|all]  Skips bump SemVer for specified platform
  --skip-code-for [android|ios|all]    Skips bump version codes for specified platform
  --semver                             Pass release version if known. Overwrites calculated SemVer. Optional.
  -h, --help                           output usage information

See the react-native-cli-bump-version docs for more information

Troubleshooting

Script stuck downloading

If you're install script is stuck endlessly downloading and/or stuck with last log:

idealTree: timing arborist:ctor Completed in 1ms

Verify you have yarn installed and re-run the init script. Yarn is required for this template

Permission denied (publickey)

ins

[email protected]: Permission denied (publickey).
fatal: Could not read from remote repository.

Verify you have your ssh key added to keychain with

ssh-add --apple-use-keychain ~/.ssh/id_rsa

then re-run the init script

[email protected]: Permission denied (publickey).
fatal: Could not read from remote repository.

Verify you have your ssh key added to keychain with

ssh-add --apple-use-keychain ~/.ssh/id_rsa

then re-run the init script