Adds Rest React Native example

[taylorkline]

Introduction

Hi! I've seen you request assistance getting in an example in mswjs/msw#269, mswjs/msw#622, and mswjs/msw#203 for React Native. Here it finally is.

Changes

This PR, when finalized, adds a Rest React Native example for reference and smoke testing.

TODO

• When the directory rest-react-native is within examples/examples, yarn pods errors with the following output:

Bundle complete! 1 Gemfile dependency, 38 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.

[!] Invalid `Podfile` file: cannot load such file -- /Users/taylor/Desktop/msw-examples/examples/rest-react-native/node_modules/@react-native-community/cli-platform-ios/native_modules.

 #  from /Users/taylor/Desktop/msw-examples/examples/rest-react-native/ios/Podfile:2
 #  -------------------------------------------
 #  require_relative '../node_modules/react-native/scripts/react_native_pods'
 >  require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
 #
 #  -------------------------------------------
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

When rest-react-native is copied to another directory, yarn pods works fine. Can you help me figure out what it is about this directory structure / build setup that is causing issues?

• I've added the commands yarn test:unit and yarn test:e2e, but I am not sure how I can best help set this up with CircleCI.

Other notes

• Detox seems to be having trouble with Android Emulators on the current version, so I'm currently only running the E2E testing on the iOS simulator. That shouldn't be a major problem - usually the only differences between iOS and Android are UI, not functionality.

Example checklist

• I've verified that all added tests pass by running npm test.
• I've included only the necessary minimum setup to showcase the example.
• I've added a README.md file to the root directory of my example.

[wwdrew]

Hi @taylorkline, no problem at all :) I've been working on an example repo as well, but spare time isn't something I have in adundance at the moment. My repo is at https://github.com/wwdrew/examples/tree/react-native

The issue you're having is due to the examples project being a monorepo. It's installing the react-native module into the parent node_modules, so to compensate you need to update the paths in the project to point to the right place. You can see how I've done it in my repo.

However, although I've managed to the get the iOS app building, the Android one was still giving me trouble. Additionally, the iOS build was failing when trying to download the JS bundle from Metro. I've not had any time to figure out why or how to fix these problems though, so hopefully this has given you some help on how to overcome these last hurdles.

Also, although my example doesn't include e2e testing, I've included examples for using the REST API using fetch and react-query, as well as graphql using Apollo.

[taylorkline]

Thanks so much @wwdrew, this is super useful. I plan to finish out this example when I have some free time, but I have been traveling and am behind on the day job.

[ShivamJoker]

Hey folks any update on this?

[taylorkline]

Hey folks any update on this?

Hi @ShivamJoker. I've picked it back up a couple times but now there are newer React Native versions.

Likely need to start this example over from the newest React Native version.

I might get to it eventually but if you're interested in taking it on please feel welcome to.

[ShivamJoker]

Hey @taylorkline I will be happy to do it but I am unsure what other config we need to do to make it work?

I see there is some polyfill, do we need to have this in the app source code or will it work if we do it in the tests file as well?

require('react-native-url-polyfill/auto');