Verificando autenticación…

Skip to main content

React Native Template

Purpose and Scope​

Purpose: LatamPassMobile is a mobile application developed in React Native with the goal of providing users of the LATAM Pass loyalty program with a comprehensive platform to manage their account, access relevant program information, perform transactions, and take advantage of exclusive benefits.

Scope: The application includes features such as:

  • LATAM Pass user account management.
  • Points and miles balance inquiry.
  • Flight search and redemption.
  • Access to program offers and promotions.
  • Information about earning points with partner airlines and merchants.
  • Display of educational content about the LATAM Pass program.
  • Integration with Co-branding services (e.g., Itaú).
  • Personalized notifications and alerts.
  • Interaction with analytics and monitoring services (Firebase, Dynatrace).
  • Secure authentication through Auth0.
  • Multi-language support (Spanish, Portuguese, English).

Architecture​

The application follows a React Native-based architecture, leveraging native components for iOS and Android. It is structured into main functional modules (Core, Design System, Flight Search, Member Information, etc.) that interact with each other.

  • Core: Cross-cutting features such as authentication, navigation, internationalization, environment configuration, and base services.
  • Design System: Reusable UI components and visual themes.
  • Business Modules: Specific logic for flight search, member information, educational content, marketing, etc.
  • External Integrations: Connection with services such as Auth0 (authentication), Firebase (analytics, remote config, crashlytics), Dynatrace (performance monitoring), Salesforce Marketing Cloud (notifications), Medallia (feedback).

Stack and tab navigation provided by @react-navigation is used.

LatamPassMobile App
|-- React Native Core
|   |-- JavaScript/TypeScript Logic
|   |-- Native Modules (iOS/Android)
|
|-- Main Modules (@latam-pass-mobile/*)
|   |-- Core (auth, navigation, i18n, storage, etc.)
|   |-- Design System (UI components)
|   |-- Member Information
|   |-- Flight Search
|   |-- Marketing
|   |-- Cobranded
|   |-- Educational Content
|
|-- Third-Party Integrations
|   |-- Auth0 (Authentication)
|   |-- Firebase (Analytics, Crashlytics, Remote Config)
|   |-- Dynatrace (APM)
|   |-- Salesforce Marketing Cloud (Push Notifications)
|   |-- Medallia (Feedback)
|
|-- Native Platforms
    |-- iOS (Objective-C/Swift, CocoaPods)
    |-- Android (Java/Kotlin, Gradle)

It is recommended to generate a more detailed architecture diagram and store it in a repository or diagramming tool.

Technologies and Dependencies​

Main:

  • Language: TypeScript, JavaScript
  • Framework: React Native 0.71.11
  • Package Manager: Yarn
  • Navigation: @react-navigation/native, @react-navigation/bottom-tabs, @react-navigation/material-top-tabs, @react-navigation/native-stack
  • State (implicit, may use Context API or Redux not directly specified): React Context API (evident in src/contexts)
  • Styles: styled-components, @latam-pass-mobile/design-system
  • UI Components: @latam-pass-mobile/design-system, react-native-svg, react-native-linear-gradient, react-native-fast-image, react-native-gesture-handler, react-native-reanimated
  • Forms: react-hook-form, @hookform/resolvers, yup (for validation)
  • API Communication: axios
  • Internationalization (i18n): i18next, react-i18next
  • Build Tools (iOS): CocoaPods
  • Build Tools (Android): Gradle
  • CI/CD: Jenkins, Fastlane

Key Dependencies (from package.json and configuration files):

  • Authentication: react-native-auth0
  • Secure Storage: react-native-sensitive-info, react-native-keychain
  • Local Storage: @react-native-async-storage/async-storage
  • Remote Configuration/Environment Variables: react-native-config, @react-native-firebase/remote-config
  • Analytics and Monitoring:
    • @dynatrace/react-native-plugin
    • @react-native-firebase/app
    • @react-native-firebase/analytics
    • @react-native-firebase/crashlytics
    • reactotron-react-native (for debugging)
  • Notifications:
    • react-native-notifications
    • react-native-marketingcloudsdk (Salesforce Marketing Cloud)
  • Native Permissions: react-native-permissions
  • Device Information: react-native-device-info
  • WebView/InAppBrowser: react-native-webview, react-native-inappbrowser-reborn
  • Testing: jest, @testing-library/react-native, @testing-library/jest-native
  • Linting/Formatting: ESLint (@react-native-community/eslint-config), Prettier
  • Git Hooks: Husky, commitlint
  • Patch Management: patch-package
  • Feedback: medallia-digital-rn
  • Fonts: Custom assets in @latam-pass-mobile/design-system/assets/fonts

Local Setup​

Prerequisites​

  • Node.js (version specified in .node-version, currently 18)
  • Yarn (package manager)
  • Watchman (recommended for React Native)
  • Xcode and CocoaPods (for iOS development)
  • Android Studio, Android SDK and NDK (version 23.1.7779620 specified in android/build.gradle) (for Android development)
  • JDK (usually included with Android Studio or managed independently)
  • React Native CLI (npx react-native)

Setup Steps​

  1. Clone the repository: Follow these steps

  2. Configure Artifactory: Make sure you have a .yarnrc and/or .npmrc file in the project root configured to point to LATAM's Artifactory repositories. .yarnrc content (or similar .npmrc):

    registry=https://artifactoryrepo1.appslatam.com/artifactory/api/npm/npmjs-org/
    @latam-pass-mobile:registry=https://artifactoryrepo1.appslatam.com/artifactory/api/npm/corp-libs-npm-release-local/

    always-auth=true

    //artifactoryrepo1.appslatam.com/artifactory/api/npm/corp-libs-npm-release-local/:_authToken=${AUTH_NPM_TOKEN}
    //artifactoryrepo1.appslatam.com/artifactory/api/npm/npmjs-org/:_authToken=${AUTH_NPM_TOKEN}

    Obtain your AUTH_NPM_TOKEN from JFrog Artifactory (Identity Token) and configure it as an environment variable:

    export AUTH_NPM_TOKEN=YOUR_IDENTITY_TOKEN_HERE

    (Add this to your .bashrc, .zshrc, or similar).

  3. Install Dependencies:

    yarn install

  4. Configure Firebase Files: Obtain the Firebase configuration files from the Firebase project console:

    • For iOS: GoogleService-Info.plist. Place it in ios/GoogleService-Info.plist.
    • For Android: google-services.json. Place it in android/app/google-services.json. (These files are in .gitignore and must be obtained separately).

  5. Platform-Specific Configuration:

    • iOS: 
      cd ios
      pod install
      cd ..
      It may be necessary to run npx react-native setup-ios-permissions.
    • Android: Make sure you have local.properties configured in android/ with the path to your Android SDK if it is not in the default location (Android Studio usually handles this).

  6. Create Environment Files: Copy the .env.example files (if they exist) to .env.dev, .env.intg, .env.prod as needed and configure the specific environment variables. Example: .env.dev for development.

  7. Run the Application:

    • Start Metro Bundler: 
      yarn start
    • Run on Android (development environment): 
      yarn run:android:dev
    • Run on iOS (development environment): 
      yarn run:ios:dev
      (See other scripts in package.json for different environments: intg, prod).

  8. Clear Caches and Reinstall (if there are issues):

    yarn dep-install

    This custom script clears node_modules, reinstalls dependencies, and clears Gradle and Pods caches.

  9. Debugging:

    • Reactotron: Make sure you have Reactotron Desktop installed.
    • For Android, run: 
      adb reverse tcp:9090 tcp:9090
    • For iOS, it usually works without additional steps if Reactotron is configured.

Deployment​

The application uses Jenkins and Fastlane for deployments.

Jenkins: The Jenkinsfile defines the pipeline:

pipelineLatam("gke-krane-react")

This suggests a standardized corporate pipeline for React applications (possibly React Native).

Fastlane (iOS): Located in ios/fastlane/.

  • Configuration: Appfile, Matchfile, Fastfile, models/Config.rb.
  • Handles code signing (match), building (gym), and uploading to TestFlight.
  • Common commands (run from ios/):
    • bundle exec fastlane ios release_dev
    • bundle exec fastlane ios release_int
    • bundle exec fastlane ios release_prd
    • bundle exec fastlane ios fetch_certificates
    • bundle exec fastlane ios renew_certificates

Fastlane (Android): Located in android/fastlane/.

  • Configuration: Appfile, Fastfile.
  • Handles APK/AAB building (gradle) and distribution to Firebase App Distribution.
  • Common commands (run from android/):
    • bundle exec fastlane android build_dev (generates APK for Dev)
    • bundle exec fastlane android release_dev (distributes to Firebase App Distribution for Dev)
    • (Similar commands for intg and prod).

Deployment Environment Variables: Fastlane and build scripts depend on environment variables for keystores, Firebase IDs, App Store Connect credentials, etc. (e.g., ANDROID_DEV_KEY_STORE, APP_STORE_CONNECT_KEY_ID). These must be configured in the CI/CD environment.

API Endpoints​

The mobile application consumes backend APIs for its various features (LATAM Pass account management, flight search, etc.). It does not expose APIs directly. Specific endpoints are defined in the corresponding backend services. Base URL configuration for these backend services is managed through environment variables (see react-native-config and .env files).

Backend service configuration example (.env):

MEMBERINFORMATION_MOBILE_BFF=https://api.example.com/member
CHANNELS_MOBILE_BFF=https://api.example.com/channels
AUTH0_DOMAIN=your-auth0-domain.auth0.com
AUTH0_CLIENTID=yourAuth0ClientId
# ...other variables...

Specific Components​

Authentication (Auth0)​

  • Library: react-native-auth0
  • Configuration: Credentials (Domain, ClientID) are managed through react-native-config (variables AUTH0_DOMAIN, AUTH0_CLIENTID).
  • Implementation: See src/hooks/useAuthLogin.tsx for login logic and src/App.tsx for the AuthProvider.
  • Callbacks: Configured in the Auth0 dashboard and in the app's native configuration (iOS Info.plist, Android AndroidManifest.xml/build.gradle).

Firebase​

  • SDKs: @react-native-firebase/app, analytics, crashlytics, remote-config.
  • Native Configuration Files:
    • iOS: ios/GoogleService-Info.plist
    • Android: android/app/google-services.json
  • Additional firebase.json Configuration: 
    {
      "react-native": {
        "google_analytics_automatic_screen_reporting_enabled": false
      }
    }
  • Implementation: Initialization in AppDelegate.mm (iOS) and MainApplication.java (Android). Usage through the @latam-pass-mobile/core modules.

Dynatrace​

  • Plugin: @dynatrace/react-native-plugin
  • Main Configuration (dynatrace.config.js): Defines applicationId, beaconUrl, and behavior for Android and iOS. 
    // dynatrace.config.js
    module.exports = {
      // ...
      android: {
        config: `
            dynatrace {
                configurations {
                    defaultConfig {
                        autoStart {
                            applicationId 'a8b9d0f0-bd5a-4dcc-8378-bcd97b23b25a'
                            beaconUrl 'https://bf94499thn.bf.dynatrace.com/mbeacon'
                        }
                        // ...
                    }
                }
            }`,
      },
      ios: {
        config: `
            <key>DTXApplicationID</key>
            <string>a8b9d0f0-bd5a-4dcc-8378-bcd97b23b25a</string>
            <key>DTXBeaconURL</key>
            <string>https://bf94499thn.bf.dynatrace.com/mbeacon</string>
            // ...
            `,
      },
    };
  • Integration:
    • metro.config.js: reporter: require('@dynatrace/react-native-plugin/lib/dynatrace-reporter')
    • babel.config.js: Adds the Dynatrace JSX plugin.
    • index.js: Initializes Dynatrace.applyUserPrivacyOptions.
    • customTransformer.js: Uses dynatrace-transformer.
  • User Identification: Dynatrace.identifyUser(userInfo.FFNumber); in src/utils/analytics.ts.

Push Notifications (Salesforce Marketing Cloud)​

  • Libraries: react-native-marketingcloudsdk, react-native-notifications.
  • Native Configuration:
    • iOS (AppDelegate.mm): Initialization of SFMCSdk with Salesforce credentials (MID, Server, Token, AppID) obtained from RNCConfig.
    • Android (MainApplication.java): Similar SFMCSdk configuration.
  • Custom Native Module (NotificationModule):
    • iOS: ios/NotificationModule.h, ios/NotificationModule.m
    • Android: android/app/src/main/java/com/latam/pass/NotificationModule.java
    • Exposes methods to interact with the Marketing Cloud SDK (read messages, count unread, etc.).
  • JS Wrapper Service (src/services/NotificationService.ts): Provides a JS interface for the native module.

Native Permissions​

  • Library: react-native-permissions.
  • iOS Configuration (package.json and Info.plist): 
    // package.json -> reactNativePermissionsIOS
    "reactNativePermissionsIOS": [
      "FaceID",
      "Notifications"
    ]
    Ensure that usage descriptions (e.g., NSFaceIDUsageDescription) are in Info.plist.
  • Android Configuration (AndroidManifest.xml): Declare permissions such as android.permission.POST_NOTIFICATIONS.
  • Implementation: Used in src/contexts/Notification/index.tsx and src/screens/HomeScreen/HomeScreen.tsx to request and verify permissions.

Reactotron (Debugging)​

  • Libraries: reactotron-react-native, reactotron-core-client.
  • Configuration: src/config/reactotron.ts. Conditionally imported in index.js for development builds.
  • Usage: Connect with the Reactotron desktop application.

Medallia (Feedback)​

  • Library: medallia-digital-rn.
  • Initialization: In src/App.tsx using environment tokens. 
    let token = Platform.OS === "ios" ? environment.MEDALLIA_IOS_TOKEN : environment.MEDALLIA_ANDROID_TOKEN;
    MedalliaDigital.initialize(token);
  • Usage: Display feedback forms (e.g., src/screens/MenuScreen/index.tsx).

Testing​

  • Framework: Jest (configured in jest.config.js).
  • Utilities: @testing-library/react-native, @testing-library/jest-native.
  • Command to run tests: 
    yarn test
    This includes coverage report generation.
  • Coverage Configuration (jest.config.js): 
    coverageThreshold: {
      global: {
        lines: 80,
      },
    },
    collectCoverageFrom: [
      './src/**',
      '!./src/**/*.styles.ts',
      // ... exclusions ...
    ],
  • Mocks: Found in the __mocks__/ folder for native or external libraries.

Security Considerations​

  • Credential Management:
    • AUTH_NPM_TOKEN for Artifactory must be an environment variable and not hardcoded.
    • API keys and secrets for services such as Auth0, Firebase, Dynatrace, Salesforce Marketing Cloud, and Medallia are managed through react-native-config and .env files that should not be versioned (except examples).
    • Firebase configuration files (GoogleService-Info.plist, google-services.json) are in .gitignore and must be managed securely.
  • Secure Storage:
    • react-native-sensitive-info and react-native-keychain are used to store sensitive data on the device securely.
    • Session tokens (Auth0) are stored securely.
  • Local Authentication:
    • Biometric authentication (FaceID/Fingerprint) is implemented to protect access to the application after the initial login.
  • Communication:
    • Ensure that all communications with backend APIs are performed over HTTPS.
  • Permissions:
    • Only the minimum permissions necessary for the app to function are requested.
  • Error Handling and Logs:
    • Crashlytics is used for error reporting.
    • Avoid logging sensitive information in production. Dynatrace and Firebase Analytics should be configured to respect user privacy.
  • Security Updates: Keep dependencies updated to mitigate known vulnerabilities.