This blog is part of the Grofers React Native blog series. Here, we attempt to share the journey of integrating React Native into one of India’s largest e-commerce grocery’s web & mobile apps through this series.

We started our React Native Integration to reach a single project that could power all our platforms. We also used the React Native web library for our web platform. In our journey, one of the essential parts of building this system was to choose the right 3rd party integration services that would scale and work across all platforms.

React Native has a large ecosystem of 3rd party libraries but it has its downsides. Some of the major ones are

• Given JavaScript’s nature, the React Native code relies on an engine to interpret and a bridge to communicate with native platforms. This makes features that are built entirely in JS slower than their native counterparts.
• If we use native libraries, the goal of a single codebase powering all platforms cannot be realized.
• Most of the libraries fail to keep up with the latest react native releases and get outdated quickly.

The react-native core provides several features but there are a few use cases that aren’t fully supported. This blog will focus on three such use cases we came across and the solutions we picked.

1. Infinite List
2. Navigation
3. Carousel

Infinite List

Maintaining a consistent frame rate during quick and lengthy scrolls is a challenge even for the native libraries across platforms. As react native communicates with native platforms through the bridge, it becomes difficult to maintain performance across edge cases. This section discusses what the React ecosystem has to offer for rendering long lists with high performance.

What would be an ideal list view?

• Virtualization — Consume less memory by creating or recycling only those views that are currently active.
• Rendering — Can handle 60 fps with fast scrolls
• Lazy Loading — Only load the list items that are visible in the viewport
• Analytics — Can track which list items are in view
• Grid Support — Support for both list and grid view
• Separators — Can render separators among components

Options to consider

What Did We Choose?

There is no obvious choice when it comes to the ideal list view. Scroll View provides a lean solution with all basic features and ease of use but is limited when dealing with long lists. Recycler List View and Flat List are feature-packed solutions but bring forth a complex setup code overhead. Currently, we use Recycler List View at Grofers as it provides significant performance because of its cell recycling feature with long lists. On the other hand, we use Flat List for places that do not require complex list rendering.

Navigation

With a bundle of options and plenty of solutions, navigation in React Native is often confusing. Most of the libraries in the ecosystem are based on natively coded navigation which is like a JS wrapper on Android navigation. Although this can be a great solution if you’re building your solution from scratch, these libraries lose their charm when it comes to brownfield apps. In this section, I would like to talk about the two most popular solutions: React Navigation and React Native Navigation.

Things to Look for

• Performance
• Integration with Native App
• 3rd Party Library Integrations like redux
• Multiple Router Support
• Development Team and community

What Did We Choose?

We planned our migration in phases rather than doing a complete rewrite. One of the most important things for us was brownfield integration which is only provided by react-navigation. Furthermore, react-navigation is one of the best solutions as it is officially recommended by the react-native team and provides the best API support. Additionally, being a JS-only solution, it has a future for web integration and works with most JS libraries like redux.

Carousel

There are no complete cross-platform solutions in react native as JS-driven animations occupy the bridge traffic and slow down the application. Hence a JS-only carousel would not be performant in react native due to heavy animations. Most of the libraries rely on native API-based solutions, making them incompatible with the web.

Things to Look for

• Performance
• Active contributors
• Web Support
• Animation
• Adjacent view

Popular Options

1. React Native Swiper - lean solutions for carousels, initially based on view-pager, recently shifted to ScrollView.
2. React Native Snap Carousel - Snap carousel is a feature-packed library based on a scroll view and FlatList. It offers a lot of animations and custom features.

What Did We Choose?

Both of these libraries use native APIs to implement animations and do not provide web compatibility. Our use case requires a cross-platform solution, so we use a custom implementation that uses React Native Swiper and React Slick (for web) internally.

Other Libraries

Apart from these some other react-native libraries that we use in our project are

• React Native Tab View for Tab navigation
• React Native Testing Library for Testing
• Redux for State Management
• Axios for API transactions
• SQLite for Database

Tarun is a Software Developer at Grofers. Got questions or have suggestions? Reach out to him at [email protected].

We’re hiring!

We arehiring across various front-end roles! If you are an expert native developer who has never done React-Native before, worry not as we have prepared a proper onboarding guide for you.

If you are interested in exploring working at Grofers, we’d love to hear from you. You can either apply on LinkedIn or directly reach out to the author at the email mentioned above.