Merge pull request #393 from ably/react-native-readme

docs: add react native specific installation instructions

README.md

@@ -74,6 +74,11 @@ For browsers, you can also include the Chat SDK directly into your HTML:
 </script>
 ```
 
+> [!IMPORTANT]
+> If you're using Chat in React Native, please see the additional setup step [here](./src/react/README.md).
+
+## Versioning
+
 The Ably client library follows [Semantic Versioning](http://semver.org/). To lock into a major or minor version of the client library, you can specify a specific version number such as https://cdn.ably.com/lib/ably-chat-0.js for all v0._ versions, or https://cdn.ably.com/lib/ably-chat-0.1.js for all v0.1._ versions, or you can lock into a single release with https://cdn.ably.com/lib/ably-chat-0.1.0.js. See https://github.com/ably/ably-chat-js/tags for a list of tagged releases.
 
 ## Instantiation and authentication

src/react/README.md

@@ -2,6 +2,31 @@
 
 This document provides a brief guide on how to use custom chat components and hooks provided by the Ably Chat SDK.
 
+## Installation
+
+If you're using **React Native**, you may need to perform extra steps to use the Chat SDK.
+
+The React package is exported as an ESM module `@ably/chat/react`, making use of the `exports` field in `package.json`.
+The Metro bundler used by React Native does not by default utilize this field, leading to imports not being found.
+
+To use Chat with React Native, first set the `type` field of your React Native project to `module` and update your `tsconfig.json`
+to set `"moduleResolution": "Bundler"`. Finally, include the `unstable_enablePackageExports` field in
+your `metro.config.cjs`, which will enable `exports` resolution. For example:
+
+```js
+const { getDefaultConfig } = require('expo/metro-config');
+
+const defaultConfig = getDefaultConfig(__dirname);
+
+module.exports = {
+  ...defaultConfig,
+  resolver: {
+    ...defaultConfig.resolver,
+    unstable_enablePackageExports: true, // Enable 'exports' field in package.json,
+  },
+};
+```
+
 ## ChatClientProvider
 
 This provider is used to provide the `ChatClient` instance to all child components in your React component tree.