React Native Barricade: Giving back to the developer community.

In the past few years, React Native has become the open-source framework of choice for building apps that work across Android and iOS.?

Released by Meta, React Native has gone from strength to strength, with many of the world’s Fortune 500s and hottest startups opting to use it.?

Popular apps like Microsoft Office, the Facebook suite, Shopify, Discord, Bloomberg, Tencent, Tesla, Pinterest, and the Playstation app all run on the React Native framework.?

What is React Native?

The language has its roots within Facebook in 2013. It emerged as a code tool that built true native apps using JavaScript.?

Where it proved especially useful was blending JavaScript’s business logic and flow control with native UI elements to reach the same performance as regular iOS and Android apps!

In a nutshell, developers see React Native as a faster and cleaner way to build flexible and responsive cross-platform apps that work and feel like native ones. So it should come as no surprise that many Fortune 1000 companies and fledgling startups alike have leveraged it.

It’s also considered a direct competitor to Flutter in many ways. React Native rapidly speeds up development. Instead of two separate development teams, React Native would need just one for both your iOS and Android versions. Your app gets more cost effective to maintain and improve—directly rewarding your users with timely updates.?

But, not all is rosy…

However, a pet peeve for a lot of React Native developers has been its inability to develop an app when APIs were unavailable. In fact, most local server setups today give developers only a single response per request. This means that React Native doesn’t let developers select their mock response for requests at runtime. And that’s where Barricade enters the picture.?

What is React Native Barricade?

Built by the Mutual Mobile team, Barricade lets you support multiple responses per request. It presents the developer with an interface that lets them modify the selected mock response for runtime requests.?

It does this by replacing the global ‘XMLHttpRequest’ and the ‘fetch’ object with the ‘MockedXMLHttpRequest’.?

All outgoing network calls configured with Barricade get blocked and registered local responses get returned. All this without requiring any changes to the existing network code. And the best part? It’s open-source!

How does Barricade help?

During development, Barricade is useful for easily exercising all edge cases of a feature while you are building it without needing to frequently adjust the live server state.

Barricade also helps you test edge cases better during unit and integration testing as it can easily let you toggle each predefined response to a request.

See how Barricade works

In this example, we see Barricade respond to the flickr search API with one of two possible responses.

const SearchApiRequestConfig: RequestConfig = 

??label: 'Search',

??method: Method.Get,

??pathEvaluation: {

????path: '/services/rest?method=flickr.photos.search',

????type: PathEvaluationType.Includes,

??},

??responseHandler: [

????{

??????label: 'Success',

??????handler: successResponseHandler, // function that returns success data based on some computation

????},

????{

??????label: 'Failure',

??????handler: () => {

????????return {

??????????status: HttpStatusCode.BAD_REQUEST,

??????????headers: { 'Content-Type': 'application/json' },

??????????response: JSON.stringify(errorData), // JSON formatted error response.

????????};

??????},

????},

??],

};        

Everytime we hit the above API, Barricade executes the successResponseHandler function and returns the response data. This function will be useful in cases like the one below, where we have to return the paginated response to the same API call.

const successResponseHandler = (request: Request) => 

??const { page } = request.params ?? {};

??const response = page === '1' ? searchPageOne : searchPageTwo; // JSON responses




??return {

????status: HttpStatusCode.OK,

????headers: { 'Content-Type': 'application/json' },

????response: JSON.stringify(response),

??};

};        

Get started with Barricade

To get started with Barricade, take a look at our Git Profile. In the meantime, if you’re more of a Flutter person, then check out our handbook for Flutter navigation.?

Barricade comes with a host of developer-friendly features, chief of which are its ability to:

Home to an award-winning team of engineers and developers, Mutual Mobile has led from the forefront ever since the smartphone revolution kicked off. Known for building products with stunning design that always puts users first, we’ve become the digital partner Fortune 100s and unicorn startups the world over trust.?

So if you have an idea that you’d like to see materialize in React Native, we recommend you schedule a free consultation with a member of our team. They bring a lot of experience in building apps with React Native and could help you spot planning holes early on.

And in an industry that rewards early movers more than anything, this might be your safest bet.?