docs: add react native compatibility table

Author: kacperzolkiewski

docs/docs/misc/compatibility.mdx

@@ -20,7 +20,9 @@ installing.
 
 ## Supported React Native versions
 
-(compatibility table here)
+The table assumes you're using the latest patch of each library minor version.
+
+<EnrichedHtmlCompatibility />
 
 ## Platform differences
 

docs/src/components/Compatibility/EnrichedHtmlCompatibility.tsx

@@ -0,0 +1,72 @@
+import { No, Version, Yes } from './index';
+
+const REACT_NATIVE_VERSIONS = [
+  '0.80',
+  '0.81',
+  '0.82',
+  '0.83',
+  '0.84',
+  '0.85',
+  '0.86',
+  '0.87',
+];
+
+const LIBRARY_VERSIONS = [
+  { version: 'nightly', supportedFrom: '0.81', supportedTo: '0.86' },
+  { version: '1.1.x', supportedFrom: '0.81', supportedTo: '0.86' },
+  { version: '1.0.x', supportedFrom: '0.81', supportedTo: '0.85' },
+] as const;
+
+function isSupported(
+  reactNativeVersion: string,
+  supportedFrom: string,
+  supportedTo: string,
+) {
+  return (
+    reactNativeVersion.localeCompare(supportedFrom, undefined, {
+      numeric: true,
+    }) >= 0 &&
+    reactNativeVersion.localeCompare(supportedTo, undefined, {
+      numeric: true,
+    }) <= 0
+  );
+}
+
+export default function EnrichedHtmlCompatibility() {
+  return (
+    <div className="compatibility">
+      <table>
+        <thead>
+          <tr>
+            <th></th>
+            {REACT_NATIVE_VERSIONS.map(version => (
+              <th key={version}>{version}</th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {LIBRARY_VERSIONS.map(({ version, supportedFrom, supportedTo }) => (
+            <tr key={version}>
+              <td>
+                <Version version={version} />
+              </td>
+              {REACT_NATIVE_VERSIONS.map(reactNativeVersion => (
+                <td key={reactNativeVersion}>
+                  {isSupported(
+                    reactNativeVersion,
+                    supportedFrom,
+                    supportedTo,
+                  ) ? (
+                    <Yes />
+                  ) : (
+                    <No />
+                  )}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

docs/src/theme/MDXComponents.js

@@ -9,6 +9,7 @@ import Indent from '@site/src/components/Indent';
 import Row from '@site/src/components/Row';
 import Grid from '@site/src/components/Grid';
 import { Yes, No, Version, Spacer } from '@site/src/components/Compatibility';
+import EnrichedHtmlCompatibility from '@site/src/components/Compatibility/EnrichedHtmlCompatibility';
 import { Badges } from '@swmansion/t-rex-ui';
 
 export default {
@@ -26,5 +27,6 @@ export default {
   No,
   Version,
   Spacer,
+  EnrichedHtmlCompatibility,
   Badges,
 };