code architecture

Code architecture

Top-level directory

• .idea => Android Studio configuration
• android => Android native project
• app => React Native code ("JS part")
• assets => static assets (images, fonts, icons, translations, ...)
• ios => iOS native project
• jsonapi => [Obsolete] Fake JSON data
• svgs => SVG files used to build the icon font in Icomoon
• Some dotfiles => global configuration
• README.md => Read it first
• app.json => [Obsolete] Seems to ba a app name
• docker-compose.yml => [Obsolete] Docker configuration for old Jenkins build
• index.js => Everything starts here (root JS source file)
• package.json => JS part properties and node modules declaration
• rn-cli.config.js => Configuration of React Native bundler, used to build directly from Typescript
• tsconfig.json => Typescript configuration
• tslint.json => TSLint configuration

Android project directory

(Only representative files and directories)

android

• app => Pocket project
  • src => Java source code
  • build.gradle => Build configuration for Pocket
  • google-services => Configuration for Google Firebase services
• build.gradle => Build configuration for Android
• gradlew and gradlew.bat => Bridge to gradle
• settings.gradle => Other Gradle settings

iOS project directory

(Only representative files and directories)

ios

• mobileapp.xcworkspace => Xcode project workspace
• mobileapp.xcodeproj => Xcode project file
• mobileapp => Xcode project content and source code
• Podfile => iOS native dependencies declaration

JS part

app

• homework, mailbox, timeline and user => Pocket tabs source code
• infra => Modules that are Pocket-wide
• navigation => Global routing definition
• styles => Styles definition
• tracking => Tracking module
• ui => Reusable UI components
• utils => Reusable code tools
• AppModules.ts => Definition of Pocket tabs
• AppScreen.ts => Root Navigation wrapper
• AppStore.ts => Application wrapper
• (Conf.ts) => Override platform configuration (generated)
• pushNotifications.ts => push-notifs handler

Things that need to be fixed

• Remove unused projects on iOS
• Define styles in styles/
• Move pushNotifications.ts in infra/
• Distinguish between infra and utils
• What is app.json ?

Pocket tab architecture

The way you implement a tab is up to you, but there some key concepts you may use :

• index.ts => imports for this tab (root component, reducer, and route config)
• config.ts => constants for displaying this tab (apart from index.ts to avoid circular deps)
• navigator.ts => route definition
• actionsTypes/ => Redux action types declaration
• actions/ => Actions & thunks
• components/ => Dumb React components
• containers/ => React containers
• reducer/ => Redux reducer and sub-reducers for this tab

Each of these files and directories will be detailed in this wiki.