React Native Migration: Execution and Implementation— Part 2

Embarking on the journey to upgrade our app to React Native 0.72, we meticulously followed a detailed checklist and step-by-step instructions to ensure a smooth and successful migration. This part dives into the execution phase, detailing the essential steps taken during the migration process.

Setting Sail with a Fresh React Native Project

The First Step: A Fresh Start

1. Created a New RN Project: Initialized with the latest React Native version, setting the stage for a clean slate with the newest features and optimizations.
2. Bundle Identifier Transition: Utilized tools to change the bundle identifiers back to the old ones, ensuring our users experienced no disruption in service.
3. Signing Configurations: Added essential signing configurations for both Android and iOS, ensuring our app’s deployments were secure and successful.
4. Fastlane Integration: Incorporated Fastlane to automate and streamline our deployment processes, making our release cycle more efficient.
5. Provisioning Profile Updates: For iOS, we updated provisioning profiles and certificates, guaranteeing the app’s readiness for the App Store.
6. App Center Configuration: Set up App Center for both iOS and Android, enabling us to monitor the app’s performance and gather analytics.

Enhancing Your App

Building the Ship

1. Notification Library Setup: Established initial configurations for push notifications by adding the latest notifications library to our project.
2. Location Services Integration: For apps requiring geolocation, we integrated native code to manage location data effectively.
3. Pusher for Real-Time Communication: Incorporated Pusher to enhance our app with real-time communication features.
4. Google Maps and Branch Integration: Added Google Maps and Branch for improved mapping and deep linking capabilities, enhancing our app’s geo-functionality.
5. UI/UX Enhancements: Implemented updates including splash screens, icons, custom fonts, and theming, significantly improving the app’s visual appeal and user experience.
6. React Navigation for App Navigation: Migrated to React Navigation, ensuring a more intuitive and fluid navigation experience within our app.

Monitoring and Optimization

Sailing Smoothly

1. Integration of Sentry: Set up Sentry for robust error tracking, enhancing our app’s reliability.
2. Heap for Analytics: Implemented Heap to gain insights into user behaviour, helping optimize the app’s performance.
3. Segment for Data Management: Utilized Segment for effective collection and management of user data and analytics.
4. Datadog for Performance Monitoring: Configured Datadog to provide comprehensive monitoring and analytics, offering valuable insights into our app’s performance.
5. Smartlook for User Insights: Integrated Smartlook for recording user sessions and analyzing behaviour, further informing our UX decisions.

Migrating the Code

Transferring the Cargo

1. Navigation Code Migration: Carefully transferred JavaScript files with navigation changes to the new project, adapting them to fit the React Navigation framework.
2. Utility and Data File Relocation: Moved utility functions and data files to their new homes within the updated project structure.

Testing and Quality Assurance

Ensuring a Safe Voyage

1. Comprehensive Feature Testing: Employed Jest alongside the React Native Testing Library to thoroughly test all app functionalities, ensuring compatibility and performance.
2. Manual Testing Across Devices: Conducted extensive manual testing on various devices and operating systems to validate the app’s performance and user experience.

By meticulously following these steps, we navigated through the complexities of the migration process, ensuring our app leveraged the full potential of React Native 0.72. The upcoming final part of our series will explore the outcomes of this migration, focusing on the enhancements achieved, and lessons learned, and providing a detailed migration checklist and the results realized from upgrading to the latest version of React Native.

Part 1
Part 3