Add animations for when steps appear

markharding · markharding · commit 9e8016a8936b · 2026-06-25T10:10:43.000+01:00
diff --git a/apps/polycentric/src/common/components/ScrollView.tsx b/apps/polycentric/src/common/components/ScrollView.tsx
@@ -19,13 +19,19 @@ export type ScrollViewProps = RNScrollViewProps & {
     | undefined;
 };
 
-export function ScrollView({
-  HeaderComponent,
-  contentContainerStyle,
-  onScroll: _ignoredOnScroll,
-  children,
-  ...rest
-}: ScrollViewProps) {
+export const ScrollView = React.forwardRef<
+  Animated.ScrollView,
+  ScrollViewProps
+>(function ScrollView(
+  {
+    HeaderComponent,
+    contentContainerStyle,
+    onScroll: _ignoredOnScroll,
+    children,
+    ...rest
+  },
+  ref,
+) {
   const { onScroll, headerHeight, headerAnimatedStyle, onHeaderLayout } =
     useHidingHeader();
 
@@ -40,6 +46,7 @@ export function ScrollView({
       ) : null}
 
       <Animated.ScrollView
+        ref={ref}
         {...rest}
         onScroll={onScroll}
         scrollEventThrottle={16}
@@ -52,4 +59,4 @@ export function ScrollView({
       </Animated.ScrollView>
     </View>
   );
-}
+});
diff --git a/apps/polycentric/src/features/verifications/CreateClaim.tsx b/apps/polycentric/src/features/verifications/CreateClaim.tsx
@@ -2,12 +2,19 @@ import { Text } from '@/src/common/components';
 import { Atoms, useTheme } from '@/src/common/theme';
 import { useMemo, useState } from 'react';
 import { View } from 'react-native';
+import Animated, { FadeInDown, FadeOutDown } from 'react-native-reanimated';
 import { ClaimForm } from './ClaimForm';
 import { CLAIM_TYPES, ClaimType } from './utils/forms';
 import { PlatformPicker } from './PlatformPicker';
 import { SelectChip } from './SelectChip';
 
-export function CreateClaim({ onSubmitted }: { onSubmitted?: () => void }) {
+export function CreateClaim({
+  onSubmitted,
+  onPlatformSelected,
+}: {
+  onSubmitted?: () => void;
+  onPlatformSelected?: () => void;
+}) {
   const { theme } = useTheme();
   const [selectedClaimType, setSelectedClaimType] =
     useState<ClaimType['name']>();
@@ -37,29 +44,42 @@ export function CreateClaim({ onSubmitted }: { onSubmitted?: () => void }) {
           Claim type
         </Text>
         <View style={[Atoms.flex_row, Atoms.gap_sm, Atoms.flex_wrap]}>
-          {CLAIM_TYPES.map((s) => (
-            <SelectChip
+          {CLAIM_TYPES.map((s, i) => (
+            <Animated.View
               key={s.name}
-              title={s.name}
-              icon={s.icon}
-              color={s.color}
-              selected={selected?.name === s.name}
-              onPress={() => onSelectClaimType(s.name)}
-            />
+              entering={FadeInDown.delay(i * 40).duration(200)}
+            >
+              <SelectChip
+                title={s.name}
+                icon={s.icon}
+                color={s.color}
+                selected={selected?.name === s.name}
+                onPress={() => onSelectClaimType(s.name)}
+              />
+            </Animated.View>
           ))}
         </View>
       </View>
 
       {/* Platform claims pick a platform and link an account. */}
-      {selected?.platform && <PlatformPicker />}
+      {selected?.platform && (
+        <Animated.View
+          entering={FadeInDown.duration(200)}
+          exiting={FadeOutDown.duration(150)}
+        >
+          <PlatformPicker onSelect={onPlatformSelected} />
+        </Animated.View>
+      )}
 
       {/* Everything else is a field form. Keyed so state resets per type. */}
       {selected && !selected.platform && (
-        <ClaimForm
+        <Animated.View
           key={selected.name}
-          claimType={selected}
-          onSubmitted={handleSubmitted}
-        />
+          entering={FadeInDown.duration(200)}
+          exiting={FadeOutDown.duration(150)}
+        >
+          <ClaimForm claimType={selected} onSubmitted={handleSubmitted} />
+        </Animated.View>
       )}
     </View>
   );
diff --git a/apps/polycentric/src/features/verifications/PlatformPicker.tsx b/apps/polycentric/src/features/verifications/PlatformPicker.tsx
@@ -4,6 +4,7 @@ import { FontAwesome6 } from '@expo/vector-icons';
 import { useCurrentIdentity } from '@/src/common/lib/polycentric-hooks';
 import { ReactNode, useState } from 'react';
 import { View } from 'react-native';
+import Animated, { FadeInDown, FadeOutDown } from 'react-native-reanimated';
 import { SelectChip } from './SelectChip';
 
 // A platform a claim can be verified against. `logo` matches SelectChip's icon
@@ -104,7 +105,9 @@ function isProfileUrl(value: string): boolean {
 }
 
 // Pick a platform, then link the account by pasting a pairing token into it.
-export function PlatformPicker() {
+// `onSelect` fires after a platform is chosen so the parent can scroll the
+// freshly revealed link form into view.
+export function PlatformPicker({ onSelect }: { onSelect?: () => void }) {
   const { theme } = useTheme();
   const { identityKey } = useCurrentIdentity();
   const [selected, setSelected] = useState<Platform>();
@@ -118,6 +121,7 @@ export function PlatformPicker() {
   const onSelectPlatform = (platform: Platform) => {
     setSelected(platform);
     setProfileUrl('');
+    onSelect?.();
   };
 
   return (
@@ -131,20 +135,29 @@ export function PlatformPicker() {
       </Text>
 
       <View style={[Atoms.flex_row, Atoms.gap_sm, Atoms.flex_wrap]}>
-        {PLATFORMS.map((platform) => (
-          <SelectChip
+        {PLATFORMS.map((platform, i) => (
+          <Animated.View
             key={platform.name}
-            title={platform.name}
-            icon={platform.logo}
-            color={platform.color}
-            selected={selected?.name === platform.name}
-            onPress={() => onSelectPlatform(platform)}
-          />
+            entering={FadeInDown.delay(i * 40).duration(200)}
+          >
+            <SelectChip
+              title={platform.name}
+              icon={platform.logo}
+              color={platform.color}
+              selected={selected?.name === platform.name}
+              onPress={() => onSelectPlatform(platform)}
+            />
+          </Animated.View>
         ))}
       </View>
 
       {selected && (
-        <View style={[Atoms.gap_sm, Atoms.mt_sm]}>
+        <Animated.View
+          key={selected.name}
+          entering={FadeInDown.duration(200)}
+          exiting={FadeOutDown.duration(150)}
+          style={[Atoms.gap_sm, Atoms.mt_sm]}
+        >
           <Text
             variant="small"
             style={theme.atoms.text_neutral_medium}
@@ -194,7 +207,7 @@ export function PlatformPicker() {
             // TODO: start the platform loop-back verification flow.
             onPress={() => {}}
           />
-        </View>
+        </Animated.View>
       )}
     </View>
   );
diff --git a/apps/polycentric/src/features/verifications/VerificationsScreen.tsx b/apps/polycentric/src/features/verifications/VerificationsScreen.tsx
@@ -4,8 +4,9 @@ import Topbar from '@/src/common/components/layout/Topbar';
 import { ScrollView } from '@/src/common/components/ScrollView';
 import { Atoms, Spacing, useTheme } from '@/src/common/theme';
 import { isWeb } from '@/src/common/util/platform';
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 import { View } from 'react-native';
+import Animated from 'react-native-reanimated';
 import { CreateClaim } from './CreateClaim';
 import { SelectChip } from './SelectChip';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -16,18 +17,33 @@ export default function VerificationsScreen() {
   const { theme } = useTheme();
   const insets = useSafeAreaInsets();
   const [mode, setMode] = useState<Mode>();
+  const scrollRef = useRef<Animated.ScrollView>(null);
+  // Set when something below the fold is revealed; the scroll happens once the
+  // content actually grows (see onContentSizeChange), so we measure the new
+  // height rather than the old one.
+  const pendingScroll = useRef(false);
 
   const select = (next: Mode) =>
     setMode((prev) => (prev === next ? undefined : next));
 
+  const scrollToBottom = () => {
+    pendingScroll.current = true;
+  };
+
   return (
     <Screen>
       <Screen.PrimaryColumn>
         <ScrollView
+          ref={scrollRef}
           HeaderComponent={() => (
             <Topbar title="Verifications" left={isWeb ? <></> : undefined} />
           )}
           showsVerticalScrollIndicator={false}
+          onContentSizeChange={() => {
+            if (!pendingScroll.current) return;
+            pendingScroll.current = false;
+            scrollRef.current?.scrollToEnd({ animated: true });
+          }}
         >
           <View
             style={[
@@ -55,7 +71,9 @@ export default function VerificationsScreen() {
               />
             </View>
 
-            {mode === 'create' && <CreateClaim />}
+            {mode === 'create' && (
+              <CreateClaim onPlatformSelected={scrollToBottom} />
+            )}
 
             {mode === 'verify' && (
               <Text variant="body" style={theme.atoms.text_neutral_medium}>
