Document available expo clerk components (#1895)

Co-authored-by: victoria <[email protected]> Co-authored-by: Alexis Aguilar <[email protected]>
clerk · Jan 17, 2025 · c4a4fe0 · c4a4fe0
1 parent f77a936
commit c4a4fe0
Show file tree

Hide file tree

Showing 6 changed files with 155 additions and 9 deletions.
diff --git a/docs/components/clerk-provider.mdx b/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,27 @@ 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'
+    import { Slot } from 'expo-router'
+
+    export default function Layout() {
+      const publishableKey = process.env.EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY
+
+      if (publishableKey === undefined) {
+        throw new Error('Add EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY to your .env file')
+      }
+
+      return (
+        <ClerkProvider publishableKey={publishableKey}>
+          <Slot />
+        </ClerkProvider>
+      )
+    }
+    ```
+  </Tab>
 </Tabs>
 
 {/* TODO: Make dedicated docs pages for these meta-frameworks */}

diff --git a/docs/components/control/clerk-loaded.mdx b/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,11 +122,29 @@ 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'
+    import { Text, View } from 'react-native'
+
+    export default function Screen() {
+      return (
+        <View>
+          <ClerkLoaded>
+            <Text>Clerk is loaded</Text>
+            <Text>{window.Clerk?.version}</Text>
+          </ClerkLoaded>
+        </View>
+      )
+    }
+    ```
+  </Tab>
 </Tabs>
diff --git a/docs/components/control/clerk-loading.mdx b/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,21 @@ 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'
+    import { Text, View } from 'react-native'
+
+    export default function Screen() {
+      return (
+        <View>
+          <ClerkLoading>
+            <Text>Clerk is loading</Text>
+          </ClerkLoading>
+        </View>
+      )
+    }
+    ```
+  </Tab>
 </Tabs>
diff --git a/docs/components/control/signed-in.mdx b/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,24 @@ 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'
+    import { Text, View } from 'react-native'
+
+    export default function Screen() {
+      return (
+        <View>
+          <SignedIn>
+            <Text>You are signed in!</Text>
+          </SignedIn>
+          <Text>Always visible</Text>
+        </View>
+      )
+    }
+    ```
+  </Tab>
 </Tabs>
 
 ### Usage with React Router

diff --git a/docs/components/control/signed-out.mdx b/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,21 @@ 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'
+    import { Text, View } from 'react-native'
+
+    export default function Screen() {
+      return (
+        <View>
+          <SignedOut>
+            <Text>You are signed out</Text>
+          </SignedOut>
+        </View>
+      )
+    }
+    ```
+  </Tab>
 </Tabs>
diff --git a/docs/components/protect.mdx b/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,31 @@ 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 { Text } from 'react-native'
+
+    export default function Screen() {
+      return (
+        <Protect
+          permission="org:invoices:create"
+          fallback={<Text>You do not have the permissions to create an invoice.</Text>}
+        >
+          <Text>Users with permission org:invoices:create can see this.</Text>
+        </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 +202,31 @@ While authorization by `permission` is **recommended**, for convenience, `<Prote
     </template>
     ```
   </Tab>
+
+  <Tab>
+    ```jsx
+    import { Protect } from '@clerk/clerk-expo'
+    import { Text } from 'react-native'
+
+    export default function Screen() {
+      return (
+        <Protect
+          permission="org:billing"
+          fallback={<Text>Only a member of the Billing department can access this content.</Text>}
+        >
+          <Text>Users with role org:billing can see this.</Text>
+        </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 +274,23 @@ 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'
+    import { Text } from 'react-native'
+
+    export default function SettingsLayout() {
+      return (
+        <Protect
+          condition={(has) => has({ role: 'org:admin' }) || has({ role: 'org:billing_manager' })}
+          fallback={<Text>Only an Admin or Billing Manager can access this content.</Text>}
+        >
+          <Slot />
+        </Protect>
+      )
+    }
+    ```
+  </Tab>
 </Tabs>