From c5a0739455093235eb4d6685042d5e301b658a28 Mon Sep 17 00:00:00 2001
From: Jack Tanner <25777536+theblockstalk@users.noreply.github.com>
Date: Mon, 5 Aug 2024 19:48:54 +0200
Subject: [PATCH] docs: Example open-source apps and cjs note (#149)

---
 .../react_native_1_setup_identifiers.md           | 15 +++++++++------
 docs/troubleshooting.md                           | 13 +++++++++++--
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/docs/react_native_tutorials/react_native_1_setup_identifiers.md b/docs/react_native_tutorials/react_native_1_setup_identifiers.md
index a4975d9..6eddf63 100644
--- a/docs/react_native_tutorials/react_native_1_setup_identifiers.md
+++ b/docs/react_native_tutorials/react_native_1_setup_identifiers.md
@@ -52,11 +52,12 @@ Some libraries that we will be depending on make use of the node `crypto` packag
 browsers. These are not yet available to react-native/expo environments out of the box, so there is a bit of ceremony to
 bundle everything properly.
 
-Also, the metro bundler that react-native uses doesn't yet support the `cjs` file extension (
-see [facebook/metro#535](https://github.com/facebook/metro/issues/535)) which is used by some libraries in the stack, so
+Also, the metro bundler that react-native uses doesn't support the `cjs` file extension until v0.72.0 (see [facebook/metro#535](https://github.com/facebook/metro/issues/535)) which is used by some libraries in the stack, so
 we have to configure these too.
 
-#### `cjs` extension
+> ℹ️ **Note:** In case you run into issues check out the [Troubleshooting](../troubleshooting.md) page for some options and example open-source React Native apps using Veramo.
+
+#### Support for ESM-only modules
 
 Create `metro.config.js` file and make sure it looks like this:
 
@@ -66,9 +67,11 @@ const { getDefaultConfig } = require('expo/metro-config')
 
 const config = getDefaultConfig(__dirname);
 
-config.resolver.sourceExts.push('cjs');
 config.resolver.unstable_enablePackageExports = true;
 
+// For React Native below v0.72.0 you need to also add:
+config.resolver.sourceExts.push('cjs');
+
 module.exports = config;
 ```
 
@@ -259,7 +262,7 @@ export const agent = createAgent<IDIDManager & IKeyManager & IDataStore & IDataS
   })
 ```
 
-### What we have so far.
+### What we have so far
 
 Let's take a moment to understand what's going on here.
 We created an `agent` object using the `createAgent` method and an array of `plugins`.
@@ -427,7 +430,7 @@ In this guide we:
 - used that agent to create some DIDs and show them in a basic UI.
 
 These `did:peer` identifiers we created
-are [Decentralized Identifiers(DIDs)](https://www.w3.org/TR/did-core/#a-simple-example) that use the `peer` DID method. 
+are [Decentralized Identifiers(DIDs)](https://www.w3.org/TR/did-core/#a-simple-example) that use the `peer` DID method.
 You can read more about how this works by going through
 the [`did:peer` spec](https://identity.foundation/peer-did-method-spec/).
 
diff --git a/docs/troubleshooting.md b/docs/troubleshooting.md
index b277c00..f25bff5 100644
--- a/docs/troubleshooting.md
+++ b/docs/troubleshooting.md
@@ -46,6 +46,7 @@ dependencies:
 ```
 
 Different package managers use different configurations for such overrides:
+
 * [npm overrides](https://docs.npmjs.com/cli/v10/configuring-npm/package-json#overrides)
 * [yarn v2+ resolutions](https://yarnpkg.com/configuration/manifest#resolutions)
 * [yarn v1 resolutions](https://classic.yarnpkg.com/lang/en/docs/selective-version-resolutions/)
@@ -53,10 +54,10 @@ Different package managers use different configurations for such overrides:
 
 See [this issue for more details](https://github.com/decentralized-identity/veramo/issues/1407)
 
-### Expo apps
+### React Native / Expo apps
 
 If your project is a react-native app, then you will also benefit from replacing `isomorphic-webcrypto` with the [fork
-made by Sphereon](https://github.com/Sphereon-Opensource/isomorphic-webcrypto):
+maintained by Sphereon](https://github.com/Sphereon-Opensource/isomorphic-webcrypto):
 
 ```json5
 // filename: package.json
@@ -67,3 +68,11 @@ made by Sphereon](https://github.com/Sphereon-Opensource/isomorphic-webcrypto):
   }
 }
 ```
+
+#### Example React Native open-source production apps using Veramo
+
+Checkout the following projects to see how they have successfully configured their production-level React Native apps using Veramo:
+
+* [Sphereon mobile wallet](https://github.com/Sphereon-Opensource/mobile-wallet)
+* [Tonomy ID](https://github.com/Tonomy-Foundation/Tonomy-ID)
+