@clerk/expo-native-components 0.0.0-stage → 0.0.1

package/app.plugin.js

@@ -0,0 +1,333 @@
+/**
+ * Expo config plugin for @clerk/expo-native-components
+ * Configures iOS and Android for the Clerk native SDKs (clerk-ios / clerk-android)
+ *
+ * When this plugin is used:
+ * 1. iOS is configured with the required deployment target and metadata
+ * 2. Android is configured with packaging exclusions for dependencies
+ *
+ * Native modules and views are registered via Expo Modules autolinking.
+ */
+const {
+  createRunOncePlugin,
+  withXcodeProject,
+  withDangerousMod,
+  withInfoPlist,
+  withAppBuildGradle,
+  withGradleProperties,
+} = require('@expo/config-plugins');
+const path = require('path');
+const fs = require('fs');
+const packageJson = require('./package.json');
+
+const CLERK_MIN_IOS_VERSION = '17.0';
+const HOST_SDK_VERSION_GRADLE_PROPERTY = 'clerkExpo.hostSdkVersion';
+
+const resolveClerkExpo = projectRoot => {
+  try {
+    const paths = [projectRoot, process.cwd()].filter(Boolean);
+    const clerkExpoPackageJsonPath = require.resolve('@clerk/expo/package.json', { paths });
+    return {
+      dir: path.dirname(clerkExpoPackageJsonPath),
+      version: require(clerkExpoPackageJsonPath).version,
+    };
+  } catch {
+    return null;
+  }
+};
+
+const withClerkIOS = (config, hostSdkVersion) => {
+  console.log('✅ Clerk iOS plugin loaded');
+
+  // IMPORTANT: Set iOS deployment target in Podfile.properties.json BEFORE pod install
+  // This ensures ClerkExpo pod gets installed (it requires iOS 17.0)
+  config = withDangerousMod(config, [
+    'ios',
+    async config => {
+      const podfilePropertiesPath = path.join(config.modRequest.platformProjectRoot, 'Podfile.properties.json');
+
+      let properties = {};
+      if (fs.existsSync(podfilePropertiesPath)) {
+        try {
+          properties = JSON.parse(fs.readFileSync(podfilePropertiesPath, 'utf8'));
+        } catch {
+          // If file exists but is invalid JSON, start fresh
+        }
+      }
+
+      // Set the iOS deployment target
+      if (
+        !properties['ios.deploymentTarget'] ||
+        parseFloat(properties['ios.deploymentTarget']) < parseFloat(CLERK_MIN_IOS_VERSION)
+      ) {
+        properties['ios.deploymentTarget'] = CLERK_MIN_IOS_VERSION;
+        fs.writeFileSync(podfilePropertiesPath, JSON.stringify(properties, null, 2) + '\n');
+        console.log(`✅ Set ios.deploymentTarget to ${CLERK_MIN_IOS_VERSION} in Podfile.properties.json`);
+      }
+
+      return config;
+    },
+  ]);
+
+  // First update the iOS deployment target to 17.0 (required by Clerk iOS SDK)
+  config = withXcodeProject(config, config => {
+    const xcodeProject = config.modResults;
+
+    try {
+      // Update deployment target in all build configurations
+      const buildConfigs = xcodeProject.hash.project.objects.XCBuildConfiguration || {};
+
+      for (const [uuid, buildConfig] of Object.entries(buildConfigs)) {
+        if (buildConfig && buildConfig.buildSettings) {
+          const currentTarget = buildConfig.buildSettings.IPHONEOS_DEPLOYMENT_TARGET;
+          if (currentTarget && parseFloat(currentTarget) < parseFloat(CLERK_MIN_IOS_VERSION)) {
+            buildConfig.buildSettings.IPHONEOS_DEPLOYMENT_TARGET = CLERK_MIN_IOS_VERSION;
+          }
+        }
+      }
+
+      console.log(`✅ Updated iOS deployment target to ${CLERK_MIN_IOS_VERSION}`);
+    } catch (error) {
+      console.error('❌ Error updating deployment target:', error.message);
+    }
+
+    return config;
+  });
+
+  config = withInfoPlist(config, modConfig => {
+    modConfig.modResults.ClerkExpoVersion = hostSdkVersion;
+    return modConfig;
+  });
+
+  return config;
+};
+
+/**
+ * Add packaging exclusions to Android app build.gradle to resolve
+ * duplicate META-INF file conflicts from clerk-android dependencies.
+ */
+const withClerkAndroid = (config, hostSdkVersion) => {
+  console.log('✅ Clerk Android plugin loaded');
+
+  config = withGradleProperties(config, modConfig => {
+    modConfig.modResults = modConfig.modResults.filter(
+      item => !(item.type === 'property' && item.key === HOST_SDK_VERSION_GRADLE_PROPERTY),
+    );
+    modConfig.modResults.push({ type: 'property', key: HOST_SDK_VERSION_GRADLE_PROPERTY, value: hostSdkVersion });
+    return modConfig;
+  });
+
+  return withAppBuildGradle(config, modConfig => {
+    let buildGradle = modConfig.modResults.contents;
+
+    // --- META-INF exclusion ---
+    if (!buildGradle.includes('META-INF/versions/9/OSGI-INF/MANIFEST.MF')) {
+      // AGP 8+ uses `packaging` DSL, older versions use `packagingOptions`
+      const packagingMatch = buildGradle.match(/packaging\s*\{/) || buildGradle.match(/packagingOptions\s*\{/);
+      if (packagingMatch) {
+        const blockName = packagingMatch[0].trim().replace(/\s*\{$/, '');
+        const resourcesExclude = `${blockName} {
+        // Clerk Android SDK: exclude duplicate META-INF files
+        resources {
+            excludes += ['META-INF/versions/9/OSGI-INF/MANIFEST.MF']
+        }`;
+
+        buildGradle = buildGradle.replace(new RegExp(`${blockName}\\s*\\{`), resourcesExclude);
+      } else {
+        // No packaging block found; append one at the end of the android block
+        const androidBlockEnd = buildGradle.lastIndexOf('}');
+        if (androidBlockEnd !== -1) {
+          const packagingBlock = `\n    packaging {\n        resources {\n            excludes += ['META-INF/versions/9/OSGI-INF/MANIFEST.MF']\n        }\n    }\n`;
+          buildGradle = buildGradle.slice(0, androidBlockEnd) + packagingBlock + buildGradle.slice(androidBlockEnd);
+        }
+      }
+      console.log('✅ Clerk Android packaging exclusions added');
+    }
+
+    // --- Kotlin metadata version check skip ---
+    if (!buildGradle.includes('-Xskip-metadata-version-check')) {
+      const kotlinOptionsMatch = buildGradle.match(/kotlinOptions\s*\{/);
+      if (kotlinOptionsMatch) {
+        buildGradle = buildGradle.replace(
+          /kotlinOptions\s*\{/,
+          `kotlinOptions {\n        // Clerk: allow reading metadata from newer Kotlin versions\n        freeCompilerArgs += ['-Xskip-metadata-version-check']`,
+        );
+      } else {
+        const androidMatch = buildGradle.match(/android\s*\{/);
+        if (androidMatch) {
+          buildGradle = buildGradle.replace(
+            /android\s*\{/,
+            `android {\n    kotlinOptions {\n        // Clerk: allow reading metadata from newer Kotlin versions\n        freeCompilerArgs += ['-Xskip-metadata-version-check']\n    }`,
+          );
+        }
+      }
+      console.log('✅ Clerk Android Kotlin metadata version check skip added');
+    }
+
+    modConfig.modResults.contents = buildGradle;
+    return modConfig;
+  });
+};
+
+/**
+ * Write ClerkKeychainService to Info.plist when keychainService is provided.
+ * This allows extension apps (watch, widget, app clip) to share the same
+ * keychain entry as the main app by using a custom service identifier.
+ */
+const withClerkKeychainService = (config, { keychainService } = {}) => {
+  if (!keychainService) {
+    return config;
+  }
+
+  return withInfoPlist(config, modConfig => {
+    modConfig.modResults.ClerkKeychainService = keychainService;
+    console.log(`✅ Set ClerkKeychainService in Info.plist: ${keychainService}`);
+    return modConfig;
+  });
+};
+
+/**
+ * Apply a custom theme to Clerk native components (iOS + Android).
+ *
+ * Accepts a `theme` prop pointing to a JSON file with optional keys:
+ *   - colors: { primary, background, input, danger, success, warning,
+ *               foreground, mutedForeground, primaryForeground, inputForeground,
+ *               neutral, border, ring, muted, shadow, secondaryButtonBackground,
+ *               secondaryButtonForeground }  (hex color strings)
+ *   - darkColors: same keys as colors (for dark mode)
+ *   - design: { fontFamily: string, borderRadius: number }
+ *
+ * iOS: Embeds the parsed JSON into Info.plist under key "ClerkTheme".
+ * Android: Copies the JSON file to android/app/src/main/assets/clerk_theme.json.
+ */
+const VALID_COLOR_KEYS = [
+  'primary',
+  'background',
+  'input',
+  'danger',
+  'success',
+  'warning',
+  'foreground',
+  'mutedForeground',
+  'primaryForeground',
+  'inputForeground',
+  'neutral',
+  'border',
+  'ring',
+  'muted',
+  'shadow',
+  'secondaryButtonBackground',
+  'secondaryButtonForeground',
+];
+
+const HEX_COLOR_REGEX = /^#([0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/;
+
+function isPlainObject(value) {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
+function validateThemeJson(theme) {
+  if (!isPlainObject(theme)) {
+    throw new Error('Clerk theme: theme JSON must be a plain object');
+  }
+
+  const validateColors = (colors, label) => {
+    if (!isPlainObject(colors)) {
+      throw new Error(`Clerk theme: ${label} must be an object`);
+    }
+    for (const [key, value] of Object.entries(colors)) {
+      if (!VALID_COLOR_KEYS.includes(key)) {
+        console.warn(`⚠️  Clerk theme: unknown color key "${key}" in ${label}, ignoring`);
+        continue;
+      }
+      if (typeof value !== 'string' || !HEX_COLOR_REGEX.test(value)) {
+        throw new Error(`Clerk theme: invalid hex color for ${label}.${key}: "${value}"`);
+      }
+    }
+  };
+
+  if (theme.colors != null) validateColors(theme.colors, 'colors');
+  if (theme.darkColors != null) validateColors(theme.darkColors, 'darkColors');
+
+  if (theme.design != null) {
+    if (!isPlainObject(theme.design)) {
+      throw new Error(`Clerk theme: design must be an object`);
+    }
+    if (theme.design.fontFamily != null && typeof theme.design.fontFamily !== 'string') {
+      throw new Error(`Clerk theme: design.fontFamily must be a string`);
+    }
+    if (theme.design.borderRadius != null && typeof theme.design.borderRadius !== 'number') {
+      throw new Error(`Clerk theme: design.borderRadius must be a number`);
+    }
+  }
+}
+
+const withClerkTheme = (config, props = {}) => {
+  const { theme } = props;
+  if (!theme) return config;
+
+  // Resolve the theme file path relative to the project root
+  const themePath = path.resolve(theme);
+  if (!fs.existsSync(themePath)) {
+    console.warn(`⚠️  Clerk theme file not found: ${themePath}, skipping theme`);
+    return config;
+  }
+
+  let themeJson;
+  try {
+    themeJson = JSON.parse(fs.readFileSync(themePath, 'utf8'));
+    validateThemeJson(themeJson);
+  } catch (e) {
+    throw new Error(`Clerk theme: failed to parse ${themePath}: ${e.message}`);
+  }
+
+  // iOS: Embed theme in Info.plist under "ClerkTheme"
+  config = withInfoPlist(config, modConfig => {
+    modConfig.modResults.ClerkTheme = themeJson;
+    console.log('✅ Embedded Clerk theme in Info.plist');
+    return modConfig;
+  });
+
+  // Android: Copy theme JSON to assets
+  config = withDangerousMod(config, [
+    'android',
+    async config => {
+      const assetsDir = path.join(config.modRequest.platformProjectRoot, 'app', 'src', 'main', 'assets');
+      if (!fs.existsSync(assetsDir)) {
+        fs.mkdirSync(assetsDir, { recursive: true });
+      }
+      const destPath = path.join(assetsDir, 'clerk_theme.json');
+      fs.writeFileSync(destPath, JSON.stringify(themeJson, null, 2) + '\n');
+      console.log('✅ Copied Clerk theme to Android assets');
+      return config;
+    },
+  ]);
+
+  return config;
+};
+
+const withClerkExpoNativeComponents = (config, props = {}, resolve = resolveClerkExpo) => {
+  const clerkExpo = resolve(config._internal?.projectRoot);
+  if (clerkExpo && fs.existsSync(path.join(clerkExpo.dir, 'expo-module.config.json'))) {
+    throw new Error(
+      `Clerk: @clerk/expo@${clerkExpo.version} still bundles the Clerk native module, which conflicts with @clerk/expo-native-components. Upgrade @clerk/expo to a version that supports @clerk/expo-native-components.`,
+    );
+  }
+  // Native requests report the @clerk/expo version in the x-clerk-host-sdk-version header.
+  const hostSdkVersion = clerkExpo?.version ?? packageJson.version;
+
+  config = withClerkIOS(config, hostSdkVersion);
+  config = withClerkAndroid(config, hostSdkVersion);
+  config = withClerkKeychainService(config, props);
+  config = withClerkTheme(config, props);
+  return config;
+};
+
+module.exports = createRunOncePlugin(withClerkExpoNativeComponents, packageJson.name, packageJson.version);
+module.exports._testing = {
+  withClerkExpoNativeComponents,
+  validateThemeJson,
+  isPlainObject,
+  VALID_COLOR_KEYS,
+  HEX_COLOR_REGEX,
+};

package/dist/AuthView.d.ts

@@ -0,0 +1,35 @@
+import type { AuthViewProps } from './AuthView.types';
+/**
+ * A pre-built native authentication component that handles sign-in and sign-up flows.
+ *
+ * `AuthView` renders inline within your React Native view hierarchy, powered by:
+ * - **iOS**: clerk-ios (SwiftUI) - https://github.com/clerk/clerk-ios
+ * - **Android**: clerk-android (Jetpack Compose) - https://github.com/clerk/clerk-android
+ *
+ * After authentication completes, the session is automatically synced with the JS SDK.
+ * Use `useAuth()`, `useUser()`, or `useSession()` to react to authentication
+ * state changes.
+ *
+ * To push the auth flow onto your own navigation stack, hide the route's header and
+ * pass `onHostBack` so Clerk's own chrome takes over.
+ *
+ * @example
+ * ```tsx
+ * import { AuthView } from '@clerk/expo-native-components';
+ * import { useAuth } from '@clerk/expo';
+ *
+ * export default function SignInScreen() {
+ *   const { isSignedIn } = useAuth();
+ *
+ *   useEffect(() => {
+ *     if (isSignedIn) router.replace('/home');
+ *   }, [isSignedIn]);
+ *
+ *   return <AuthView />;
+ * }
+ * ```
+ *
+ * @see {@link https://clerk.com/docs/components/authentication/sign-in} Clerk Sign-In Documentation
+ */
+export declare function AuthView({ logo, mode, isDismissible, logoMaxHeight, onDismiss, onHostBack, }: AuthViewProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AuthView.d.ts.map

package/dist/AuthView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthView.d.ts","sourceRoot":"","sources":["../src/AuthView.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAMtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,IAAmB,EACnB,aAAoB,EACpB,aAAa,EACb,SAAS,EACT,UAAU,GACX,EAAE,aAAa,2CA0Cf"}

package/dist/AuthView.js

@@ -0,0 +1,79 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_runtime = require('./_virtual/_rolldown/runtime.js');
+let react = require("react");
+let react_native = require("react-native");
+let src_specs_NativeClerkAuthView = require("./specs/NativeClerkAuthView");
+src_specs_NativeClerkAuthView = require_runtime.__toESM(src_specs_NativeClerkAuthView);
+let src_utils_native_module = require("./utils/native-module");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/AuthView.tsx
+/**
+* A pre-built native authentication component that handles sign-in and sign-up flows.
+*
+* `AuthView` renders inline within your React Native view hierarchy, powered by:
+* - **iOS**: clerk-ios (SwiftUI) - https://github.com/clerk/clerk-ios
+* - **Android**: clerk-android (Jetpack Compose) - https://github.com/clerk/clerk-android
+*
+* After authentication completes, the session is automatically synced with the JS SDK.
+* Use `useAuth()`, `useUser()`, or `useSession()` to react to authentication
+* state changes.
+*
+* To push the auth flow onto your own navigation stack, hide the route's header and
+* pass `onHostBack` so Clerk's own chrome takes over.
+*
+* @example
+* ```tsx
+* import { AuthView } from '@clerk/expo-native-components';
+* import { useAuth } from '@clerk/expo';
+*
+* export default function SignInScreen() {
+*   const { isSignedIn } = useAuth();
+*
+*   useEffect(() => {
+*     if (isSignedIn) router.replace('/home');
+*   }, [isSignedIn]);
+*
+*   return <AuthView />;
+* }
+* ```
+*
+* @see {@link https://clerk.com/docs/components/authentication/sign-in} Clerk Sign-In Documentation
+*/
+function AuthView({ logo, mode = "signInOrUp", isDismissible = true, logoMaxHeight, onDismiss, onHostBack }) {
+	const handleAuthEvent = (0, react.useCallback)((event) => {
+		if (event.nativeEvent.type === "dismissed") onDismiss?.();
+	}, [onDismiss]);
+	if (!src_utils_native_module.isNativeSupported || !src_specs_NativeClerkAuthView.default) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
+		style: {
+			flex: 1,
+			justifyContent: "center",
+			alignItems: "center"
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Text, {
+			style: {
+				fontSize: 16,
+				color: "#666"
+			},
+			children: !src_utils_native_module.isNativeSupported ? "Native AuthView is only available on iOS and Android" : "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."
+		})
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(src_specs_NativeClerkAuthView.default, {
+		style: { flex: 1 },
+		mode,
+		isDismissible,
+		logoMaxHeight,
+		hostBackButton: !!onHostBack,
+		onAuthEvent: handleAuthEvent,
+		onHostBack: onHostBack ? () => onHostBack() : void 0,
+		children: logo ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
+			collapsable: false,
+			style: { alignSelf: "flex-start" },
+			children: logo
+		}) : null
+	});
+}
+
+//#endregion
+exports.AuthView = AuthView;
+//# sourceMappingURL=AuthView.js.map

package/dist/AuthView.js.map

@@ -0,0 +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"}

package/dist/AuthView.types.d.ts

@@ -0,0 +1,62 @@
+import type { ReactElement } from 'react';
+import type { EmbeddedNavigationProps } from './EmbeddedNavigation.types';
+/**
+ * Authentication mode that determines which flows are available to the user.
+ *
+ * - `'signInOrUp'` - Allows users to choose between signing in or creating a new account (default)
+ * - `'signIn'` - Restricts to sign-in flows only
+ * - `'signUp'` - Restricts to sign-up flows only
+ */
+export type AuthViewMode = 'signIn' | 'signUp' | 'signInOrUp';
+/**
+ * Props for the AuthView component.
+ *
+ * AuthView renders a native authentication UI inline (fills parent container).
+ * Use `useAuth()`, `useUser()`, or `useSession()` to react to authentication
+ * state changes.
+ */
+export interface AuthViewProps extends EmbeddedNavigationProps {
+    /**
+     * Replaces the dashboard-configured logo with custom React Native content.
+     *
+     * The native authentication UI does not apply sizing, spacing, or accessibility
+     * attributes to this content. The provided element must define its own layout
+     * and accessibility behavior.
+     */
+    logo?: ReactElement;
+    /**
+     * Authentication mode that determines which flows are available.
+     *
+     * - `'signInOrUp'` - Users can choose between signing in or creating an account
+     * - `'signIn'` - Only sign-in flows are available
+     * - `'signUp'` - Only sign-up flows are available
+     *
+     * @default 'signInOrUp'
+     */
+    mode?: AuthViewMode;
+    /**
+     * Whether the authentication view can be dismissed by the user.
+     *
+     * When `true`, a dismiss button appears in the navigation bar.
+     *
+     * When `false`, the user must complete authentication to close the view.
+     * Use this for flows where authentication is required to proceed.
+     *
+     * @default true
+     */
+    isDismissible?: boolean;
+    /**
+     * Maximum height of the Clerk application logo, in density-independent pixels.
+     *
+     * @default 44
+     */
+    logoMaxHeight?: number;
+    /**
+     * Called when the native authentication view requests dismissal.
+     *
+     * This fires when the user dismisses the view, or when the native auth flow
+     * finishes and the app-owned presentation should close.
+     */
+    onDismiss?: () => void;
+}
+//# sourceMappingURL=AuthView.types.d.ts.map

package/dist/AuthView.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthView.types.d.ts","sourceRoot":"","sources":["../src/AuthView.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AAE1E;;;;;;GAMG;AACH,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,QAAQ,GAAG,YAAY,CAAC;AAE9D;;;;;;GAMG;AACH,MAAM,WAAW,aAAc,SAAQ,uBAAuB;IAC5D;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC;IAEpB;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC;IAEpB;;;;;;;;;OASG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB"}

package/dist/EmbeddedNavigation.types.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Props shared by native components that can be embedded in the host app's own
+ * navigation (`UserProfileView`, `AuthView`).
+ */
+export interface EmbeddedNavigationProps {
+    /**
+     * Shows a back button on the component's root screen and calls this when it
+     * is tapped. Pop your own route in response.
+     *
+     * The component keeps its own navigation chrome, so screen titles, back
+     * buttons, swipe-back, and transitions inside the component stay native.
+     * Use this when the component fills a route whose own header is hidden:
+     *
+     * ```tsx
+     * <Stack.Screen options={{ headerShown: false }} />
+     * <UserProfileView isDismissible={false} onHostBack={() => router.back()} />
+     * ```
+     *
+     * The component never leaves the route on its own, so react to auth state
+     * for flow completion — swap the content in place, or pop the route.
+     */
+    onHostBack?: () => void;
+}
+//# sourceMappingURL=EmbeddedNavigation.types.d.ts.map

package/dist/EmbeddedNavigation.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmbeddedNavigation.types.d.ts","sourceRoot":"","sources":["../src/EmbeddedNavigation.types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,WAAW,uBAAuB;IACtC;;;;;;;;;;;;;;;OAeG;IACH,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB"}

package/dist/UserButton.d.ts

@@ -0,0 +1,38 @@
+import type { JSX } from 'react';
+import type { UserProfileCustomDestination, UserProfileCustomPage } from './UserProfileCustomPages';
+export interface UserButtonUserProfileProps {
+    /** Custom pages displayed as rows in the user profile. */
+    customPages?: UserProfileCustomPage[];
+    /** Custom destinations that can be pushed from a custom page without creating a profile row. */
+    customDestinations?: UserProfileCustomDestination[];
+}
+export interface UserButtonProps {
+    /** Configuration passed to the user profile opened by the button. */
+    userProfileProps?: UserButtonUserProfileProps;
+}
+/**
+ * A pre-built button component that displays the user's avatar.
+ *
+ * `UserButton` renders the platform-native Clerk user button. Tapping it opens
+ * the native user profile surface, matching Clerk's iOS and Android SDKs.
+ *
+ * @example
+ * ```tsx
+ * import { UserButton } from '@clerk/expo-native-components';
+ *
+ * export default function Home() {
+ *   return (
+ *     <UserButton
+ *       userProfileProps={{
+ *         customPages: [{ path: 'api-keys', label: 'API keys', icon: 'key', content: <APIKeysView /> }],
+ *       }}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @see {@link UserProfileView} The profile view to render in your own presentation surface
+ * @see {@link https://clerk.com/docs/components/user/user-button} Clerk UserButton Documentation
+ */
+export declare function UserButton({ userProfileProps }: UserButtonProps): JSX.Element | null;
+//# sourceMappingURL=UserButton.d.ts.map

package/dist/UserButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserButton.d.ts","sourceRoot":"","sources":["../src/UserButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiC,GAAG,EAAO,MAAM,OAAO,CAAC;AAMrE,OAAO,KAAK,EAEV,4BAA4B,EAC5B,qBAAqB,EAEtB,MAAM,0BAA0B,CAAC;AAiBlC,MAAM,WAAW,0BAA0B;IACzC,0DAA0D;IAC1D,WAAW,CAAC,EAAE,qBAAqB,EAAE,CAAC;IAEtC,gGAAgG;IAChG,kBAAkB,CAAC,EAAE,4BAA4B,EAAE,CAAC;CACrD;AAED,MAAM,WAAW,eAAe;IAC9B,qEAAqE;IACrE,gBAAgB,CAAC,EAAE,0BAA0B,CAAC;CAC/C;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,UAAU,CAAC,EAAE,gBAAgB,EAAE,EAAE,eAAe,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CA8BpF"}

package/dist/UserButton.js

@@ -0,0 +1,68 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_runtime = require('./_virtual/_rolldown/runtime.js');
+let react = require("react");
+let react_native = require("react-native");
+let src_utils_native_module = require("./utils/native-module");
+let react_jsx_runtime = require("react/jsx-runtime");
+let src_specs_NativeClerkUserButtonView = require("./specs/NativeClerkUserButtonView");
+src_specs_NativeClerkUserButtonView = require_runtime.__toESM(src_specs_NativeClerkUserButtonView);
+let src_UserProfileCustomPages = require("./UserProfileCustomPages");
+
+//#region src/UserButton.tsx
+const CustomizableNativeClerkUserButtonView = src_specs_NativeClerkUserButtonView.default;
+/**
+* A pre-built button component that displays the user's avatar.
+*
+* `UserButton` renders the platform-native Clerk user button. Tapping it opens
+* the native user profile surface, matching Clerk's iOS and Android SDKs.
+*
+* @example
+* ```tsx
+* import { UserButton } from '@clerk/expo-native-components';
+*
+* export default function Home() {
+*   return (
+*     <UserButton
+*       userProfileProps={{
+*         customPages: [{ path: 'api-keys', label: 'API keys', icon: 'key', content: <APIKeysView /> }],
+*       }}
+*     />
+*   );
+* }
+* ```
+*
+* @see {@link UserProfileView} The profile view to render in your own presentation surface
+* @see {@link https://clerk.com/docs/components/user/user-button} Clerk UserButton Documentation
+*/
+function UserButton({ userProfileProps }) {
+	const nativeViewRef = (0, react.useRef)(null);
+	const customPages = userProfileProps?.customPages;
+	const customDestinations = userProfileProps?.customDestinations;
+	const customRoutes = (0, react.useMemo)(() => [...customPages ?? [], ...customDestinations ?? []], [customDestinations, customPages]);
+	const { navigation, presentedPaths, onCustomPageEvent } = (0, src_UserProfileCustomPages.useUserProfileCustomPages)(customRoutes, nativeViewRef);
+	const { width, height } = (0, react_native.useWindowDimensions)();
+	if (!src_utils_native_module.isNativeSupported || !CustomizableNativeClerkUserButtonView) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CustomizableNativeClerkUserButtonView, {
+		ref: nativeViewRef,
+		style: styles.host,
+		customPages: (0, src_UserProfileCustomPages.serializeUserProfileCustomPages)(customPages ?? [], customDestinations ?? []),
+		onCustomPageEvent,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(src_UserProfileCustomPages.UserProfileCustomPageHosts, {
+			customRoutes,
+			presentedPaths,
+			navigation,
+			style: {
+				width,
+				height
+			}
+		})
+	});
+}
+const styles = react_native.StyleSheet.create({ host: {
+	width: 36,
+	height: 36
+} });
+
+//#endregion
+exports.UserButton = UserButton;
+//# sourceMappingURL=UserButton.js.map