Skip to main content

<UserProfileView /> component

Note

This documents the native <UserProfileView /> from @clerk/expo/native. For web projects, use the web <UserProfile /> component.

iOSAndroid
The UserProfileView renders a comprehensive user profile interface that displays user information and provides account management options on iOS.The UserProfileView renders a comprehensive user profile interface that displays user information and provides account management options on Android.

The <UserProfileView /> component renders a fully native profile management interface using SwiftUI on iOS and Jetpack Compose on Android. It allows users to manage:

  • Profile details
  • Email addresses
  • Phone numbers
  • Multi-factor authentication (MFA)
  • Passkeys
  • Connected accounts
  • Active sessions

Important

Before using this component, ensure you meet the Expo requirementsExpo Icon.

Usage

The <UserProfileView /> renders inline in your React Native view hierarchy, so you can place it in a modal, sheet, route, full-screen view, or any other layout that fits your app.

The following example demonstrates one way to render <UserProfileView /> inside a React Native <Modal>. The native dismiss button is shown by default. Use onDismiss to close the modal in React Native state.

src/app/(home)/index.tsx
import { UserProfileView } from '@clerk/expo/native'
import { useState } from 'react'
import { Button, Modal, StyleSheet, View } from 'react-native'

export default function HomeScreen() {
  const [isAuthOpen, setIsAuthOpen] = useState(false)

  return (
    <View style={styles.container}>
      <Button title="Account" onPress={() => setIsAuthOpen(true)} />
      <Modal
        animationType="slide"
        visible={isAuthOpen}
        presentationStyle="pageSheet"
        onRequestClose={() => setIsAuthOpen(false)}
      >
        <UserProfileView onDismiss={() => setIsAuthOpen(false)} />
      </Modal>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
})

When rendering <UserProfileView /> directly in a full-screen view, pass isDismissible={false} if users shouldn't be able to dismiss the view.

Important

When using native components, pass { treatPendingAsSignedOut: false } to useAuth() so pending are not treated as signed out.

src/app/(home)/profile.tsx
import { UserProfileView } from '@clerk/expo/native'
import { useAuth } from '@clerk/expo'
import { useRouter } from 'expo-router'
import { useEffect } from 'react'

export default function ProfileScreen() {
  const { isLoaded, isSignedIn } = useAuth({ treatPendingAsSignedOut: false })
  const router = useRouter()

  useEffect(() => {
    if (isLoaded && !isSignedIn) {
      router.replace('/(auth)/sign-in')
    }
  }, [isLoaded, isSignedIn, router])

  return <UserProfileView isDismissible={false} style={{ flex: 1 }} />
}

Properties

  • Name
    isDismissible
    Type
    boolean
    Description

    Whether the profile view can be dismissed by the user. When true, a dismiss button appears in the native navigation bar. When false, no dismiss button is shown. Defaults to true.

  • Name
    onDismiss
    Type
    () => void
    Description

    A callback that runs when the user dismisses the native profile view. Use this to update your app's presentation state, such as closing a React Native <Modal>.

  • Name
    style
    Type
    StyleProp<ViewStyle>
    Description

    Style applied to the container view.

Platform support

PlatformStatus
iOSSupported (SwiftUI)
AndroidSupported (Jetpack Compose)
WebUse <UserProfile /> from @clerk/expo/web

Feedback

What did you think of this content?

Last updated on

GitHubEdit on GitHub