Profile screen

Installation

$ npx shadcn@latest add @goodui-native-pro/profile-screen

Then run npx expo install --fix so react-native-svg match your Expo SDK. Files land in components/goodui-native/profile-screen.

Pro screens install from the license-gated @goodui-native-pro registry. Setup: Pro access.

• •Wrap the app in GestureHandlerRootView and ThemeProvider, and render <Toaster /> once for the follow error toast.

Usage

// app/profile/[username].tsx
import { Stack, router, useLocalSearchParams } from "expo-router";
import { ProfileScreen } from "@/components/goodui-native/profile-screen/profile-screen";
import { api, useProfile } from "@/lib/social";

export default function ProfileRoute() {
  const { username } = useLocalSearchParams<{ username: string }>();
  const { user, stats, photos, trips, isFollowing } = useProfile(username);
  return (
    <>
      <Stack.Screen options={{ headerShown: false }} />
      <ProfileScreen
        user={{ name: user.name, username: user.username, bio: user.bio, avatar: user.photoUrl, location: user.city, story: user.hasNewStory ? "unseen" : undefined }}
        stats={stats}
        photos={photos.map((p) => ({ source: p.url, width: p.width, height: p.height, alt: p.description }))}
        items={trips.map((t) => ({ id: t.id, title: t.place, subtitle: `${t.photoCount} photos`, value: t.month }))}
        defaultFollowing={isFollowing}
        onFollowChange={(following) => (following ? api.follow(username) : api.unfollow(username))}
        onMessage={() => router.push(`/chat/${user.id}`)}
        onStoryPress={() => router.push(`/stories/${username}`)}
        onItemPress={(item) => router.push(`/trips/${item.id}`)}
        onBack={() => router.back()}
      />
    </>
  );
}

When to use

Examples

<ProfileScreen />

<ProfileScreen
  photos={[
    { source: require("@/assets/lake.jpg"), alt: "A cold lake at sunrise", width: 1200, height: 900 },
    { source: require("@/assets/ridge.jpg"), alt: "A ridge trail above the clouds" },
  ]}
  tabTitles={{ photos: "Shots", items: "Routes" }}
/>

API reference

Motion and haptics

• •The counts roll up from zero digit by digit a moment after the screen opens; following rolls the follower count by one, up or down with the change.
• •Tapping an unseen story ring sweeps the accent arc away to the seen ring.
• •Photos fly out of their grid cell into the full-screen viewer and back on close; the tab indicator stretches between tabs as you swipe.
• •Reduced motion: counts change in place, the ring crossfades instead of sweeping, photos fade in and out instead of flying.

• •Haptic: tap on Follow, Message, back and more
• •Haptic: tap on the avatar when it opens stories
• •Haptic: select when the tab changes

• •Digit rolls, the ring sweep, the tab indicator and the viewer run on the UI thread.
• •Tab pages mount lazily: a page mounts once it or a neighbour is current, then stays mounted.

Accessibility

• •The handle in the bar is a header. The avatar reads the name and 'new story' while the ring is unseen; with onStoryPress it is a button.
• •Counts are real numbers for screen readers (no digit strips are read), each followed by its label.
• •Follow is a button named 'Follow Aiko Tanaka' or 'Following Aiko Tanaka'; the change is announced.
• •Tabs are a tab list with selected state; every photo is a button labelled with its alt text and opens the viewer, which supports the arrow keys and Escape on the web.
• •On the web the scrolling profile is a named region that takes keyboard focus.

Notes for AI

Related