@clerk/expo-native-components 0.0.1 → 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (36) hide show
  1. package/README.md +7 -37
  2. package/dist/AuthView.d.ts +1 -1
  3. package/dist/AuthView.js +1 -1
  4. package/dist/AuthView.js.map +1 -1
  5. package/dist/UserButton.d.ts +1 -1
  6. package/dist/UserButton.js +1 -1
  7. package/dist/UserButton.js.map +1 -1
  8. package/dist/UserProfileView.d.ts +1 -1
  9. package/dist/UserProfileView.js +1 -1
  10. package/dist/UserProfileView.js.map +1 -1
  11. package/dist/index.d.ts +0 -2
  12. package/dist/index.d.ts.map +1 -1
  13. package/dist/index.js +0 -7
  14. package/dist/utils/native-module.d.ts +0 -1
  15. package/dist/utils/native-module.d.ts.map +1 -1
  16. package/dist/utils/native-module.js +0 -5
  17. package/dist/utils/native-module.js.map +1 -1
  18. package/package.json +2 -3
  19. package/dist/specs/NativeClerkModule.d.ts +0 -4
  20. package/dist/specs/NativeClerkModule.d.ts.map +0 -1
  21. package/dist/specs/NativeClerkModule.js +0 -8
  22. package/dist/specs/NativeClerkModule.js.map +0 -1
  23. package/dist/specs/NativeClerkModule.types.d.ts +0 -11
  24. package/dist/specs/NativeClerkModule.types.d.ts.map +0 -1
  25. package/dist/specs/NativeClerkModule.types.js +0 -0
  26. package/dist/specs/NativeClerkModule.web.d.ts +0 -4
  27. package/dist/specs/NativeClerkModule.web.d.ts.map +0 -1
  28. package/dist/specs/NativeClerkModule.web.js +0 -7
  29. package/dist/specs/NativeClerkModule.web.js.map +0 -1
  30. package/dist/useAuthViewState.d.ts +0 -12
  31. package/dist/useAuthViewState.d.ts.map +0 -1
  32. package/dist/useAuthViewState.js +0 -76
  33. package/dist/useAuthViewState.js.map +0 -1
  34. package/src/specs/NativeClerkModule.ts +0 -6
  35. package/src/specs/NativeClerkModule.types.ts +0 -9
  36. package/src/specs/NativeClerkModule.web.ts +0 -3
package/README.md CHANGED
@@ -25,59 +25,29 @@
25
25
 
26
26
  </div>
27
27
 
28
- ## Getting Started
29
-
30
- `@clerk/expo-native-components` adds Clerk's prebuilt native components to an Expo app that uses [`@clerk/expo`](https://github.com/clerk/javascript/tree/main/packages/expo). It contains the native modules built on the Clerk iOS and Android SDKs:
28
+ > [!NOTE]
29
+ > Install this package to use `AuthView`, `UserButton`, and `UserProfileView` from `@clerk/expo/native-components`. Its JavaScript API is used by `@clerk/expo` and isn't meant to be imported directly.
31
30
 
32
- - **iOS**: [clerk-ios](https://github.com/clerk/clerk-ios) (SwiftUI)
33
- - **Android**: [clerk-android](https://github.com/clerk/clerk-android) (Jetpack Compose)
31
+ ## Getting Started
34
32
 
35
- Install it only if you use `AuthView`, `UserProfileView`, `UserButton`, or biometric credentials. Apps that only use `@clerk/expo` do not include the Clerk native SDKs.
33
+ `@clerk/expo-native-components` contains the native code behind Clerk's prebuilt native components for Expo apps that use [`@clerk/expo`](https://github.com/clerk/javascript/tree/main/packages/expo). The components are built on the Clerk iOS and Android SDKs. Apps that don't install it don't include those SDKs.
36
34
 
37
35
  ### Prerequisites
38
36
 
39
37
  - `@clerk/expo`
40
- - Expo 54 or later, with a [development build](https://docs.expo.dev/develop/development-builds/introduction/) (Expo Go is not supported)
38
+ - Expo 54 or later, in a [development build](https://docs.expo.dev/develop/development-builds/introduction/) (the components are not available in Expo Go)
41
39
  - iOS 17 or later
42
40
 
43
41
  ### Installation
44
42
 
45
43
  ```sh
46
- npx expo install @clerk/expo @clerk/expo-native-components
47
- ```
48
-
49
- Add the config plugin alongside `@clerk/expo` in your app config, then rebuild your native app:
50
-
51
- ```json
52
- {
53
- "expo": {
54
- "plugins": ["@clerk/expo", "@clerk/expo-native-components"]
55
- }
56
- }
44
+ npx expo install @clerk/expo-native-components
57
45
  ```
58
46
 
59
- The plugin accepts the following options:
60
-
61
- - `keychainService`: keychain service identifier to share the session with app extensions.
62
- - `theme`: path to a JSON file with `colors`, `darkColors`, and `design` keys that styles the native components.
47
+ Then rebuild your native app.
63
48
 
64
49
  ## Usage
65
50
 
66
- ```tsx
67
- import { useAuth } from '@clerk/expo';
68
- import { AuthView } from '@clerk/expo-native-components';
69
-
70
- export default function SignInScreen() {
71
- const { isSignedIn } = useAuth();
72
-
73
- if (isSignedIn) {
74
- return null;
75
- }
76
-
77
- return <AuthView />;
78
- }
79
- ```
80
-
81
51
  For further information, guides, and examples visit the [Expo reference documentation](https://clerk.com/docs/references/expo/overview?utm_source=github&utm_medium=clerk_expo_native_components).
82
52
 
83
53
  ## Support
@@ -15,7 +15,7 @@ import type { AuthViewProps } from './AuthView.types';
15
15
  *
16
16
  * @example
17
17
  * ```tsx
18
- * import { AuthView } from '@clerk/expo-native-components';
18
+ * import { AuthView } from '@clerk/expo/native-components';
19
19
  * import { useAuth } from '@clerk/expo';
20
20
  *
21
21
  * export default function SignInScreen() {
package/dist/AuthView.js CHANGED
@@ -24,7 +24,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
24
24
  *
25
25
  * @example
26
26
  * ```tsx
27
- * import { AuthView } from '@clerk/expo-native-components';
27
+ * import { AuthView } from '@clerk/expo/native-components';
28
28
  * import { useAuth } from '@clerk/expo';
29
29
  *
30
30
  * export default function SignInScreen() {
@@ -1 +1 @@
1
- {"version":3,"file":"AuthView.js","names":["isNativeSupported","NativeClerkAuthView","View","Text"],"sources":["../src/AuthView.tsx"],"sourcesContent":["import { useCallback } from 'react';\nimport type { NativeSyntheticEvent } from 'react-native';\nimport { Text, View } from 'react-native';\n\nimport type { AuthViewProps } from './AuthView.types';\nimport NativeClerkAuthView from './specs/NativeClerkAuthView';\nimport { isNativeSupported } from './utils/native-module';\n\ntype AuthNativeEvent = NativeSyntheticEvent<Readonly<{ type: string }>>;\n\n/**\n * A pre-built native authentication component that handles sign-in and sign-up flows.\n *\n * `AuthView` renders inline within your React Native view hierarchy, powered by:\n * - **iOS**: clerk-ios (SwiftUI) - https://github.com/clerk/clerk-ios\n * - **Android**: clerk-android (Jetpack Compose) - https://github.com/clerk/clerk-android\n *\n * After authentication completes, the session is automatically synced with the JS SDK.\n * Use `useAuth()`, `useUser()`, or `useSession()` to react to authentication\n * state changes.\n *\n * To push the auth flow onto your own navigation stack, hide the route's header and\n * pass `onHostBack` so Clerk's own chrome takes over.\n *\n * @example\n * ```tsx\n * import { AuthView } from '@clerk/expo-native-components';\n * import { useAuth } from '@clerk/expo';\n *\n * export default function SignInScreen() {\n * const { isSignedIn } = useAuth();\n *\n * useEffect(() => {\n * if (isSignedIn) router.replace('/home');\n * }, [isSignedIn]);\n *\n * return <AuthView />;\n * }\n * ```\n *\n * @see {@link https://clerk.com/docs/components/authentication/sign-in} Clerk Sign-In Documentation\n */\nexport function AuthView({\n logo,\n mode = 'signInOrUp',\n isDismissible = true,\n logoMaxHeight,\n onDismiss,\n onHostBack,\n}: AuthViewProps) {\n const handleAuthEvent = useCallback(\n (event: AuthNativeEvent) => {\n if (event.nativeEvent.type === 'dismissed') {\n onDismiss?.();\n }\n },\n [onDismiss],\n );\n\n if (!isNativeSupported || !NativeClerkAuthView) {\n return (\n <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>\n <Text style={{ fontSize: 16, color: '#666' }}>\n {!isNativeSupported\n ? 'Native AuthView is only available on iOS and Android'\n : 'Native AuthView requires a development build with the @clerk/expo-native-components config plugin. Add \"@clerk/expo-native-components\" to your app.json plugins array and rebuild your native app.'}\n </Text>\n </View>\n );\n }\n\n return (\n <NativeClerkAuthView\n style={{ flex: 1 }}\n mode={mode}\n isDismissible={isDismissible}\n logoMaxHeight={logoMaxHeight}\n hostBackButton={!!onHostBack}\n onAuthEvent={handleAuthEvent}\n onHostBack={onHostBack ? () => onHostBack() : undefined}\n >\n {logo ? (\n <View\n collapsable={false}\n style={{ alignSelf: 'flex-start' }}\n >\n {logo}\n </View>\n ) : null}\n </NativeClerkAuthView>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CA,SAAgB,SAAS,EACvB,MACA,OAAO,cACP,gBAAgB,MAChB,eACA,WACA,cACgB;CAChB,MAAM,0CACH,UAA2B;EAC1B,IAAI,MAAM,YAAY,SAAS,aAC7B,YAAY;CAEhB,GACA,CAAC,SAAS,CACZ;CAEA,IAAI,CAACA,6CAAqB,CAACC,uCACzB,OACE,2CAACC,mBAAD;EAAM,OAAO;GAAE,MAAM;GAAG,gBAAgB;GAAU,YAAY;EAAS;YACrE,2CAACC,mBAAD;GAAM,OAAO;IAAE,UAAU;IAAI,OAAO;GAAO;aACxC,CAACH,4CACE,yDACA;EACA;CACF;CAIV,OACE,2CAACC,uCAAD;EACE,OAAO,EAAE,MAAM,EAAE;EACX;EACS;EACA;EACf,gBAAgB,CAAC,CAAC;EAClB,aAAa;EACb,YAAY,mBAAmB,WAAW,IAAI;YAE7C,OACC,2CAACC,mBAAD;GACE,aAAa;GACb,OAAO,EAAE,WAAW,aAAa;aAEhC;EACG,KACJ;CACe;AAEzB"}
1
+ {"version":3,"file":"AuthView.js","names":["isNativeSupported","NativeClerkAuthView","View","Text"],"sources":["../src/AuthView.tsx"],"sourcesContent":["import { useCallback } from 'react';\nimport type { NativeSyntheticEvent } from 'react-native';\nimport { Text, View } from 'react-native';\n\nimport type { AuthViewProps } from './AuthView.types';\nimport NativeClerkAuthView from './specs/NativeClerkAuthView';\nimport { isNativeSupported } from './utils/native-module';\n\ntype AuthNativeEvent = NativeSyntheticEvent<Readonly<{ type: string }>>;\n\n/**\n * A pre-built native authentication component that handles sign-in and sign-up flows.\n *\n * `AuthView` renders inline within your React Native view hierarchy, powered by:\n * - **iOS**: clerk-ios (SwiftUI) - https://github.com/clerk/clerk-ios\n * - **Android**: clerk-android (Jetpack Compose) - https://github.com/clerk/clerk-android\n *\n * After authentication completes, the session is automatically synced with the JS SDK.\n * Use `useAuth()`, `useUser()`, or `useSession()` to react to authentication\n * state changes.\n *\n * To push the auth flow onto your own navigation stack, hide the route's header and\n * pass `onHostBack` so Clerk's own chrome takes over.\n *\n * @example\n * ```tsx\n * import { AuthView } from '@clerk/expo/native-components';\n * import { useAuth } from '@clerk/expo';\n *\n * export default function SignInScreen() {\n * const { isSignedIn } = useAuth();\n *\n * useEffect(() => {\n * if (isSignedIn) router.replace('/home');\n * }, [isSignedIn]);\n *\n * return <AuthView />;\n * }\n * ```\n *\n * @see {@link https://clerk.com/docs/components/authentication/sign-in} Clerk Sign-In Documentation\n */\nexport function AuthView({\n logo,\n mode = 'signInOrUp',\n isDismissible = true,\n logoMaxHeight,\n onDismiss,\n onHostBack,\n}: AuthViewProps) {\n const handleAuthEvent = useCallback(\n (event: AuthNativeEvent) => {\n if (event.nativeEvent.type === 'dismissed') {\n onDismiss?.();\n }\n },\n [onDismiss],\n );\n\n if (!isNativeSupported || !NativeClerkAuthView) {\n return (\n <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>\n <Text style={{ fontSize: 16, color: '#666' }}>\n {!isNativeSupported\n ? 'Native AuthView is only available on iOS and Android'\n : 'Native AuthView requires a development build with the @clerk/expo-native-components config plugin. Add \"@clerk/expo-native-components\" to your app.json plugins array and rebuild your native app.'}\n </Text>\n </View>\n );\n }\n\n return (\n <NativeClerkAuthView\n style={{ flex: 1 }}\n mode={mode}\n isDismissible={isDismissible}\n logoMaxHeight={logoMaxHeight}\n hostBackButton={!!onHostBack}\n onAuthEvent={handleAuthEvent}\n onHostBack={onHostBack ? () => onHostBack() : undefined}\n >\n {logo ? (\n <View\n collapsable={false}\n style={{ alignSelf: 'flex-start' }}\n >\n {logo}\n </View>\n ) : null}\n </NativeClerkAuthView>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CA,SAAgB,SAAS,EACvB,MACA,OAAO,cACP,gBAAgB,MAChB,eACA,WACA,cACgB;CAChB,MAAM,0CACH,UAA2B;EAC1B,IAAI,MAAM,YAAY,SAAS,aAC7B,YAAY;CAEhB,GACA,CAAC,SAAS,CACZ;CAEA,IAAI,CAACA,6CAAqB,CAACC,uCACzB,OACE,2CAACC,mBAAD;EAAM,OAAO;GAAE,MAAM;GAAG,gBAAgB;GAAU,YAAY;EAAS;YACrE,2CAACC,mBAAD;GAAM,OAAO;IAAE,UAAU;IAAI,OAAO;GAAO;aACxC,CAACH,4CACE,yDACA;EACA;CACF;CAIV,OACE,2CAACC,uCAAD;EACE,OAAO,EAAE,MAAM,EAAE;EACX;EACS;EACA;EACf,gBAAgB,CAAC,CAAC;EAClB,aAAa;EACb,YAAY,mBAAmB,WAAW,IAAI;YAE7C,OACC,2CAACC,mBAAD;GACE,aAAa;GACb,OAAO,EAAE,WAAW,aAAa;aAEhC;EACG,KACJ;CACe;AAEzB"}
@@ -18,7 +18,7 @@ export interface UserButtonProps {
18
18
  *
19
19
  * @example
20
20
  * ```tsx
21
- * import { UserButton } from '@clerk/expo-native-components';
21
+ * import { UserButton } from '@clerk/expo/native-components';
22
22
  *
23
23
  * export default function Home() {
24
24
  * return (
@@ -18,7 +18,7 @@ const CustomizableNativeClerkUserButtonView = src_specs_NativeClerkUserButtonVie
18
18
  *
19
19
  * @example
20
20
  * ```tsx
21
- * import { UserButton } from '@clerk/expo-native-components';
21
+ * import { UserButton } from '@clerk/expo/native-components';
22
22
  *
23
23
  * export default function Home() {
24
24
  * return (
@@ -1 +1 @@
1
- {"version":3,"file":"UserButton.js","names":["NativeClerkUserButtonView","isNativeSupported","UserProfileCustomPageHosts","StyleSheet"],"sources":["../src/UserButton.tsx"],"sourcesContent":["import type { ComponentProps, ComponentType, JSX, Ref } from 'react';\nimport { useMemo, useRef } from 'react';\nimport type { NativeSyntheticEvent } from 'react-native';\nimport { StyleSheet, useWindowDimensions } from 'react-native';\n\nimport NativeClerkUserButtonView from './specs/NativeClerkUserButtonView';\nimport type {\n NativeUserProfileNavigationHandle,\n UserProfileCustomDestination,\n UserProfileCustomPage,\n UserProfileCustomPageEvent,\n} from './UserProfileCustomPages';\nimport {\n serializeUserProfileCustomPages,\n UserProfileCustomPageHosts,\n useUserProfileCustomPages,\n} from './UserProfileCustomPages';\nimport { isNativeSupported } from './utils/native-module';\n\ntype CustomizableNativeUserButtonProps = ComponentProps<NonNullable<typeof NativeClerkUserButtonView>> & {\n customPages?: string;\n onCustomPageEvent?: (event: NativeSyntheticEvent<UserProfileCustomPageEvent>) => void;\n ref?: Ref<NativeUserProfileNavigationHandle>;\n};\n\nconst CustomizableNativeClerkUserButtonView =\n NativeClerkUserButtonView as ComponentType<CustomizableNativeUserButtonProps> | null;\n\nexport interface UserButtonUserProfileProps {\n /** Custom pages displayed as rows in the user profile. */\n customPages?: UserProfileCustomPage[];\n\n /** Custom destinations that can be pushed from a custom page without creating a profile row. */\n customDestinations?: UserProfileCustomDestination[];\n}\n\nexport interface UserButtonProps {\n /** Configuration passed to the user profile opened by the button. */\n userProfileProps?: UserButtonUserProfileProps;\n}\n\n/**\n * A pre-built button component that displays the user's avatar.\n *\n * `UserButton` renders the platform-native Clerk user button. Tapping it opens\n * the native user profile surface, matching Clerk's iOS and Android SDKs.\n *\n * @example\n * ```tsx\n * import { UserButton } from '@clerk/expo-native-components';\n *\n * export default function Home() {\n * return (\n * <UserButton\n * userProfileProps={{\n * customPages: [{ path: 'api-keys', label: 'API keys', icon: 'key', content: <APIKeysView /> }],\n * }}\n * />\n * );\n * }\n * ```\n *\n * @see {@link UserProfileView} The profile view to render in your own presentation surface\n * @see {@link https://clerk.com/docs/components/user/user-button} Clerk UserButton Documentation\n */\nexport function UserButton({ userProfileProps }: UserButtonProps): JSX.Element | null {\n const nativeViewRef = useRef<NativeUserProfileNavigationHandle>(null);\n const customPages = userProfileProps?.customPages;\n const customDestinations = userProfileProps?.customDestinations;\n const customRoutes = useMemo(\n () => [...(customPages ?? []), ...(customDestinations ?? [])],\n [customDestinations, customPages],\n );\n const { navigation, presentedPaths, onCustomPageEvent } = useUserProfileCustomPages(customRoutes, nativeViewRef);\n const { width, height } = useWindowDimensions();\n\n if (!isNativeSupported || !CustomizableNativeClerkUserButtonView) {\n return null;\n }\n\n return (\n <CustomizableNativeClerkUserButtonView\n ref={nativeViewRef}\n style={styles.host}\n customPages={serializeUserProfileCustomPages(customPages ?? [], customDestinations ?? [])}\n onCustomPageEvent={onCustomPageEvent}\n >\n <UserProfileCustomPageHosts\n customRoutes={customRoutes}\n presentedPaths={presentedPaths}\n navigation={navigation}\n style={{ width, height }}\n />\n </CustomizableNativeClerkUserButtonView>\n );\n}\n\nconst styles = StyleSheet.create({\n // React Native/Yoga does not infer the intrinsic size of this native host view.\n host: {\n width: 36,\n height: 36,\n },\n});\n"],"mappings":";;;;;;;;;;;AAyBA,MAAM,wCACJA;;;;;;;;;;;;;;;;;;;;;;;;;AAuCF,SAAgB,WAAW,EAAE,oBAAyD;CACpF,MAAM,kCAA0D,IAAI;CACpE,MAAM,cAAc,kBAAkB;CACtC,MAAM,qBAAqB,kBAAkB;CAC7C,MAAM,wCACE,CAAC,GAAI,eAAe,CAAC,GAAI,GAAI,sBAAsB,CAAC,CAAE,GAC5D,CAAC,oBAAoB,WAAW,CAClC;CACA,MAAM,EAAE,YAAY,gBAAgB,gFAAgD,cAAc,aAAa;CAC/G,MAAM,EAAE,OAAO,iDAA+B;CAE9C,IAAI,CAACC,6CAAqB,CAAC,uCACzB,OAAO;CAGT,OACE,2CAAC,uCAAD;EACE,KAAK;EACL,OAAO,OAAO;EACd,6EAA6C,eAAe,CAAC,GAAG,sBAAsB,CAAC,CAAC;EACrE;YAEnB,2CAACC,uDAAD;GACgB;GACE;GACJ;GACZ,OAAO;IAAE;IAAO;GAAO;EACxB;CACoC;AAE3C;AAEA,MAAM,SAASC,wBAAW,OAAO,EAE/B,MAAM;CACJ,OAAO;CACP,QAAQ;AACV,EACF,CAAC"}
1
+ {"version":3,"file":"UserButton.js","names":["NativeClerkUserButtonView","isNativeSupported","UserProfileCustomPageHosts","StyleSheet"],"sources":["../src/UserButton.tsx"],"sourcesContent":["import type { ComponentProps, ComponentType, JSX, Ref } from 'react';\nimport { useMemo, useRef } from 'react';\nimport type { NativeSyntheticEvent } from 'react-native';\nimport { StyleSheet, useWindowDimensions } from 'react-native';\n\nimport NativeClerkUserButtonView from './specs/NativeClerkUserButtonView';\nimport type {\n NativeUserProfileNavigationHandle,\n UserProfileCustomDestination,\n UserProfileCustomPage,\n UserProfileCustomPageEvent,\n} from './UserProfileCustomPages';\nimport {\n serializeUserProfileCustomPages,\n UserProfileCustomPageHosts,\n useUserProfileCustomPages,\n} from './UserProfileCustomPages';\nimport { isNativeSupported } from './utils/native-module';\n\ntype CustomizableNativeUserButtonProps = ComponentProps<NonNullable<typeof NativeClerkUserButtonView>> & {\n customPages?: string;\n onCustomPageEvent?: (event: NativeSyntheticEvent<UserProfileCustomPageEvent>) => void;\n ref?: Ref<NativeUserProfileNavigationHandle>;\n};\n\nconst CustomizableNativeClerkUserButtonView =\n NativeClerkUserButtonView as ComponentType<CustomizableNativeUserButtonProps> | null;\n\nexport interface UserButtonUserProfileProps {\n /** Custom pages displayed as rows in the user profile. */\n customPages?: UserProfileCustomPage[];\n\n /** Custom destinations that can be pushed from a custom page without creating a profile row. */\n customDestinations?: UserProfileCustomDestination[];\n}\n\nexport interface UserButtonProps {\n /** Configuration passed to the user profile opened by the button. */\n userProfileProps?: UserButtonUserProfileProps;\n}\n\n/**\n * A pre-built button component that displays the user's avatar.\n *\n * `UserButton` renders the platform-native Clerk user button. Tapping it opens\n * the native user profile surface, matching Clerk's iOS and Android SDKs.\n *\n * @example\n * ```tsx\n * import { UserButton } from '@clerk/expo/native-components';\n *\n * export default function Home() {\n * return (\n * <UserButton\n * userProfileProps={{\n * customPages: [{ path: 'api-keys', label: 'API keys', icon: 'key', content: <APIKeysView /> }],\n * }}\n * />\n * );\n * }\n * ```\n *\n * @see {@link UserProfileView} The profile view to render in your own presentation surface\n * @see {@link https://clerk.com/docs/components/user/user-button} Clerk UserButton Documentation\n */\nexport function UserButton({ userProfileProps }: UserButtonProps): JSX.Element | null {\n const nativeViewRef = useRef<NativeUserProfileNavigationHandle>(null);\n const customPages = userProfileProps?.customPages;\n const customDestinations = userProfileProps?.customDestinations;\n const customRoutes = useMemo(\n () => [...(customPages ?? []), ...(customDestinations ?? [])],\n [customDestinations, customPages],\n );\n const { navigation, presentedPaths, onCustomPageEvent } = useUserProfileCustomPages(customRoutes, nativeViewRef);\n const { width, height } = useWindowDimensions();\n\n if (!isNativeSupported || !CustomizableNativeClerkUserButtonView) {\n return null;\n }\n\n return (\n <CustomizableNativeClerkUserButtonView\n ref={nativeViewRef}\n style={styles.host}\n customPages={serializeUserProfileCustomPages(customPages ?? [], customDestinations ?? [])}\n onCustomPageEvent={onCustomPageEvent}\n >\n <UserProfileCustomPageHosts\n customRoutes={customRoutes}\n presentedPaths={presentedPaths}\n navigation={navigation}\n style={{ width, height }}\n />\n </CustomizableNativeClerkUserButtonView>\n );\n}\n\nconst styles = StyleSheet.create({\n // React Native/Yoga does not infer the intrinsic size of this native host view.\n host: {\n width: 36,\n height: 36,\n },\n});\n"],"mappings":";;;;;;;;;;;AAyBA,MAAM,wCACJA;;;;;;;;;;;;;;;;;;;;;;;;;AAuCF,SAAgB,WAAW,EAAE,oBAAyD;CACpF,MAAM,kCAA0D,IAAI;CACpE,MAAM,cAAc,kBAAkB;CACtC,MAAM,qBAAqB,kBAAkB;CAC7C,MAAM,wCACE,CAAC,GAAI,eAAe,CAAC,GAAI,GAAI,sBAAsB,CAAC,CAAE,GAC5D,CAAC,oBAAoB,WAAW,CAClC;CACA,MAAM,EAAE,YAAY,gBAAgB,gFAAgD,cAAc,aAAa;CAC/G,MAAM,EAAE,OAAO,iDAA+B;CAE9C,IAAI,CAACC,6CAAqB,CAAC,uCACzB,OAAO;CAGT,OACE,2CAAC,uCAAD;EACE,KAAK;EACL,OAAO,OAAO;EACd,6EAA6C,eAAe,CAAC,GAAG,sBAAsB,CAAC,CAAC;EACrE;YAEnB,2CAACC,uDAAD;GACgB;GACE;GACJ;GACZ,OAAO;IAAE;IAAO;GAAO;EACxB;CACoC;AAE3C;AAEA,MAAM,SAASC,wBAAW,OAAO,EAE/B,MAAM;CACJ,OAAO;CACP,QAAQ;AACV,EACF,CAAC"}
@@ -45,7 +45,7 @@ export interface UserProfileViewProps extends EmbeddedNavigationProps {
45
45
  *
46
46
  * @example
47
47
  * ```tsx
48
- * import { UserProfileView } from '@clerk/expo-native-components';
48
+ * import { UserProfileView } from '@clerk/expo/native-components';
49
49
  * import { useAuth } from '@clerk/expo';
50
50
  *
51
51
  * export default function ProfileScreen() {
@@ -27,7 +27,7 @@ const CustomizableNativeClerkUserProfileView = src_specs_NativeClerkUserProfileV
27
27
  *
28
28
  * @example
29
29
  * ```tsx
30
- * import { UserProfileView } from '@clerk/expo-native-components';
30
+ * import { UserProfileView } from '@clerk/expo/native-components';
31
31
  * import { useAuth } from '@clerk/expo';
32
32
  *
33
33
  * export default function ProfileScreen() {
@@ -1 +1 @@
1
- {"version":3,"file":"UserProfileView.js","names":["NativeClerkUserProfileView","isNativeSupported","View","Text","UserProfileCustomPageHosts","StyleSheet"],"sources":["../src/UserProfileView.tsx"],"sourcesContent":["import type { ComponentProps, ComponentType, JSX, Ref } from 'react';\nimport { useCallback, useMemo, useRef } from 'react';\nimport type { NativeSyntheticEvent, StyleProp, ViewStyle } from 'react-native';\nimport { StyleSheet, Text, View } from 'react-native';\n\nimport type { EmbeddedNavigationProps } from './EmbeddedNavigation.types';\nimport NativeClerkUserProfileView from './specs/NativeClerkUserProfileView';\nimport type {\n NativeUserProfileNavigationHandle,\n UserProfileCustomDestination,\n UserProfileCustomPage,\n UserProfileCustomPageEvent,\n} from './UserProfileCustomPages';\nimport {\n serializeUserProfileCustomPages,\n UserProfileCustomPageHosts,\n useUserProfileCustomPages,\n} from './UserProfileCustomPages';\nimport { isNativeSupported } from './utils/native-module';\n\ntype CustomizableNativeUserProfileProps = ComponentProps<NonNullable<typeof NativeClerkUserProfileView>> & {\n customPages?: string;\n onCustomPageEvent?: (event: NativeSyntheticEvent<UserProfileCustomPageEvent>) => void;\n ref?: Ref<NativeUserProfileNavigationHandle>;\n};\n\nconst CustomizableNativeClerkUserProfileView =\n NativeClerkUserProfileView as ComponentType<CustomizableNativeUserProfileProps> | null;\n\n/**\n * Props for the UserProfileView component.\n */\nexport interface UserProfileViewProps extends EmbeddedNavigationProps {\n /**\n * Whether the inline profile view shows a dismiss button.\n *\n * This controls the native view's built-in dismiss button. It does not present\n * a modal; render `UserProfileView` inside your own `Modal`, sheet, or route.\n *\n * @default true\n */\n isDismissible?: boolean;\n\n /**\n * Style applied to the container view.\n */\n style?: StyleProp<ViewStyle>;\n\n /**\n * Called when the user dismisses the native profile view.\n */\n onDismiss?: () => void;\n\n /** Custom pages displayed as rows in the root profile screen. */\n customPages?: UserProfileCustomPage[];\n\n /** Custom destinations that can be pushed from a custom page without creating a root profile row. */\n customDestinations?: UserProfileCustomDestination[];\n}\n\n/**\n * A pre-built native component for managing the user's profile and account settings.\n *\n * `UserProfileView` renders inline within your React Native view hierarchy, powered by:\n * - **iOS**: clerk-ios (SwiftUI) - https://github.com/clerk/clerk-ios\n * - **Android**: clerk-android (Jetpack Compose) - https://github.com/clerk/clerk-android\n *\n * To present the profile, render it inside your own `Modal`, sheet, or route.\n *\n * To push the profile onto your own navigation stack, hide the route's header and\n * pass `onHostBack` so Clerk's own chrome takes over.\n *\n * Sign-out is detected automatically and synced with the JS SDK. Use `useAuth()` in a\n * `useEffect` to react to sign-out.\n *\n * @example\n * ```tsx\n * import { UserProfileView } from '@clerk/expo-native-components';\n * import { useAuth } from '@clerk/expo';\n *\n * export default function ProfileScreen() {\n * const { isSignedIn } = useAuth();\n *\n * useEffect(() => {\n * if (!isSignedIn) router.replace('/sign-in');\n * }, [isSignedIn]);\n *\n * return (\n * <UserProfileView\n * style={{ flex: 1 }}\n * customPages={[\n * { path: 'billing', label: 'Billing', icon: 'billing', content: <BillingView /> },\n * { path: 'docs', label: 'Docs', icon: 'book', href: 'https://clerk.com/docs' },\n * ]}\n * customDestinations={[\n * { path: 'invoice-details', label: 'Invoice details', content: <InvoiceDetailsView /> },\n * ]}\n * />\n * );\n * }\n * ```\n *\n * @see {@link https://clerk.com/docs/components/user/user-profile} Clerk UserProfile Documentation\n */\nexport function UserProfileView({\n isDismissible = true,\n style,\n onDismiss,\n onHostBack,\n customPages = [],\n customDestinations = [],\n}: UserProfileViewProps): JSX.Element {\n const nativeViewRef = useRef<NativeUserProfileNavigationHandle>(null);\n const customRoutes = useMemo(() => [...customPages, ...customDestinations], [customDestinations, customPages]);\n const { navigation, presentedPaths, onCustomPageEvent } = useUserProfileCustomPages(customRoutes, nativeViewRef);\n const handleProfileEvent = useCallback(\n (event: { nativeEvent: { type: string } }) => {\n if (event.nativeEvent.type === 'dismissed') {\n onDismiss?.();\n }\n },\n [onDismiss],\n );\n\n if (!isNativeSupported || !CustomizableNativeClerkUserProfileView) {\n return (\n <View style={[styles.container, style]}>\n <Text style={styles.text}>\n {!isNativeSupported\n ? 'Native UserProfileView is only available on iOS and Android'\n : 'Native UserProfileView requires a development build with the @clerk/expo-native-components config plugin. Add \"@clerk/expo-native-components\" to your app.json plugins array and rebuild your native app.'}\n </Text>\n </View>\n );\n }\n\n return (\n <CustomizableNativeClerkUserProfileView\n ref={nativeViewRef}\n style={[styles.container, style]}\n isDismissible={isDismissible}\n hostBackButton={!!onHostBack}\n customPages={serializeUserProfileCustomPages(customPages, customDestinations)}\n onProfileEvent={handleProfileEvent}\n onCustomPageEvent={onCustomPageEvent}\n onHostBack={onHostBack ? () => onHostBack() : undefined}\n >\n <UserProfileCustomPageHosts\n customRoutes={customRoutes}\n presentedPaths={presentedPaths}\n navigation={navigation}\n />\n </CustomizableNativeClerkUserProfileView>\n );\n}\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n justifyContent: 'center',\n alignItems: 'center',\n },\n text: {\n fontSize: 16,\n color: '#666',\n },\n});\n"],"mappings":";;;;;;;;;;;AA0BA,MAAM,yCACJA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6EF,SAAgB,gBAAgB,EAC9B,gBAAgB,MAChB,OACA,WACA,YACA,cAAc,CAAC,GACf,qBAAqB,CAAC,KACc;CACpC,MAAM,kCAA0D,IAAI;CACpE,MAAM,wCAA6B,CAAC,GAAG,aAAa,GAAG,kBAAkB,GAAG,CAAC,oBAAoB,WAAW,CAAC;CAC7G,MAAM,EAAE,YAAY,gBAAgB,gFAAgD,cAAc,aAAa;CAC/G,MAAM,6CACH,UAA6C;EAC5C,IAAI,MAAM,YAAY,SAAS,aAC7B,YAAY;CAEhB,GACA,CAAC,SAAS,CACZ;CAEA,IAAI,CAACC,6CAAqB,CAAC,wCACzB,OACE,2CAACC,mBAAD;EAAM,OAAO,CAAC,OAAO,WAAW,KAAK;YACnC,2CAACC,mBAAD;GAAM,OAAO,OAAO;aACjB,CAACF,4CACE,gEACA;EACA;CACF;CAIV,OACE,2CAAC,wCAAD;EACE,KAAK;EACL,OAAO,CAAC,OAAO,WAAW,KAAK;EAChB;EACf,gBAAgB,CAAC,CAAC;EAClB,6EAA6C,aAAa,kBAAkB;EAC5E,gBAAgB;EACG;EACnB,YAAY,mBAAmB,WAAW,IAAI;YAE9C,2CAACG,uDAAD;GACgB;GACE;GACJ;EACb;CACqC;AAE5C;AAEA,MAAM,SAASC,wBAAW,OAAO;CAC/B,WAAW;EACT,MAAM;EACN,gBAAgB;EAChB,YAAY;CACd;CACA,MAAM;EACJ,UAAU;EACV,OAAO;CACT;AACF,CAAC"}
1
+ {"version":3,"file":"UserProfileView.js","names":["NativeClerkUserProfileView","isNativeSupported","View","Text","UserProfileCustomPageHosts","StyleSheet"],"sources":["../src/UserProfileView.tsx"],"sourcesContent":["import type { ComponentProps, ComponentType, JSX, Ref } from 'react';\nimport { useCallback, useMemo, useRef } from 'react';\nimport type { NativeSyntheticEvent, StyleProp, ViewStyle } from 'react-native';\nimport { StyleSheet, Text, View } from 'react-native';\n\nimport type { EmbeddedNavigationProps } from './EmbeddedNavigation.types';\nimport NativeClerkUserProfileView from './specs/NativeClerkUserProfileView';\nimport type {\n NativeUserProfileNavigationHandle,\n UserProfileCustomDestination,\n UserProfileCustomPage,\n UserProfileCustomPageEvent,\n} from './UserProfileCustomPages';\nimport {\n serializeUserProfileCustomPages,\n UserProfileCustomPageHosts,\n useUserProfileCustomPages,\n} from './UserProfileCustomPages';\nimport { isNativeSupported } from './utils/native-module';\n\ntype CustomizableNativeUserProfileProps = ComponentProps<NonNullable<typeof NativeClerkUserProfileView>> & {\n customPages?: string;\n onCustomPageEvent?: (event: NativeSyntheticEvent<UserProfileCustomPageEvent>) => void;\n ref?: Ref<NativeUserProfileNavigationHandle>;\n};\n\nconst CustomizableNativeClerkUserProfileView =\n NativeClerkUserProfileView as ComponentType<CustomizableNativeUserProfileProps> | null;\n\n/**\n * Props for the UserProfileView component.\n */\nexport interface UserProfileViewProps extends EmbeddedNavigationProps {\n /**\n * Whether the inline profile view shows a dismiss button.\n *\n * This controls the native view's built-in dismiss button. It does not present\n * a modal; render `UserProfileView` inside your own `Modal`, sheet, or route.\n *\n * @default true\n */\n isDismissible?: boolean;\n\n /**\n * Style applied to the container view.\n */\n style?: StyleProp<ViewStyle>;\n\n /**\n * Called when the user dismisses the native profile view.\n */\n onDismiss?: () => void;\n\n /** Custom pages displayed as rows in the root profile screen. */\n customPages?: UserProfileCustomPage[];\n\n /** Custom destinations that can be pushed from a custom page without creating a root profile row. */\n customDestinations?: UserProfileCustomDestination[];\n}\n\n/**\n * A pre-built native component for managing the user's profile and account settings.\n *\n * `UserProfileView` renders inline within your React Native view hierarchy, powered by:\n * - **iOS**: clerk-ios (SwiftUI) - https://github.com/clerk/clerk-ios\n * - **Android**: clerk-android (Jetpack Compose) - https://github.com/clerk/clerk-android\n *\n * To present the profile, render it inside your own `Modal`, sheet, or route.\n *\n * To push the profile onto your own navigation stack, hide the route's header and\n * pass `onHostBack` so Clerk's own chrome takes over.\n *\n * Sign-out is detected automatically and synced with the JS SDK. Use `useAuth()` in a\n * `useEffect` to react to sign-out.\n *\n * @example\n * ```tsx\n * import { UserProfileView } from '@clerk/expo/native-components';\n * import { useAuth } from '@clerk/expo';\n *\n * export default function ProfileScreen() {\n * const { isSignedIn } = useAuth();\n *\n * useEffect(() => {\n * if (!isSignedIn) router.replace('/sign-in');\n * }, [isSignedIn]);\n *\n * return (\n * <UserProfileView\n * style={{ flex: 1 }}\n * customPages={[\n * { path: 'billing', label: 'Billing', icon: 'billing', content: <BillingView /> },\n * { path: 'docs', label: 'Docs', icon: 'book', href: 'https://clerk.com/docs' },\n * ]}\n * customDestinations={[\n * { path: 'invoice-details', label: 'Invoice details', content: <InvoiceDetailsView /> },\n * ]}\n * />\n * );\n * }\n * ```\n *\n * @see {@link https://clerk.com/docs/components/user/user-profile} Clerk UserProfile Documentation\n */\nexport function UserProfileView({\n isDismissible = true,\n style,\n onDismiss,\n onHostBack,\n customPages = [],\n customDestinations = [],\n}: UserProfileViewProps): JSX.Element {\n const nativeViewRef = useRef<NativeUserProfileNavigationHandle>(null);\n const customRoutes = useMemo(() => [...customPages, ...customDestinations], [customDestinations, customPages]);\n const { navigation, presentedPaths, onCustomPageEvent } = useUserProfileCustomPages(customRoutes, nativeViewRef);\n const handleProfileEvent = useCallback(\n (event: { nativeEvent: { type: string } }) => {\n if (event.nativeEvent.type === 'dismissed') {\n onDismiss?.();\n }\n },\n [onDismiss],\n );\n\n if (!isNativeSupported || !CustomizableNativeClerkUserProfileView) {\n return (\n <View style={[styles.container, style]}>\n <Text style={styles.text}>\n {!isNativeSupported\n ? 'Native UserProfileView is only available on iOS and Android'\n : 'Native UserProfileView requires a development build with the @clerk/expo-native-components config plugin. Add \"@clerk/expo-native-components\" to your app.json plugins array and rebuild your native app.'}\n </Text>\n </View>\n );\n }\n\n return (\n <CustomizableNativeClerkUserProfileView\n ref={nativeViewRef}\n style={[styles.container, style]}\n isDismissible={isDismissible}\n hostBackButton={!!onHostBack}\n customPages={serializeUserProfileCustomPages(customPages, customDestinations)}\n onProfileEvent={handleProfileEvent}\n onCustomPageEvent={onCustomPageEvent}\n onHostBack={onHostBack ? () => onHostBack() : undefined}\n >\n <UserProfileCustomPageHosts\n customRoutes={customRoutes}\n presentedPaths={presentedPaths}\n navigation={navigation}\n />\n </CustomizableNativeClerkUserProfileView>\n );\n}\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n justifyContent: 'center',\n alignItems: 'center',\n },\n text: {\n fontSize: 16,\n color: '#666',\n },\n});\n"],"mappings":";;;;;;;;;;;AA0BA,MAAM,yCACJA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6EF,SAAgB,gBAAgB,EAC9B,gBAAgB,MAChB,OACA,WACA,YACA,cAAc,CAAC,GACf,qBAAqB,CAAC,KACc;CACpC,MAAM,kCAA0D,IAAI;CACpE,MAAM,wCAA6B,CAAC,GAAG,aAAa,GAAG,kBAAkB,GAAG,CAAC,oBAAoB,WAAW,CAAC;CAC7G,MAAM,EAAE,YAAY,gBAAgB,gFAAgD,cAAc,aAAa;CAC/G,MAAM,6CACH,UAA6C;EAC5C,IAAI,MAAM,YAAY,SAAS,aAC7B,YAAY;CAEhB,GACA,CAAC,SAAS,CACZ;CAEA,IAAI,CAACC,6CAAqB,CAAC,wCACzB,OACE,2CAACC,mBAAD;EAAM,OAAO,CAAC,OAAO,WAAW,KAAK;YACnC,2CAACC,mBAAD;GAAM,OAAO,OAAO;aACjB,CAACF,4CACE,gEACA;EACA;CACF;CAIV,OACE,2CAAC,wCAAD;EACE,KAAK;EACL,OAAO,CAAC,OAAO,WAAW,KAAK;EAChB;EACf,gBAAgB,CAAC,CAAC;EAClB,6EAA6C,aAAa,kBAAkB;EAC5E,gBAAgB;EACG;EACnB,YAAY,mBAAmB,WAAW,IAAI;YAE9C,2CAACG,uDAAD;GACgB;GACE;GACJ;EACb;CACqC;AAE5C;AAEA,MAAM,SAASC,wBAAW,OAAO;CAC/B,WAAW;EACT,MAAM;EACN,gBAAgB;EAChB,YAAY;CACd;CACA,MAAM;EACJ,UAAU;EACV,OAAO;CACT;AACF,CAAC"}
package/dist/index.d.ts CHANGED
@@ -30,8 +30,6 @@
30
30
  export { AuthView } from './AuthView';
31
31
  export type { AuthViewProps, AuthViewMode } from './AuthView.types';
32
32
  export type { EmbeddedNavigationProps } from './EmbeddedNavigation.types';
33
- export { useAuthViewState } from './useAuthViewState';
34
- export type { UseAuthViewStateReturn } from './useAuthViewState';
35
33
  export { UserButton } from './UserButton';
36
34
  export type { UserButtonProps, UserButtonUserProfileProps } from './UserButton';
37
35
  export { useUserProfileCustomPageNavigation } from './UserProfileCustomPages';
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAEH,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACpE,YAAY,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AAC1E,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,0BAA0B,EAAE,MAAM,cAAc,CAAC;AAChF,OAAO,EAAE,kCAAkC,EAAE,MAAM,0BAA0B,CAAC;AAC9E,YAAY,EACV,+BAA+B,EAC/B,4BAA4B,EAC5B,qBAAqB,EACrB,yBAAyB,EACzB,8BAA8B,EAC9B,cAAc,EACd,kBAAkB,GACnB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAEH,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACpE,YAAY,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,0BAA0B,EAAE,MAAM,cAAc,CAAC;AAChF,OAAO,EAAE,kCAAkC,EAAE,MAAM,0BAA0B,CAAC;AAC9E,YAAY,EACV,+BAA+B,EAC/B,4BAA4B,EAC5B,qBAAqB,EACrB,yBAAyB,EACzB,8BAA8B,EAC9B,cAAc,EACd,kBAAkB,GACnB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC"}
package/dist/index.js CHANGED
@@ -1,7 +1,6 @@
1
1
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
2
2
  let src_UserProfileCustomPages = require("./UserProfileCustomPages");
3
3
  let src_AuthView = require("./AuthView");
4
- let src_useAuthViewState = require("./useAuthViewState");
5
4
  let src_UserButton = require("./UserButton");
6
5
  let src_UserProfileView = require("./UserProfileView");
7
6
 
@@ -23,12 +22,6 @@ Object.defineProperty(exports, 'UserProfileView', {
23
22
  return src_UserProfileView.UserProfileView;
24
23
  }
25
24
  });
26
- Object.defineProperty(exports, 'useAuthViewState', {
27
- enumerable: true,
28
- get: function () {
29
- return src_useAuthViewState.useAuthViewState;
30
- }
31
- });
32
25
  Object.defineProperty(exports, 'useUserProfileCustomPageNavigation', {
33
26
  enumerable: true,
34
27
  get: function () {
@@ -1,3 +1,2 @@
1
1
  export declare const isNativeSupported: boolean;
2
- export declare const ClerkExpoModule: import("../specs/NativeClerkModule.types").Spec | null;
3
2
  //# sourceMappingURL=native-module.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"native-module.d.ts","sourceRoot":"","sources":["../../src/utils/native-module.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,iBAAiB,SAAqD,CAAC;AAEpF,eAAO,MAAM,eAAe,wDAA+C,CAAC"}
1
+ {"version":3,"file":"native-module.d.ts","sourceRoot":"","sources":["../../src/utils/native-module.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,SAAqD,CAAC"}
@@ -1,14 +1,9 @@
1
1
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
2
- const require_runtime = require('../_virtual/_rolldown/runtime.js');
3
2
  let react_native = require("react-native");
4
- let src_specs_NativeClerkModule = require("../specs/NativeClerkModule");
5
- src_specs_NativeClerkModule = require_runtime.__toESM(src_specs_NativeClerkModule);
6
3
 
7
4
  //#region src/utils/native-module.ts
8
5
  const isNativeSupported = react_native.Platform.OS === "ios" || react_native.Platform.OS === "android";
9
- const ClerkExpoModule = isNativeSupported ? src_specs_NativeClerkModule.default : null;
10
6
 
11
7
  //#endregion
12
- exports.ClerkExpoModule = ClerkExpoModule;
13
8
  exports.isNativeSupported = isNativeSupported;
14
9
  //# sourceMappingURL=native-module.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"native-module.js","names":["Platform","NativeClerkModule"],"sources":["../../src/utils/native-module.ts"],"sourcesContent":["import { Platform } from 'react-native';\n\nimport NativeClerkModule from '../specs/NativeClerkModule';\n\nexport const isNativeSupported = Platform.OS === 'ios' || Platform.OS === 'android';\n\nexport const ClerkExpoModule = isNativeSupported ? NativeClerkModule : null;\n"],"mappings":";;;;;;;AAIA,MAAa,oBAAoBA,sBAAS,OAAO,SAASA,sBAAS,OAAO;AAE1E,MAAa,kBAAkB,oBAAoBC,sCAAoB"}
1
+ {"version":3,"file":"native-module.js","names":["Platform"],"sources":["../../src/utils/native-module.ts"],"sourcesContent":["import { Platform } from 'react-native';\n\nexport const isNativeSupported = Platform.OS === 'ios' || Platform.OS === 'android';\n"],"mappings":";;;;AAEA,MAAa,oBAAoBA,sBAAS,OAAO,SAASA,sBAAS,OAAO"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@clerk/expo-native-components",
3
- "version": "0.0.1",
3
+ "version": "0.1.0",
4
4
  "description": "Native Clerk components and native SDK integration for Expo, powered by clerk-ios and clerk-android",
5
5
  "keywords": [
6
6
  "react",
@@ -44,8 +44,7 @@
44
44
  "app.plugin.d.ts"
45
45
  ],
46
46
  "dependencies": {
47
- "tslib": "2.8.1",
48
- "@clerk/react": "^6.17.7"
47
+ "tslib": "2.8.1"
49
48
  },
50
49
  "devDependencies": {
51
50
  "@expo/config-plugins": "^54.0.4",
@@ -1,4 +0,0 @@
1
- import type { Spec } from './NativeClerkModule.types';
2
- declare const _default: Spec | null;
3
- export default _default;
4
- //# sourceMappingURL=NativeClerkModule.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"NativeClerkModule.d.ts","sourceRoot":"","sources":["../../src/specs/NativeClerkModule.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAC;;AAGtD,wBAA8D"}
@@ -1,8 +0,0 @@
1
- let expo = require("expo");
2
-
3
- //#region src/specs/NativeClerkModule.ts
4
- var NativeClerkModule_default = (0, expo.requireOptionalNativeModule)("ClerkExpo");
5
-
6
- //#endregion
7
- module.exports = NativeClerkModule_default;
8
- //# sourceMappingURL=NativeClerkModule.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"NativeClerkModule.js","names":[],"sources":["../../src/specs/NativeClerkModule.ts"],"sourcesContent":["import { requireOptionalNativeModule } from 'expo';\n\nimport type { Spec } from './NativeClerkModule.types';\n\n// Optional so it resolves to null in Expo Go instead of throwing at import time.\nexport default requireOptionalNativeModule<Spec>('ClerkExpo');\n"],"mappings":";;;AAKA,sEAAiD,WAAW"}
@@ -1,11 +0,0 @@
1
- export type NativeAuthFlowState = {
2
- isLoaded: boolean;
3
- isAuthFlowComplete: boolean;
4
- };
5
- export interface Spec {
6
- addListener?(eventName: string, listener?: (...args: unknown[]) => void): {
7
- remove: () => void;
8
- };
9
- getAuthFlowState?(): Promise<NativeAuthFlowState>;
10
- }
11
- //# sourceMappingURL=NativeClerkModule.types.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"NativeClerkModule.types.d.ts","sourceRoot":"","sources":["../../src/specs/NativeClerkModule.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,EAAE,OAAO,CAAC;IAClB,kBAAkB,EAAE,OAAO,CAAC;CAC7B,CAAC;AAEF,MAAM,WAAW,IAAI;IACnB,WAAW,CAAC,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,IAAI,GAAG;QAAE,MAAM,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;IACjG,gBAAgB,CAAC,IAAI,OAAO,CAAC,mBAAmB,CAAC,CAAC;CACnD"}
File without changes
@@ -1,4 +0,0 @@
1
- import type { Spec } from './NativeClerkModule.types';
2
- declare const _default: Spec | null;
3
- export default _default;
4
- //# sourceMappingURL=NativeClerkModule.web.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"NativeClerkModule.web.d.ts","sourceRoot":"","sources":["../../src/specs/NativeClerkModule.web.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAC;wBAE/B,IAAI,GAAG,IAAI;AAAlC,wBAAmC"}
@@ -1,7 +0,0 @@
1
-
2
- //#region src/specs/NativeClerkModule.web.ts
3
- var NativeClerkModule_web_default = null;
4
-
5
- //#endregion
6
- module.exports = NativeClerkModule_web_default;
7
- //# sourceMappingURL=NativeClerkModule.web.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"NativeClerkModule.web.js","names":[],"sources":["../../src/specs/NativeClerkModule.web.ts"],"sourcesContent":["import type { Spec } from './NativeClerkModule.types';\n\nexport default null as Spec | null;\n"],"mappings":";;AAEA,oCAAe"}
@@ -1,12 +0,0 @@
1
- import type { NativeAuthFlowState } from './specs/NativeClerkModule.types';
2
- export type UseAuthViewStateReturn = NativeAuthFlowState;
3
- /**
4
- * Reports when authentication and an optional biometric-credential enrollment prompt are complete.
5
- *
6
- * Use this hook when biometric-credential enrollment prompts are enabled and a
7
- * non-dismissible root `AuthView` must remain mounted until the prompt finishes.
8
- * On platforms without native auth-flow completion state, it falls back to the
9
- * JS session state.
10
- */
11
- export declare function useAuthViewState(): UseAuthViewStateReturn;
12
- //# sourceMappingURL=useAuthViewState.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useAuthViewState.d.ts","sourceRoot":"","sources":["../src/useAuthViewState.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iCAAiC,CAAC;AAK3E,MAAM,MAAM,sBAAsB,GAAG,mBAAmB,CAAC;AA2BzD;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,IAAI,sBAAsB,CA4EzD"}
@@ -1,76 +0,0 @@
1
- Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
2
- let react = require("react");
3
- let src_utils_native_module = require("./utils/native-module");
4
- let _clerk_react = require("@clerk/react");
5
-
6
- //#region src/useAuthViewState.ts
7
- const nativeAuthFlowChangedEvent = "clerkNativeAuthFlowChanged";
8
- const initialNativeState = {
9
- isLoaded: false,
10
- isAuthFlowComplete: false
11
- };
12
- function getNativeAuthFlowModule() {
13
- if (src_utils_native_module.ClerkExpoModule && typeof src_utils_native_module.ClerkExpoModule.addListener === "function" && typeof src_utils_native_module.ClerkExpoModule.getAuthFlowState === "function") return src_utils_native_module.ClerkExpoModule;
14
- return null;
15
- }
16
- function isNativeAuthFlowState(state) {
17
- return typeof state?.isLoaded === "boolean" && typeof state.isAuthFlowComplete === "boolean";
18
- }
19
- /**
20
- * Reports when authentication and an optional biometric-credential enrollment prompt are complete.
21
- *
22
- * Use this hook when biometric-credential enrollment prompts are enabled and a
23
- * non-dismissible root `AuthView` must remain mounted until the prompt finishes.
24
- * On platforms without native auth-flow completion state, it falls back to the
25
- * JS session state.
26
- */
27
- function useAuthViewState() {
28
- const { isLoaded: isJsLoaded, isSignedIn } = (0, _clerk_react.useAuth)({ treatPendingAsSignedOut: false });
29
- const [nativeState, setNativeState] = (0, react.useState)(initialNativeState);
30
- const [useJsFallback, setUseJsFallback] = (0, react.useState)(false);
31
- const nativeModule = getNativeAuthFlowModule();
32
- (0, react.useEffect)(() => {
33
- if (!nativeModule) {
34
- setUseJsFallback(true);
35
- return;
36
- }
37
- let isMounted = true;
38
- let didReceiveEvent = false;
39
- let subscription;
40
- setUseJsFallback(false);
41
- try {
42
- subscription = nativeModule.addListener(nativeAuthFlowChangedEvent, (state) => {
43
- if (!isNativeAuthFlowState(state)) return;
44
- didReceiveEvent = true;
45
- setNativeState(state);
46
- setUseJsFallback(false);
47
- });
48
- nativeModule.getAuthFlowState().then((state) => {
49
- if (!isMounted || didReceiveEvent) return;
50
- if (isNativeAuthFlowState(state)) setNativeState(state);
51
- else setUseJsFallback(true);
52
- }).catch((error) => {
53
- if (!isMounted || didReceiveEvent) return;
54
- setUseJsFallback(true);
55
- });
56
- } catch (error) {
57
- setUseJsFallback(true);
58
- }
59
- return () => {
60
- isMounted = false;
61
- subscription?.remove();
62
- };
63
- }, [nativeModule]);
64
- if (!nativeModule || useJsFallback) return {
65
- isLoaded: isJsLoaded,
66
- isAuthFlowComplete: Boolean(isJsLoaded && isSignedIn)
67
- };
68
- return {
69
- isLoaded: Boolean(isJsLoaded && nativeState.isLoaded),
70
- isAuthFlowComplete: Boolean(isJsLoaded && isSignedIn && nativeState.isAuthFlowComplete)
71
- };
72
- }
73
-
74
- //#endregion
75
- exports.useAuthViewState = useAuthViewState;
76
- //# sourceMappingURL=useAuthViewState.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useAuthViewState.js","names":["ClerkExpo"],"sources":["../src/useAuthViewState.ts"],"sourcesContent":["import { useAuth } from '@clerk/react';\nimport { useEffect, useState } from 'react';\n\nimport type { NativeAuthFlowState } from './specs/NativeClerkModule.types';\nimport { ClerkExpoModule as ClerkExpo } from './utils/native-module';\n\nconst nativeAuthFlowChangedEvent = 'clerkNativeAuthFlowChanged';\n\nexport type UseAuthViewStateReturn = NativeAuthFlowState;\n\ntype NativeAuthFlowEventEmitter = {\n addListener(\n eventName: typeof nativeAuthFlowChangedEvent,\n listener: (state?: NativeAuthFlowState) => void,\n ): { remove: () => void };\n getAuthFlowState(): Promise<NativeAuthFlowState>;\n};\n\nconst initialNativeState: NativeAuthFlowState = {\n isLoaded: false,\n isAuthFlowComplete: false,\n};\n\nfunction getNativeAuthFlowModule(): NativeAuthFlowEventEmitter | null {\n if (ClerkExpo && typeof ClerkExpo.addListener === 'function' && typeof ClerkExpo.getAuthFlowState === 'function') {\n return ClerkExpo as NativeAuthFlowEventEmitter;\n }\n\n return null;\n}\n\nfunction isNativeAuthFlowState(state: NativeAuthFlowState | undefined): state is NativeAuthFlowState {\n return typeof state?.isLoaded === 'boolean' && typeof state.isAuthFlowComplete === 'boolean';\n}\n\n/**\n * Reports when authentication and an optional biometric-credential enrollment prompt are complete.\n *\n * Use this hook when biometric-credential enrollment prompts are enabled and a\n * non-dismissible root `AuthView` must remain mounted until the prompt finishes.\n * On platforms without native auth-flow completion state, it falls back to the\n * JS session state.\n */\nexport function useAuthViewState(): UseAuthViewStateReturn {\n const { isLoaded: isJsLoaded, isSignedIn } = useAuth({ treatPendingAsSignedOut: false });\n const [nativeState, setNativeState] = useState(initialNativeState);\n const [useJsFallback, setUseJsFallback] = useState(false);\n const nativeModule = getNativeAuthFlowModule();\n\n useEffect(() => {\n if (!nativeModule) {\n setUseJsFallback(true);\n return;\n }\n\n let isMounted = true;\n let didReceiveEvent = false;\n let subscription: { remove: () => void } | undefined;\n\n setUseJsFallback(false);\n\n try {\n subscription = nativeModule.addListener(nativeAuthFlowChangedEvent, state => {\n if (!isNativeAuthFlowState(state)) {\n return;\n }\n\n didReceiveEvent = true;\n setNativeState(state);\n setUseJsFallback(false);\n });\n\n void nativeModule\n .getAuthFlowState()\n .then(state => {\n if (!isMounted || didReceiveEvent) {\n return;\n }\n\n if (isNativeAuthFlowState(state)) {\n setNativeState(state);\n } else {\n setUseJsFallback(true);\n }\n })\n .catch(error => {\n if (!isMounted || didReceiveEvent) {\n return;\n }\n\n setUseJsFallback(true);\n if (__DEV__) {\n console.error('[useAuthViewState] Failed to get native auth-flow state:', error);\n }\n });\n } catch (error) {\n setUseJsFallback(true);\n if (__DEV__) {\n console.error('[useAuthViewState] Failed to observe native auth-flow state:', error);\n }\n }\n\n return () => {\n isMounted = false;\n subscription?.remove();\n };\n }, [nativeModule]);\n\n if (!nativeModule || useJsFallback) {\n return {\n isLoaded: isJsLoaded,\n isAuthFlowComplete: Boolean(isJsLoaded && isSignedIn),\n };\n }\n\n return {\n isLoaded: Boolean(isJsLoaded && nativeState.isLoaded),\n isAuthFlowComplete: Boolean(isJsLoaded && isSignedIn && nativeState.isAuthFlowComplete),\n };\n}\n"],"mappings":";;;;;;AAMA,MAAM,6BAA6B;AAYnC,MAAM,qBAA0C;CAC9C,UAAU;CACV,oBAAoB;AACtB;AAEA,SAAS,0BAA6D;CACpE,IAAIA,2CAAa,OAAOA,wCAAU,gBAAgB,cAAc,OAAOA,wCAAU,qBAAqB,YACpG,OAAOA;CAGT,OAAO;AACT;AAEA,SAAS,sBAAsB,OAAsE;CACnG,OAAO,OAAO,OAAO,aAAa,aAAa,OAAO,MAAM,uBAAuB;AACrF;;;;;;;;;AAUA,SAAgB,mBAA2C;CACzD,MAAM,EAAE,UAAU,YAAY,yCAAuB,EAAE,yBAAyB,MAAM,CAAC;CACvF,MAAM,CAAC,aAAa,sCAA2B,kBAAkB;CACjE,MAAM,CAAC,eAAe,wCAA6B,KAAK;CACxD,MAAM,eAAe,wBAAwB;CAE7C,2BAAgB;EACd,IAAI,CAAC,cAAc;GACjB,iBAAiB,IAAI;GACrB;EACF;EAEA,IAAI,YAAY;EAChB,IAAI,kBAAkB;EACtB,IAAI;EAEJ,iBAAiB,KAAK;EAEtB,IAAI;GACF,eAAe,aAAa,YAAY,6BAA4B,UAAS;IAC3E,IAAI,CAAC,sBAAsB,KAAK,GAC9B;IAGF,kBAAkB;IAClB,eAAe,KAAK;IACpB,iBAAiB,KAAK;GACxB,CAAC;GAED,AAAK,aACF,iBAAiB,CAAC,CAClB,MAAK,UAAS;IACb,IAAI,CAAC,aAAa,iBAChB;IAGF,IAAI,sBAAsB,KAAK,GAC7B,eAAe,KAAK;SAEpB,iBAAiB,IAAI;GAEzB,CAAC,CAAC,CACD,OAAM,UAAS;IACd,IAAI,CAAC,aAAa,iBAChB;IAGF,iBAAiB,IAAI;GAIvB,CAAC;EACL,SAAS,OAAO;GACd,iBAAiB,IAAI;EAIvB;EAEA,aAAa;GACX,YAAY;GACZ,cAAc,OAAO;EACvB;CACF,GAAG,CAAC,YAAY,CAAC;CAEjB,IAAI,CAAC,gBAAgB,eACnB,OAAO;EACL,UAAU;EACV,oBAAoB,QAAQ,cAAc,UAAU;CACtD;CAGF,OAAO;EACL,UAAU,QAAQ,cAAc,YAAY,QAAQ;EACpD,oBAAoB,QAAQ,cAAc,cAAc,YAAY,kBAAkB;CACxF;AACF"}
@@ -1,6 +0,0 @@
1
- import { requireOptionalNativeModule } from 'expo';
2
-
3
- import type { Spec } from './NativeClerkModule.types';
4
-
5
- // Optional so it resolves to null in Expo Go instead of throwing at import time.
6
- export default requireOptionalNativeModule<Spec>('ClerkExpo');
@@ -1,9 +0,0 @@
1
- export type NativeAuthFlowState = {
2
- isLoaded: boolean;
3
- isAuthFlowComplete: boolean;
4
- };
5
-
6
- export interface Spec {
7
- addListener?(eventName: string, listener?: (...args: unknown[]) => void): { remove: () => void };
8
- getAuthFlowState?(): Promise<NativeAuthFlowState>;
9
- }
@@ -1,3 +0,0 @@
1
- import type { Spec } from './NativeClerkModule.types';
2
-
3
- export default null as Spec | null;