Tutorials

Guides and case studies offering in-depth insights into React Native’s architecture, integration capabilities with other technologies, development best practices, testing strategies, and performance optimization, designed for both technical and non-technical audiences.

Separating Dev, Staging, and Prod Environments in React Native: Best Practices →

React Native applications often require different configurations for development, staging, and production environments. The `react-native-config` library provides a simple way to manage and access these configurations in your React Native app....

Integrating Rust in a React Native Project: Step-by-Step Guide →

React Native is a popular framework for building mobile applications. It allows developers to write code in JavaScript and deploy it to both iOS and Android platforms. Rust, on the other hand, is a systems programming language that is fast, safe, and reliable. While Rust is not typically used for building mobile applications, it can be integrated with React Native to allow developers to write high-performance native modules....

Integrating Storybook V5 in React Native: Step-by-Step Guide →

React Native is a popular framework that enables developers to build mobile applications using the same building blocks as a web application. Storybook is a user interface (UI) development environment that enables developers to build, test, and refine UI components. Storybook integration with React Native provides a powerful toolset to create and test UI components. In this tutorial, we will explore how to integrate Storybook v5 with React Native....

SST & AWS AppSync: GraphQL API Setup for React Native Made Simple →

Mobile app development relies heavily on APIs to provide data and functionality to the app. GraphQL APIs have gained popularity in recent years because they offer a more efficient way to fetch data and give frontend developers more control over what they receive. In this blog post, we'll be setting up an AppSync GraphQL API for a React Native app using SST on the backend and AWS Amplify on the frontend....

React Native for Non-Engineers: A Comprehensive Guide →

React Native is a powerful platform for building mobile applications that work on both iOS and Android devices. It is a framework that enables developers to write applications using a single codebase that can be deployed on both platforms, instead of having to build two separate apps from scratch. This approach can save a lot of time and effort for organizations that want to build mobile applications but don't have the resources to build them from scratch....

How to Inspect Provisioning Profile Entitlements for IOS Apps →

When working with iOS apps, it's important to ensure that the provisioning profile entitlements are set up correctly. These entitlements specify the app's capabilities, such as permissions to access certain APIs, services, and data. In this blog post, we'll go over how to inspect provisioning profile entitlements on an .ipa or .xcarchive file....

Visualising React Native Bundle Size →

React Native is a popular open-source framework for building mobile applications using JavaScript and React. One of the key challenges developers face when building React Native apps is managing the app's bundle size. A large app bundle can cause slow load times and poor performance, which can negatively impact the user experience. Fortunately, there are tools available to help developers visualise their app's bundle size, including react-native-bundle-visualizer....

Testing the UseState Hook in React Native →

As a React Native developer, you might need to test the useState hooks to ensure that the state updates correctly and that the component renders as expected based on the state....

React Native Module Resolution With Typescript & Babel →

React Native is a popular framework for building cross-platform mobile apps. One of its key features is its module resolution system, which allows developers to easily import and use modules from different parts of their codebase. However, getting module resolution to work correctly with Typescript and Babel can be a challenge....

Case Study: Getting Started With Detox for End-to-End Testing in React Native →

As a React Native developer, you understand the importance of testing in the development process. To ensure that your app works as intended, end-to-end integration testing plays a crucial role. Fortunately, Detox is a powerful testing framework that allows you to write and execute these tests for your React Native app....

Graceful Error Handling in React Native: The Power of Error Boundaries →

Imagine using an app when suddenly, it crashes, leaving you facing a blank screen, a mixture of confusion and frustration setting in. As developers, our goal is to prevent these jarring moments. Here's a candid tale from my recent work: I had released a new build to the app store, only to discover a critical oversight. A bug, rooted in an attempt to access an undefined object property, caused a crash that presented users with an unwelcome black screen. This incident served as a stark reminder of the cascading effects a single error can have. It's precisely for such scenarios that error boundaries are essential. They act as a safety net, catching errors in a component tree and preventing them from crashing the entire app. Thanks to error boundaries, we can ensure that an error in one part doesn't compromise the user's experience with the whole application....

Mastering RTK Query: A Comprehensive Guide for Efficient Server-Side Data Management in React Native Apps →

For developers seeking effective ways to handle server-side data in Redux applications, it's essential to get a good handle on Redux Toolkit's RTK Query. The RTK Query makes the processes of data fetching, caching, and state management simpler, leading to better performing applications. This guide aims to cover the fundamentals of RTK Query, while also providing insights into more complex features, such as optimistic updates and pagination, using real-world examples....