Powered by

# Mobile

Welcome to Fanzeal mobile apps repository. This monorepo contains all the React Native source code for Fanzeal apps and other shared packages.

# Table of contents

  • Structure
  • Setup development environment
  • Development
    • Internationalization
    • Coding conventions
    • Internal packages
  • Common issues

# Structure

  • apps - Apps that only use packages and aren't aware of other apps
  • packages - Packages that may use external and/or other monorepo packages

# Setup development environment

Setup your environment using the Expo instructions.

These tools are required to run the app:

# Android

  • Java: one of the easiest ways to get Java installed is using jenv. Read more here.
  • Gradle: brew install gradle

# Development

To run the app, use the following commands:

pnpm ios
pnpm android

Tips:

  • Copy .env.example to .env and fill in any nessary environment variables.
  • Sometimes you'll need to prebuild native code to make sure the app builds correctly. Using this command npx expo prebuild --clean.
  • To clear the cache, using this command npx expo start --clear

# Internationalization

Usage:

import { t } from '@lingui/macro'
import { useLingui } from '@lingui/react'

const { i18n } = useLingui()

t(i18n)`Your string`

Extract & compile

# Extract the messages
pnpm -F mobile intl:extract

# Compile the messages to runtime catalogs
pnpm -F mobile intl:compile

The workflow is as follows:

  1. Wrap messsage in Trans macro or use t function
  2. Run pnpm intl:extract command to generate message catalogs
  3. Translate message catalogs (send them to translators). You can use any tool that supports editing .po format like Poedit
  4. Run pnpm intl:compile to create runtime catalogs
  5. Load the runtime catalog

# Coding conventions

  • Always using alias (@) when importing modules. For example: import { ComponentX } from "@/components/ComponentX".

# Internal packages

We publish our internal packages (E.g: @fzap/**) to AWS CodeArtifact. In order to use these packages, please follow the below steps:

  1. Login to AWS. (Contact Tue or Jason for the account)
  2. Login to AWS CodeArtifact: make codeartifact-login or aws codeartifact login --tool npm --domain fzap --domain-owner 156493436061 --repository fzap
  3. Edit registry configurations in .npmrc. Read more about registry and authentication settings
# .npmrc
# ...other .npmrc settings
@fzap:registry=https://fzap-156493436061.d.codeartifact.us-east-1.amazonaws.com/npm/fzap/
registry=https://registry.npmjs.org/
  1. Run pnpm install to recreate the modules registry since we changed the registry configurations.
  2. Run pnpm add @fzap/** to install the packages similar to other NPM packages.

# Custom components

# Common issues

# Cannot build project on iOS with error code 70

xcodebuild error 70 means that the target for the build was not found. It could be mismatch of iOS versions, parameters, or (if using real device) the UDID being wrong.

# Java version is incompatible

Currently, the app is only compatible with Java 17. Following these steps below to install Java 17:

© Copyright 2024 – w3tech – All rights reserved