NDA-Protected Case Study
MIGRATING A NATIVE MOBILE APP TO REACT NATIVE
About The Client
The company is focused on helping consumers save money during online shopping. They quickly gained popularity, attracting a large number of users, and eventually launched a mobile app that now serves millions. The mobile app is well-liked, with about 3000 reviews on the App Store and an impressive average rating of 4.9 out of 5 stars.
Challenge
Managing Separate Codebases for iOS and Android
When the client came to us, they were already a significant player in their market with a strong mobile app presence. However, they faced a major challenge: they were managing two separate native mobile apps, one for iOS and another for Android. It led to inefficiencies and placed a heavy maintenance burden on their team, which required hiring two separate development teams.
On top of that, their internal development team needed support and guidance to smoothly transition to a unified codebase using React Native. While some team members had a basic understanding of React, it wasn't enough to handle the extensive migration required for a seamless solution.
This is a common issue across industries. Companies often manage separate codebases for iOS and Android, which results in:
Resource Overhead: Handling two codebases means maintaining separate development teams, leading to higher costs and complexity.
Development Inefficiencies: Separate codebases extend development timelines, increase costs, and create inefficiencies.
Expertise Shortfall: Many businesses lack the in-house skills to move to a unified codebase, slowing down the adoption of cross-platform solutions like React Native.
User Experience Consistency: Managing separate codebases can lead to inconsistent user experiences, impacting customer satisfaction.
Solution
Migrating Native Apps to React Native
To tackle the challenges, the customer chose a modern and efficient solution: developing a cross-platform mobile app using React Native.
This approach allows them to consolidate their efforts into a single app supported by a unified development team, eliminating the need to manage two separate codebases. It simplifies the development process and reduces maintenance costs—an important step in their quest for greater efficiency.
With their brand’s popularity and established market presence, the customer sought an experienced partner to ensure that the new React Native app would be as successful as the existing native apps. After a few meetings where they discussed the technical aspects of the app with our Engineering Manager, Norbert, and confirmed our deep expertise in modern technology, they decided to collaborate with us.
We put together a dedicated team of four experts to ensure the migration from the native apps to a single React Native app was smooth and efficient.
Kornel Kwiatkowski
React Native Developer
Michal Moroz
React Native Developer
Daniel Nizynski
React Native Developer
Adam Chylinski
Senior Project Manager
Scrum Master
Want to migrate your app to React Native?
Tech Stack
React Native
Expo
Typescript
Tailwind CSS
Storybook
Why React Native?
React Native was an ideal choice for the customer for several key reasons:
Firstly, its cross-platform capabilities perfectly matched the customer’s goal of maintaining a unified codebase for both iOS and Android. It eliminated the need to manage two separate codebases, simplifying their development process and reducing resource demands.
Secondly, React Native offered a complete set of tools that improved our development work and helped us deliver a smoother and feature-rich user experience. We utilized essential libraries like:
Reanimated2 for complex animations
React Query for seamless API communication with robust error handling
and FlashList for optimized list management.
- dev insight
- dev insight
- dev insight
- dev insight
- dev insight
- dev insight
- dev insight
- dev insight
- dev insight
The app featured several animations designed to enhance the user experience, and Reanimated2 proved to be the optimal choice due to its versatile abstraction for the interface API embedded in React Native's Animated library. This provided us with greater control over animation implementation, ensuring a seamless and engaging user experience.
Michał MorozReact Native Developer
Why Expo?
When considering Expo for a project, one might initially be concerned about its perceived limitations, such as restricted access to native code—an essential factor for integrating features like data analytics tracking. However, Expo has effectively addressed these concerns by offering robust libraries and support for tracking data analytics, soothing these worries.
Reasons for Choosing Expo:
User-Friendly and Rapid Testing: Expo is known for its ease of use, making it an excellent choice for developers who want to quickly prototype, test, and deploy React Native applications. The platform allows for real-time updates and instant testing on physical devices, which accelerates the development process.
Comprehensive Toolset: Expo offers a suite of tools that simplifies the integration of various device functionalities, like:
Location Services: Expo provides easy access to the device's GPS and other location-based services, which is crucial for apps that require geolocation features.
Lottie Animations: Integrating high-quality animations is made simple with Expo, which supports Lottie files, enhancing the user experience without complicating the codebase.
Splash Screens: Expo includes built-in tools for managing splash screens, ensuring that the app maintains a professional appearance during loading times.
Performance and Functionality: Expo’s capabilities allow developers to build apps that are not only robust but also meet high-performance standards. By using Expo, the development process is streamlined without sacrificing the app’s quality or functionality.
Versatile Feature Set: Expo’s extensive range of features and libraries makes it versatile enough to handle various project requirements, making it a strong candidate for React Native projects that require both flexibility and efficiency.
Why TypeScript?
TypeScript has become our standard choice for projects due to its robust static typing system, which enhances code quality and reduces runtime errors, resulting in more reliable and maintainable applications.
Why Tailwind CSS?
Tailwind CSS gives developers high efficiency in styling React Native apps.
Its styling approach, reminiscent of HTML styling using classes, enables us to rapidly create components by using pre-defined classes. Unlike styled-components, Tailwind's approach results in cleaner code, and the use of ready-made classes significantly reduces component development time, allowing us to focus on building functionality rather than spending excessive time on styling.
Why Storybook?
Storybook was an essential tool in our project, particularly during the UI development phase. It allowed us to present UI components to our client in a highly interactive and visual way, showcasing various states and adaptations, such as toggling between dark and light modes. This early-stage visualization was crucial, as it provided the client with a comprehensive view of the UI elements before we proceeded to the more extensive full-screen development. By enabling the client to review and approve these components early on, we minimized the risk of significant changes later in the project, which helped streamline the overall development process.
Additionally, Storybook played a vital role in our internal workflow. It offered our developers easy access to inspect and test individual components throughout the project. It allowed us to ensure that each component functioned as intended across different scenarios and use cases. The ability to isolate and refine components independently of the full application greatly improved our efficiency, leading to a more robust and maintainable final product.
Source: Storybook.js.org
Development
Kick Off
Sprint 1
Sprint 2
Sprint 3
Sprint 4
Sprint 5
Sprint 6
Kick Off
Kick Off
Getting to know API structure & documentation
Setting up the project boilerplate - React Native, Expo, TypeScript
Setting up Storybook
Setting up builds and web Storybook preview
Sprint 1
Preparing static components library
Typography Buttons
Form controls
Modal alert component
Advert carousel component
Menu List component
Rewards List component
Categories List Component
Sprint 2
Mobile App Setup
Deep linking feature
Setup App Notifications
Setup App Navigation
Setup API tools
Setup analytics tool
Setup logger to catch errors (Sentry)
Handle light/dark theme
Sprint 3
Authorization Screens
Main Screen
Details Screen
Reward Success Screen + Code Screen
Terms and Conditions Screen
Profile Management Screen
Signup Screen
Sprint 4
Favourites, FAQ and Modals
Verify your account pin
Screens
Deletion
Account Screens
Onboarding Screens
Your savings Screen (3 Screens)
Sprint 5
Search, Modals & Finalisation
Saved Offers Screen
Notifications Settings Screen
Contact Us
Email Settings Screen
FAQ Screen
Sprint 6
Finalisation
Search Screen
Location Modal
Implement Location restriction (UK restriction)
Tablet support adjustments
Check & fix differences between iOS/AndroidApp
Full App Testing
Code Reviews
- dev insight
- dev insight
- dev insight
- dev insight
- dev insight
- dev insight
- dev insight
- dev insight
- dev insight
We began the development of this project with a clear focus on creating a top-tier React Native application, ensuring it met the high standards expected by our client. The development scope was broad, covering both tablet and mobile device compatibility. We paid special attention to user experience by incorporating both dark and light modes, which are automatically adjusted according to the user's device settings. This feature is very common right now as it improves the app's accessibility but also aligns with modern user expectations for adaptive interfaces.
Kornel KwiatkowskiReact Native Developer
Project Management
We initially adopted the Scrum methodology to manage our project. However, as the unique requirements of the project became more apparent, we transitioned to ScrumBan—a hybrid approach that blends Scrum’s structured framework with Kanban’s flexibility. It allowed us to optimize our workflow, focusing more directly on development tasks.
For example, we decided to eliminate retrospective meetings, using that time to advance our development efforts instead. Our established "Definition of Done" and "Definition of Ready" criteria ensured that our process remained efficient, even with the reduced formal structure. We continued to hold essential daily meetings, reviews (demos), and planning sessions to keep the project on track.
Challenge
UK's app exclusivity
One of the significant challenges we faced was the app's exclusive availability in the UK, while our development team was primarily based in Poland.
To address this, we used VPN technology, which enabled us to simulate a UK-based environment and work on the app as if we were within the region. It ensured seamless collaboration and testing despite the geographical divide.
Results
The decision to build the cross-platform mobile app with React Native enabled the strategic change in the client's development team structure. They transitioned to a single, unified team responsible for managing the one codebase that serves both iOS and Android platforms, resulting in:
reducing app maintenance costs
reducing resource duplication
and boosting overall efficiency in maintaining and improving the app.
Have a project?
Let's talk about it
- THE FORM
- THE FORM
- THE FORM
- THE FORM
- THE FORM
- THE FORM
- THE FORM
- THE FORM
- THE FORM
Tell us more about your project
Please provide detailed information about your challenge, and our tech team will promptly review your submission. Expect to hear from us within 24 hours with tailored next steps and insights based on your request.
Book a Meeting With Our CEO
Upon receiving your form, we typically recommend a briefing meeting with our CEO to explore the specifics of your project. Schedule your meeting now to kickstart a tailored approach.
Chris Lojniewski
CEO & CGO