<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 (use with <SignedIn> or check useUser())
import { SignedIn, SignedOut } from '@clerk/expo'
import { UserButton } from '@clerk/expo/native'
import { AuthView } from '@clerk/expo/native'
export default function Screen() {
return (
<>
<SignedIn>
<View style={{ width: 36, height: 36, borderRadius: 18, overflow: 'hidden' }}>
<UserButton />
</View>
</SignedIn>
<SignedOut>
<AuthView />
</SignedOut>
</>
)
}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?.firstName}</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