@mob.dev/expo-template

Expo template

Our Recommended template for Expo projects.

---

All of the changes by version can be found in CHANGELOG.

Prerequisites

Expo development environment on your machine

Install globally on your device expo cli

npm install -g expo-cli

Create new project

expo init -t '@mob.dev/expo-template' --no-install

cd Your_Project_Name

Folder structure

Folder: root

• api: Generated files from backend. Typescript types and hooks to call api

• src: Source folder that contains whole app logic and UI

  • assets:

    • icons: svg files that are transformed into React Native components
    • images: png files

  • components - done by standard of atomic design:

    • atoms: smaller UI components that do one thing
    • molecules: UI components that consist of multiple atoms

  • constants: some constants used throughout the app

  • helpers: some files that help in the app

  • hooks: custom hooks that can be used throughout the app

  • navigation: configuration for navigation

  • screens: screens, used in navigation, and they contain logic and layout

  • store: redux store for global storage, also is persisted for offline storage. For persisting data it uses secure storage

Running the app

Install packages

yarn

Find files that start with this word and replace it with . (dot)

replaceThisWordWithDot-

To start local metro server with JS code bundled

yarn start

(if you don't start it, one of the yarn ios/android commands will do it for you before installing the app to your device/simulator)

yarn android

Running it on your device as a standalone app, connect it with a cable, make sure you have ADB installed

yarn android:installToDevice

yarn ios

Running the app on device

yarn ios:installReleaseToDevice

Triggering command to create development build in Expo EAS services that can be installed on simulator

yarn ios:createDevelopmentBuildForSimulator

Commiting

In this project going forward we will use conventional commits as a new standard.

In addition we will follow semantic versioning.

This is so we can easily generate new changelog.

• Commiting:
  • git commit: This will run CLI interface to easily create commit messages that follow conventional commits logic
  • commitizen: It will guide you and prompt you options to choose from so you follow the standard. At the end it will open the editor in terminal with your commit message. All you have to do is type in :q to exit and save
• Generate CHANGELOG.md from your commits that follow conventional standard:
  • Library used commit-and-tag-version which is a fork of standard-version:
  • To bump up the version in package.json version of this repo and generate changelog:
    • yarn release:patch: (0.0.X)
    • yarn release:minor: (0.X.0)
    • yarn release:major: (X.0.0)

Generate CHANGELOG.md

• Generate CHANGELOG.md from your commits that follow conventional standard:
  • Library used commit-and-tag-version which is a fork of standard-version:
  • To bump up the version in package.json version of this repo and generate changelog:
    • yarn release:patch: (0.0.X)
    • yarn release:minor: (0.X.0)
    • yarn release:major: (X.0.0)

Making sure that the code is written by standards

Check this blog

• ESlint
• Prettier
• Husky

Generate production version

Android

Creates APK file in expo

yarn android:releaseToExpo

Creates AAB file

yarn android:prepareForGooglePlay