<UserButton />
The <UserButton /> component renders an avatar that displays the user's profile image or initials. When tapped, it opens a native profile management modal powered by <UserProfileView />.
Sign-out is handled automatically and synced with the JavaScript SDK. If you need to react to sign-out, use useAuth() inside a useEffect.
The component fills its parent container - use the parent's styles to control size, shape, border radius, and clipping.
Requirements
In addition to these requirements, this component requires the user to be signed in. The following example demonstrates how to use the <Show> component to check if the user is signed in and render the <UserButton /> or <AuthView /> accordingly.
import { Show } from '@clerk/expo'
import { AuthView, UserButton } from '@clerk/expo/native'
import { View } from 'react-native'
export default function Screen() {
return (
<>
<Show when="signed-in">
<View style={{ width: 36, height: 36, borderRadius: 18, overflow: 'hidden' }}>
<UserButton />
</View>
</Show>
<Show when="signed-out">
<AuthView />
</Show>
</>
)
}import { View, Text } from 'react-native'
import { UserButton } from '@clerk/expo/native'
import { useUser } from '@clerk/expo'
export default function HomeScreen() {
const { user } = useUser()
return (
<View style={{ flex: 1, padding: 20 }}>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
<Text style={{ fontSize: 24 }}>Welcome, {user?.fullName}</Text>
<View style={{ width: 36, height: 36, borderRadius: 18, overflow: 'hidden' }}>
<UserButton />
</View>
</View>
</View>
)
}import { View } from 'react-native'
import { Stack } from 'expo-router'
import { UserButton } from '@clerk/expo/native'
export default function HomeLayout() {
return (
<Stack
screenOptions={{
headerRight: () => (
<View
style={{ width: 36, height: 36, borderRadius: 18, overflow: 'hidden', marginRight: 16 }}
>
<UserButton />
</View>
),
}}
>
<Stack.Screen name="index" options={{ title: 'Home' }} />
</Stack>
)
}Properties
The <UserButton /> component does not accept any props. It fills its parent container — use the parent's style to control size, shape, border radius, and clipping.
Platform support
Feedback
Last updated on