Skip to main content

useUserProfileCustomPageNavigation()

Use useUserProfileCustomPageNavigation() within custom page content rendered by <UserProfileView />Expo Icon or the profile opened by <UserButton />Expo Icon. You can navigate back, return to the root profile screen, or open another custom page.

Call this hook only from a component passed to a custom page's content property.

Returns

  • Name
    navigateBack()
    Type
    () => Promise<void>
    Description

    Navigates back one screen in the native user profile.

  • Name
    popToRoot()
    Type
    () => Promise<void>
    Description

    Returns to the root user profile screen.

  • Name
    push()
    Type
    (path: string) => Promise<void>
    Description

    Opens another custom page. The path must match a page in the same customPages array.

Example

The following example adds two custom pages. The first page uses push() to open the second page and popToRoot() to return to the profile screen. The second page uses navigateBack() to return to the first page.

import { UserProfileView, useUserProfileCustomPageNavigation } from '@clerk/expo/native'
import { Button, Text, View } from 'react-native'

function APIKeysPage() {
  const { popToRoot, push } = useUserProfileCustomPageNavigation()

  return (
    <View style={{ flex: 1, justifyContent: 'center', padding: 24 }}>
      <Text style={{ fontSize: 24, marginBottom: 16 }}>API keys</Text>
      <Button title="Open API key help" onPress={() => void push('api-key-help')} />
      <Button title="Back to profile" onPress={() => void popToRoot()} />
    </View>
  )
}

function APIKeyHelpPage() {
  const { navigateBack } = useUserProfileCustomPageNavigation()

  return (
    <View style={{ flex: 1, justifyContent: 'center', padding: 24 }}>
      <Text style={{ fontSize: 24, marginBottom: 16 }}>API key help</Text>
      <Button title="Back to API keys" onPress={() => void navigateBack()} />
    </View>
  )
}

export default function ProfileScreen() {
  return (
    <UserProfileView
      customPages={[
        {
          path: 'api-keys',
          label: 'API keys',
          icon: 'key',
          content: <APIKeysPage />,
        },
        {
          path: 'api-key-help',
          label: 'API key help',
          icon: 'info',
          content: <APIKeyHelpPage />,
        },
      ]}
    />
  )
}

Feedback

What did you think of this content?

Last updated on

GitHubEdit on GitHub