Case Study: How We Unified ONEHOPE Wine’s App with React Native
“Working with 8 West has truly changed the way we do business. In my 30 years of experience, I’ve never found a partner who’s so dedicated and collaborative. They’re always thinking about how to improve our platform, performance, and costs, and they’re there whenever we need them—even on weekends and holidays. Their innovative ideas and deep expertise have not only given us real, measurable results but have also completely shifted the way we approach development and innovation. With 8 West, success always feels like a shared effort, and it’s clear they’re fully invested in helping us succeed.”
Elana Gold, Chief Growth Officer, ONEHOPE Wine
The Challenges
The ONEHOPE Wine mobile app was initially developed in Swift and available only on iOS. The client planned to create a separate Android app, which would double development and maintenance efforts. Instead, at 8 West’s suggestion, they transitioned to React Native, enabling a single cross-platform app for both iOS and Android.
The Solution
Our first step was to analyze the existing Swift codebase and thoroughly test the app to understand its functionality. Using a React Native boilerplate prototype, we quickly set up core elements such as the splash screen and navigation with the help of Expo.
To ensure a scalable architecture, we used:
?We began by defining models in MobX-State-Tree (MST) and setting up a GraphQL connection, using mst-gql to automatically generate models from the schema, speeding up development. Next, we created reusable components like buttons and cards to match the original app's design. Once these components were ready, we built key features like the Login Screen, navigation stacks, and individual screens using consistent designs. GraphQL handled data retrieval efficiently, ensuring a clean and modular structure. Additionally, we redesigned screens such as the Home page to improve the user experience, adding features like navigation buttons and user-specific metrics for a more intuitive, data-driven app.
From a long-term perspective, React Native's modular architecture and reusable components make it an ideal choice for scaling applications. As the app evolves with new features and updates, maintaining a single codebase ensures greater flexibility, shorter development cycles, and reduced costs compared to managing two separate native apps. This adaptability was particularly valuable given the business’s intent to continuously improve and expand the app’s features, ensuring it remains competitive in the ever-changing mobile app landscape.
Furthermore, the React Native ecosystem offers a rich collection of third-party libraries, tools, and plugins that simplify the integration of advanced features. For example, libraries for animations, charts, or data visualization can be easily integrated into the app without starting from scratch. This not only enhances productivity but also allows developers to focus on creating value-driven functionality instead of spending time on low-level tasks.
The vibrant open-source community behind React Native also ensures a steady stream of improvements, updates, and support, giving businesses confidence in the technology's longevity and reliability.
领英推荐
The Outcome
The React Native app delivers comparable performance to the original Swift app, achieving near-native responsiveness and seamless animations across both iOS and Android platforms. The transition to React Native not only expanded the app's reach to Android users but also ensured consistency in design and functionality across platforms. This was particularly evident in areas such as navigation, dynamic data rendering, and the overall user interface, which were all carefully crafted to align with the business’s requirements while maintaining a polished and cohesive look. Despite the shift in technology, users experienced the same level of quality and fluidity they had come to expect from the original app. Users also appreciated the redesigned user experience, particularly on the Home screen.
React Native’s ability to streamline development with a single cross-platform codebase, combined with near-native performance and extensive community support, has made it a valuable asset for ONEHOPE Wine. React Native has not only allowed us to meet client requirements efficiently but also provided the flexibility and scalability needed for long-term app growth.
Below are a few screenshots showcasing the new mobile application after the transition from Swift to React Native. The left image represents the original Swift-based app, while the right image illustrates the revamped React Native version:
Conclusion
The transition from Swift to React Native marks a significant milestone in the evolution of the ONEHOPE Wine mobile application. This journey highlights the power of adopting innovative technologies to address modern business challenges, such as cross-platform compatibility and streamlined development. The resulting app not only meets but exceeds user and client expectations, offering an intuitive and consistent experience across devices.
Author: Alison McDonnell, eCommerce Project Manager, 8 West Consulting - https://www.dhirubhai.net/in/alison-mcdonnell-026b8280/