Adaptability is critical to staying ahead in the ever-evolving web and mobile development landscape. At Five & Done, we found ourselves at a crossroads, seeking a solution to streamline our mobile application development process and broaden our services. Our need to stay competitive led us on a transformative journey from using React to embracing React Native. This article delves into our challenges and the strategic decision-making that ultimately led us to adopt React Native for our mobile app development endeavors.

The Road that Led Us Here

In the past, we’ve leaned more on PWAs ( progressive web apps ) when it comes to mobile development for its convenience. PWAs have been great for helping improve client brand awareness and are still the perfect choice when budgets are a constraint. However, we recognize the need for many clients to maintain a presence in the many app stores for credibility and to allow our products to have other “smart” features like geofencing and push notifications. We’ve always had the capabilities in-house to create mobile apps, but we needed to develop fast and efficient workflows to deliver mobile web apps to our clients for these reasons.

Choosing our Stack

Our decision to adopt React Native over alternatives such as Flutter was grounded in carefully evaluating several vital factors. While Flutter is a robust framework with merits, React Native aligns more seamlessly with our existing expertise in React for web development and has served us well, offering declarative syntax and efficient component-based architecture. This synergy allowed our development team to leverage their familiarity with React’s and facilitate a smoother transition to mobile app development. React Native’s ability to use native components, strong community support, and compatibility with third-party libraries were decisive factors. The framework’s emphasis on a single codebase for both platforms was pivotal in reducing development time and operational overhead, aligning perfectly with our efficiency goal and broadening our services. Ultimately, React Native’s balance between performance, community backing, and codebase unification made it the optimal choice for propelling our mobile development initiatives forward.

Key Advantages of React Native:

  1. Single Codebase: React Native allows us to write a single codebase that can be used for both web and mobile applications, reducing development time and minimizing inconsistencies between platforms.
  2. Native Performance: Leveraging native components, React Native delivers a performance comparable to native applications, ensuring a smooth user experience.
  3. Hot Reloading: The hot reloading feature in React Native facilitates a faster development cycle by allowing real-time code changes without restarting the entire application.
  4. Vibrant Community: React Native boasts a vibrant and supportive community, providing access to a wealth of libraries, modules, and resources that enhance development efficiency.

The Initial Challenges

When we began our foray into mobile application development, with React as our framework of choice, we encountered challenges in expanding our capabilities.

Supporting Technologies

Realizing the need for efficiency and a unified codebase, we embarked on a quest to find a solution to bridge the gap between our applications and APIs. Enter AWS Amplify — a framework that promises an easy to scale solution for any frontend. We are heavily involved in development utilizing the AWS amplify framework for almost everything we create here at Five & Done; adopting the same workflows was a simple sift. AWS Amplify allowed us to maintain many of the same workflows we, as developers, were accustomed to using. We can’t stress enough how important it is to find a community that can help when issues arise.

Maintainability

The decision to transition from React to React Native wasn’t made lightly by everyone in our organization. We weighed the pros and cons, considering development speed, maintainability, and the ability to reuse code across platforms. One of our other major contributing factors was how we hire here at Five & Done. The primary capability of our development team is Javascript, mainly because it’s so versatile in all its different uses, and mobile app development is no exception. React Native emerged as the frontrunner, balancing performance, flexibility, and maintainability.

Animations

At Five & Done, there is a strong focus on the user experience, especially regarding animations. This requirement allowed us to continue working with Rive. We created some interactive animations in the App and the supporting website that only needed to be developed once.

Build Errors

There were many build errors along the way that we’re still getting used to. The communities behind our chosen stacks have proven useful, and we are tackling them as we go.

The Product

Through collaborative learning and persistent effort, our team overcame these challenges and emerged stronger and more versatile in their development capabilities. We now have something to show for it. Presenting Nella

Nella is an AI-powered bedtime story-generation tool. We leverage a number of AI tools to generate a story and accompanying image. We know many examples of this type of application; ours is the best. Not only has this product helped us expand our capabilities, but it has also helped us explore other tech solutions. Currently, the application uses Chat GPT to generate your story. Still, in the future, we want to leverage different tools like AWS Bedrock and train our language models for even better results.

Further considerations

Notifications

Last year, Apple announced Notification support for Web Apps in Safari. Support across all mobile devices is a significant step forward for making PWAs more viable. I understand native apps will always have a place, but it helps to blur the lines further.

Pipelines

There is still work to do when it comes to pipelines. Agility is something development has placed much focus on in the past years. Our pipelines have reflected this, and we’ve been proud of how stress-free deployments to production have been. We strive to find similar solutions that follow continuous integration and deployment practices.

No Code Solutions

This next year, Five & Done will explore no-code solutions to create even more efficient workflows. Products like WebFlow have once again blurred the lines between design and development. For mobile development, we’re still trying to determine what tool will help us create native mobile apps faster.