By Cody Zuschlag

React Native Application Development Done Right

React Native is an amazing technology. The promise of using JavaScript, React, and the NodeJS ecosystem to build applications is too tempting to resist. The possibilities of a single codebase and technology stack and the impact they could have on development velocity are real.

When considering a new React Native application there are a lot of details to cover. This article discusses some of the details that I wish I had considered before starting some new React Native projects for clients.

1. Determine the Type of Application

Stakeholders are always searching for a silver bullet. They are looking for the legendary magic that React Native claims to offer: simplified teams all using the same technology, shorter release cycles, increased development velocity, and of course cost savings. React Native and cross-platform technologies can deliver, but it’s crucial to lay the foundation first.

This entails understanding how React Native applications are built and aligning the plan with business goals and objectives. There are two approaches to building a React Native application each with its own nuances, strengths and weaknesses. Consulting with a strategic partner, like NearForm, is a great way to get a handle on the options available and begin planning a roadmap.

Cross-Platform Application

The first approach is to build a truly cross-platform application. This is useful when an organization wants to quickly deliver the same feature set on multiple platforms and can accept some small compromises in the user experience on certain platforms in order to have a very consistent experience.

While this is often the fastest way to build an application with React Native, it may not be the most suitable for an organization’s long-term goals.

Cross-Platform Component Library

The other option is to build a cross-platform component library that supplies base components that development teams can use to build separate applications. This entails a larger initial investment but allows for building applications that work well on each platform. This can ensure a strong brand experience no matter the application and platform but still requires dedicated resources for every application.

The initial investment will cost a lot of time and velocity may at first seem slower than the previous option. However, given that initial investment, development velocity for new applications and maintenance can be rocket boosted by leveraging and reusing the cross-platform component library.

2. Get Buy-in from Stakeholders

Stakeholders from all levels of the organization will need to buy into the new strategy. Driving change is hard and a change like this will have an impact on many parts of the organization.

Transitioning to React Native has the potential to have a big return on investment. It’s important to understand that there is an up-front investment. Up-skilling existing devs, attracting and retaining new devs, changing the designer mindset, and creating new development and deployment pipelines will present new challenges to the organization. For this reason, we recommend reaching out to a strategic partner, like NearForm, to help your organization navigate the waters and prepare stakeholders.

3. Plan Time to Debug and Leverage the OS Community

React Native is a framework for creating native applications with web technologies (JavaScript, React, and CSS-like). This means at some level of abstraction the application will behave differently depending on the platform. Furthermore, due to platform differences, sometimes we need to purposely create code that only runs on certain platforms. Fortunately, React Native provides mechanisms to do this (either through file extensions or a platform global variable). All this means that there will inevitably be platform-specific bugs. It’s important to plan time to debug tricky bugs and have the right resources.

One of the things we love about React Native, though, is that it is an open source technology. When issues arise, there are almost definitely others with the same issue. Don’t feel alone and be sure to leverage the open source community and search for similar issues.

The open source community is a powerful asset; unlike closed source tools and frameworks, fixes, alternatives and workarounds can happen quickly!

When cross-platform works, it’s amazing.

4. Test on Real World Devices

Testing applications with various simulators is great for rapid development. MacOs (and therefore a Mac) will be required to run applications in the iOS simulator.

Production application features should be tested on real devices. Simulators are convenient, but real-world testing on a physical device can’t be replaced. Emulation just can’t emulate certain lower-level features and this can lead to inconsistent and buggy results when testing in simulators. Hence the need for real-world device testing. It’s recommended that all devs have access to at least one native device that they can test their features on before making pull requests. Final validation should be done on all supported platforms. This means that at least some devs will need access to both iOS and Android devices.

5. Prepare Designers

Designers will need to learn new ways of approaching user experience. Certain patterns that make sense on a single platform may not make sense on another. Even when leveraging one codebase, features will need to be designed and tested for accessibility on all platforms. Examples include tabbed navigation and carousels. Stakeholders may assume that any component can simply be ported to be cross-platform. While technically that may be true, user experience will suffer without proper design and testing.

Creating a cross-platform, React Native application is an opportunity to challenge all stakeholders to approach the problem differently.

6. Upskilling

The long-term development velocity gains that React Native applications can bring have the potential to be substantial. To harness this potential, it is important to get the development infrastructure in place from the get-go.

React Native is styled in a way that will be familiar to web developers. It’s CSS-like. However, it’s important to note that it’s not CSS and developers will need to manage styling in JavaScript. This will require some time to ramp up, even if it is a familiar skill and existing knowledge can be leveraged.

Lay the Groundwork and Reap the Benefits

Focusing on developer experience to allow development teams to build the best possible applications is my passion. React Native is an incredible tool that can unlock some insane development potential.

To increase the chances of your React Native app project being a success be sure your stakeholders are aware of these 6 tips. With the right investments in strategy and time, you will be able to unlock an incredibly powerful technology and platform for rapid, high quality and value delivery, making it possible to realize the write-once run-everywhere dream.

Share Me

Related Reading

Newsletter

Don’t miss a beat

Get all the latest NearForm news, from technology to design. Sign up for our newsletter.

Sign Up
Follow us for more information on this and other topics.