Skip to main content

publica.la Mobile App

Description​

Mobile application developed with React Native CLI that allows users to access the publica.la platform from iOS and Android mobile devices.

Core Module (fenice)​

This application uses the fenice module as its functional core. This module is defined in package.json as a local dependency through a symbolic link:

{
  "dependencies": {
    "fenice": "link:../fenice"
  }
}

This configuration allows using the fenice module like any other npm package, maintaining local development capability and real-time updates. The module, located in the ../fenice directory, contains all the business logic and main functionalities of the application, including:

  • Publication and content management
  • Reading and playback system
  • Download and storage management
  • State and data management
  • API services and backend communication
  • Shared UI/UX components

The mobile application acts as a presentation layer that implements these functionalities in an iOS or Android environment using React Native. By using fenice as an npm module:

  • Modular and organized development is maintained
  • Core code updating and maintenance is facilitated
  • Functional consistency is ensured with other platforms that also use the module

System Requirements​

  • Node.js >= 18
  • Yarn 1.22.22
  • Xcode (for iOS development)
  • Android Studio (for Android development)
  • CocoaPods (for iOS dependencies)

Installation​

  1. Install dependencies:
yarn install
  1. For iOS, install CocoaPods dependencies:
cd ios && pod install

Available Scripts​

Development​

  • yarn start - Starts the Metro bundler
  • yarn android - Starts the Metro bundler and runs the app on Android
  • yarn ios - Starts the Metro bundler and runs the app on iOS
  • yarn ios-device - Starts the Metro bundler and runs the app on a physical iOS device

Testing​

  • yarn test - Runs the tests
  • yarn lint - Runs the linter

Building (Deprecated. Use Fenice scripts instead)​

  • yarn clean - Cleans the Android build
  • yarn prepare_ios - Prepares the iOS environment
  • yarn build_ios - Builds the iOS app
  • yarn build_android - Builds the Android app
  • yarn export_archive - Exports the iOS archive

Utilities​

  • yarn create_keystore - Creates a keystore for Android
  • yarn get_sha1 - Gets the SHA1 from the keystore
  • yarn get_FB_token {SHA1} - Gets the Facebook token from a SHA1 token
  • yarn take_screenshots - Automates screenshot capture for the stores. Supports the following formats:
    • yarn take_screenshots - Captures all screens on all devices (iOS and Android)
    • yarn take_screenshots ios - Captures only iOS screens in all sizes (phone_small, phone_big, tablet)
    • yarn take_screenshots android - Captures only Android screens in all sizes (phone, tablet_small, tablet_big)
    • yarn take_screenshots ios phone_small - Captures only iOS screens on small iPhone
    • yarn take_screenshots ios phone_big - Captures only iOS screens on large iPhone
    • yarn take_screenshots ios tablet - Captures only iOS screens on iPad
    • yarn take_screenshots android phone - Captures only Android screens on phone
    • yarn take_screenshots android tablet_small - Captures only Android screens on small tablet
    • yarn take_screenshots android tablet_big - Captures only Android screens on large tablet
    • Additional options:
      • --skip-build - Skips the build process and only runs captures (e.g.: yarn take_screenshots ios --skip-build)

Project Structure​

mobile/
├── android/          # Android native configuration and code
├── ios/              # iOS native configuration and code
├── src/              # Application source code
├── __tests__/        # Tests
├── e2e/              # End-to-end tests with Detox
├── node_scripts/     # Utility scripts
└── builds/           # Generated builds

Main Dependencies​

  • @react-navigation/native
  • @react-navigation/native-stack
  • @react-navigation/bottom-tabs

State​

  • react-redux
  • redux
  • redux-persist
  • redux-thunk

UI/UX​

  • react-native-elements
  • react-native-vector-icons
  • react-native-svg
  • react-native-linear-gradient
  • react-native-toast-message

Authentication​

  • @react-native-google-signin/google-signin
  • @invertase/react-native-apple-authentication
  • react-native-fbsdk-next

Analytics and Monitoring​

  • @react-native-firebase/analytics
  • @react-native-firebase/messaging
  • @sentry/react-native

Storage​

  • @react-native-async-storage/async-storage
  • @dr.pogodin/react-native-fs
  • react-native-blob-util

Environment Configuration​

The project uses environment variables through react-native-dotenv. Specific configurations for each environment can be found in the corresponding files in the env/ folder.

Testing​

The project includes:

  • Jest for unit testing
  • Detox for end-to-end testing
  • ESLint for linting
  • Prettier for code formatting

CI/CD​

The project is currently not configured for automated CI/CD in GitLab, but it has Node.js scripts that facilitate certain automations:

Automation Scripts​

  • Build Construction (Deprecated. Use Fenice scripts instead)

    • build_android - Builds APK and AAB for Android with environment-specific configuration

    • build_ios - Builds an iOS Archive with environment-specific configuration and exports it in ad-hoc mode (internal testing)

    • Examples:

      yarn build_android     # Build APK and AAB
      yarn build_android -b  # Build AAB
      yarn build_ios         # Build iOS Archive and export in ad-hoc mode

Note: The scripts are designed to be run locally. To implement complete CI/CD, GitLab pipelines would need to be configured and existing scripts would need to be adapted.

X

Graph View