Document available expo clerk components

docs/components/clerk-provider.mdx

@@ -9,7 +9,7 @@ The recommended approach is to wrap your entire app with `<ClerkProvider>` at th
 
 ## Usage
 
-<Tabs items={["Next.js", "React"]}>
+<Tabs items={["Next.js", "React", "Expo"]}>
   <Tab>
     <CodeBlockTabs options={["App Router", "Pages Router"]}>
       ```tsx {{ filename: 'app/layout.tsx' }}
@@ -63,6 +63,22 @@ The recommended approach is to wrap your entire app with `<ClerkProvider>` at th
     )
     ```
   </Tab>
+
+  <Tab>
+    ```tsx {{ filename: 'app/_layout.tsx' }}
+    import { ClerkProvider } from '@clerk/clerk-expo'
+
+    const publishableKey = process.env.EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY
+
+    export default function RootLayout() {
+      return (
+        <ClerkProvider publishableKey={publishableKey}>
+          <Slot />
+        </ClerkProvider>
+      )
+    }
+    ```
+  </Tab>
 </Tabs>
 
 {/* TODO: Make dedicated docs pages for these meta-frameworks */}

docs/components/control/clerk-loaded.mdx

@@ -7,7 +7,7 @@ The `<ClerkLoaded>` component guarantees that the Clerk object has loaded and wi
 
 ## Usage
 
-<Tabs items={["Next.js", "React", "Remix"]}>
+<Tabs items={["Next.js", "React", "Remix", "Expo"]}>
   <Tab>
     <Tabs items={["App Router", "Pages Router"]}>
       <Tab>
@@ -122,7 +122,24 @@ The `<ClerkLoaded>` component guarantees that the Clerk object has loaded and wi
         <div>
           <ClerkLoaded>
             <div>Clerk is loaded</div>
-            <p>window.Clerk.version</p>
+            <p>{window.Clerk.version}</p>
+          </ClerkLoaded>
+        </div>
+      )
+    }
+    ```
+  </Tab>
+
+  <Tab>
+    ```tsx {{ filename: 'app/index.tsx' }}
+    import { ClerkLoaded } from '@clerk/clerk-expo'
+
+    export default function App() {
+      return (
+        <div>
+          <ClerkLoaded>
+            <div>Clerk is loaded</div>
+            <p>{window.Clerk.version}</p>
           </ClerkLoaded>
         </div>
       )

docs/components/control/clerk-loading.mdx

@@ -7,7 +7,7 @@ The `<ClerkLoading>` renders its children while Clerk is loading, and is helpful
 
 ## Usage
 
-<Tabs items={["Next.js", "React", "Remix"]}>
+<Tabs items={["Next.js", "React", "Remix", "Expo"]}>
   <Tab>
     <CodeBlockTabs options={["App Router", "Pages Router"]}>
       ```tsx {{ filename: 'app/layout.tsx' }}
@@ -94,4 +94,20 @@ The `<ClerkLoading>` renders its children while Clerk is loading, and is helpful
     }
     ```
   </Tab>
+
+  <Tab>
+    ```tsx {{ filename: 'app/index.tsx' }}
+    import { ClerkLoading } from '@clerk/clerk-expo'
+
+    export default function App() {
+      return (
+        <div>
+          <ClerkLoading>
+            <div>Clerk is loading</div>
+          </ClerkLoading>
+        </div>
+      )
+    }
+    ```
+  </Tab>
 </Tabs>

docs/components/control/signed-in.mdx

@@ -9,7 +9,7 @@ The `<SignedIn>` component offers authentication checks as a cross-cutting conce
 
 ## Usage
 
-<Tabs items={["Next.js", "React", "Remix", "Astro", "Vue"]}>
+<Tabs items={["Next.js", "React", "Remix", "Astro", "Vue", "Expo"]}>
   <Tab>
     ```tsx {{ filename: 'app.tsx' }}
     import '@/styles/globals.css'
@@ -95,6 +95,23 @@ The `<SignedIn>` component offers authentication checks as a cross-cutting conce
     </template>
     ```
   </Tab>
+
+  <Tab>
+    ```tsx {{ filename: 'app/index.tsx' }}
+    import { SignedIn } from '@clerk/clerk-expo'
+
+    export default function App() {
+      return (
+        <div>
+          <SignedIn>
+            <p>You are signed in!</p>
+          </SignedIn>
+          <div>Always visible</div>
+        </div>
+      )
+    }
+    ```
+  </Tab>
 </Tabs>
 
 ### Usage with React Router

docs/components/control/signed-out.mdx

@@ -7,7 +7,7 @@ The `<SignedOut>` component offers authentication checks as a cross-cutting conc
 
 ## Usage
 
-<Tabs items={["Next.js", "React", "Remix", "Astro", "Vue"]}>
+<Tabs items={["Next.js", "React", "Remix", "Astro", "Vue", "Expo"]}>
   <Tab>
     ```tsx {{ filename: 'app.tsx' }}
     import '@/styles/globals.css'
@@ -123,4 +123,20 @@ The `<SignedOut>` component offers authentication checks as a cross-cutting conc
     </template>
     ```
   </Tab>
+
+  <Tab>
+    ```tsx {{ filename: 'app/index.tsx' }}
+    import { SignedOut } from '@clerk/clerk-expo'
+
+    export default function App() {
+      return (
+        <div>
+          <SignedOut>
+            <p>You are signed out</p>
+          </SignedOut>
+        </div>
+      )
+    }
+    ```
+  </Tab>
 </Tabs>

docs/components/protect.mdx

@@ -50,7 +50,7 @@ For more complex authorization logic, [pass conditional logic to the `condition`
 
 The children of the following component will only be visible to users with roles that have the `org:invoices:create` permission.
 
-<Tabs items={["Next.js", "React", "Astro", "Vue"]}>
+<Tabs items={["Next.js", "React", "Astro", "Vue", "Expo"]}>
   <Tab>
     ```jsx
     import { Protect } from '@clerk/nextjs'
@@ -114,13 +114,28 @@ The children of the following component will only be visible to users with roles
     </template>
     ```
   </Tab>
+
+  <Tab>
+    ```jsx
+    import { Protect } from '@clerk/clerk-expo'
+    import { ReactNode } from 'react'
+
+    export default function ProtectPage({ children }: { children: ReactNode }) {
+      return (
+        <Protect permission='org:invoices:create' fallback={<p>You do not have the permissions to create an invoice.</p>}>
+          {children}
+        </Protect>
+      )
+    }
+    ```
+  </Tab>
 </Tabs>
 
 ### Render content by role
 
 While authorization by `permission` is **recommended**, for convenience, `<Protect>` allows a `role` prop to be passed. The children of the following component will only be visible to users with the `org:billing` role.
 
-<Tabs items={["Next.js", "React", "Astro", "Vue"]}>
+<Tabs items={["Next.js", "React", "Astro", "Vue", "Expo"]}>
   <Tab>
     ```jsx
     import { Protect } from '@clerk/nextjs'
@@ -184,13 +199,28 @@ While authorization by `permission` is **recommended**, for convenience, `<Prote
     </template>
     ```
   </Tab>
+
+  <Tab>
+    ```jsx
+    import { Protect } from '@clerk/clerk-expo'
+    import { ReactNode } from 'react'
+
+    export default function ProtectPage({children}: {children: ReactNode}) {
+      return (
+        <Protect permission='org:invoices:create' fallback={<p>You do not have the permissions to create an invoice.</p>}>
+          {children}
+        </Protect>
+      )
+    }
+    ```
+  </Tab>
 </Tabs>
 
 ### Render content conditionally
 
 The following example uses `<Protect>`'s `condition` prop to conditionally render its children if the user has the correct role.
 
-<Tabs items={["Next.js", "Astro", "Vue"]}>
+<Tabs items={["Next.js", "Astro", "Vue", "Expo"]}>
   <Tab>
     ```tsx {{ filename: 'app/dashboard/settings/layout.tsx' }}
     import type { PropsWithChildren } from 'react'
@@ -238,4 +268,22 @@ The following example uses `<Protect>`'s `condition` prop to conditionally rende
     </template>
     ```
   </Tab>
+
+  <Tab>
+    ```tsx {{ filename: 'app/dashboard/settings/_layout.tsx' }}
+    import { Slot } from 'expo-router'
+    import { Protect } from '@clerk/clerk-expo'
+
+    export default function SettingsLayout() {
+      return (
+        <Protect
+          condition={(has) => has({ role: 'org:admin' }) || has({ role: 'org:billing_manager' })}
+          fallback={<p>Only an Admin or Billing Manager can access this content.</p>}
+        >
+          <Slot />
+        </Protect>
+      )
+    }
+    ```
+  </Tab>
 </Tabs>