Cleanup the scroll logic for the claims form

Author: markharding

apps/polycentric/src/features/verifications/CreateClaim.tsx

@@ -1,31 +1,44 @@
 import { Text } from '@/src/common/components';
 import { Atoms, useTheme } from '@/src/common/theme';
-import { useMemo, useState } from 'react';
+import { useMemo, useRef, useState } from 'react';
 import { View } from 'react-native';
-import Animated, { FadeInDown, FadeOutDown } from 'react-native-reanimated';
+import Animated, {
+  FadeInDown,
+  FadeOutDown,
+  useAnimatedRef,
+} from 'react-native-reanimated';
 import { ClaimForm } from './ClaimForm';
 import { CLAIM_TYPES, ClaimType } from './utils/forms';
 import { PlatformPicker } from './PlatformPicker';
 import { SelectChip } from './SelectChip';
+import { useScrollIntoView } from './VerificationsScrollContext';
 
-export function CreateClaim({
-  onSubmitted,
-  onPlatformSelected,
-}: {
-  onSubmitted?: () => void;
-  onPlatformSelected?: () => void;
-}) {
+export function CreateClaim({ onSubmitted }: { onSubmitted?: () => void }) {
   const { theme } = useTheme();
   const [selectedClaimType, setSelectedClaimType] =
     useState<ClaimType['name']>();
 
+  const scrollIntoView = useScrollIntoView();
+  const formRef = useAnimatedRef<Animated.View>();
+  // Scroll on the layout pass after a selection, not on later relayouts.
+  const pendingScroll = useRef(false);
+
   const selected = useMemo(
     () => CLAIM_TYPES.find((s) => s.name === selectedClaimType),
     [selectedClaimType],
   );
 
-  const onSelectClaimType = (name: ClaimType['name']) =>
-    setSelectedClaimType(name === selectedClaimType ? undefined : name);
+  const onSelectClaimType = (name: ClaimType['name']) => {
+    const next = name === selectedClaimType ? undefined : name;
+    setSelectedClaimType(next);
+    if (next) pendingScroll.current = true;
+  };
+
+  const onFormLayout = () => {
+    if (!pendingScroll.current) return;
+    pendingScroll.current = false;
+    scrollIntoView(formRef);
+  };
 
   const handleSubmitted = () => {
     setSelectedClaimType(undefined);
@@ -61,24 +74,20 @@ export function CreateClaim({
         </View>
       </View>
 
-      {/* Platform claims pick a platform and link an account. */}
-      {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 && (
+      {/* Keyed so state resets and the enter animation replays per type. */}
+      {selected && (
         <Animated.View
+          ref={formRef}
           key={selected.name}
           entering={FadeInDown.duration(200)}
           exiting={FadeOutDown.duration(150)}
+          onLayout={onFormLayout}
         >
-          <ClaimForm claimType={selected} onSubmitted={handleSubmitted} />
+          {selected.platform ? (
+            <PlatformPicker />
+          ) : (
+            <ClaimForm claimType={selected} onSubmitted={handleSubmitted} />
+          )}
         </Animated.View>
       )}
     </View>

apps/polycentric/src/features/verifications/PlatformPicker.tsx

@@ -2,10 +2,15 @@ import { Button, Text, TextInput } from '@/src/common/components';
 import { Atoms, PaletteColorToken, useTheme } from '@/src/common/theme';
 import { FontAwesome6 } from '@expo/vector-icons';
 import { useCurrentIdentity } from '@/src/common/lib/polycentric-hooks';
-import { ReactNode, useState } from 'react';
+import { ReactNode, useRef, useState } from 'react';
 import { View } from 'react-native';
-import Animated, { FadeInDown, FadeOutDown } from 'react-native-reanimated';
+import Animated, {
+  FadeInDown,
+  FadeOutDown,
+  useAnimatedRef,
+} from 'react-native-reanimated';
 import { SelectChip } from './SelectChip';
+import { useScrollIntoView } from './VerificationsScrollContext';
 
 // A platform a claim can be verified against. `logo` matches SelectChip's icon
 // render-prop; `color` tints the logo and its chip; `location` is where the
@@ -105,14 +110,16 @@ function isProfileUrl(value: string): boolean {
 }
 
 // Pick a platform, then link the account by pasting a pairing token into it.
-// `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 }) {
+export function PlatformPicker() {
   const { theme } = useTheme();
   const { identityKey } = useCurrentIdentity();
   const [selected, setSelected] = useState<Platform>();
   const [profileUrl, setProfileUrl] = useState('');
 
+  const scrollIntoView = useScrollIntoView();
+  const linkFormRef = useAnimatedRef<Animated.View>();
+  const pendingScroll = useRef(false);
+
   // Loop-back link the user adds to their profile to prove ownership.
   const loopbackLink = identityKey
     ? `https://polycentric.io/${identityKey}`
@@ -121,7 +128,13 @@ export function PlatformPicker({ onSelect }: { onSelect?: () => void }) {
   const onSelectPlatform = (platform: Platform) => {
     setSelected(platform);
     setProfileUrl('');
-    onSelect?.();
+    pendingScroll.current = true;
+  };
+
+  const onLinkFormLayout = () => {
+    if (!pendingScroll.current) return;
+    pendingScroll.current = false;
+    scrollIntoView(linkFormRef);
   };
 
   return (
@@ -153,9 +166,11 @@ export function PlatformPicker({ onSelect }: { onSelect?: () => void }) {
 
       {selected && (
         <Animated.View
+          ref={linkFormRef}
           key={selected.name}
           entering={FadeInDown.duration(200)}
           exiting={FadeOutDown.duration(150)}
+          onLayout={onLinkFormLayout}
           style={[Atoms.gap_sm, Atoms.mt_sm]}
         >
           <Text
@@ -187,6 +202,7 @@ export function PlatformPicker({ onSelect }: { onSelect?: () => void }) {
             <Text
               variant="body"
               style={[theme.atoms.text, { fontFamily: 'monospace' }]}
+              selectable={true}
             >
               {loopbackLink}
             </Text>

apps/polycentric/src/features/verifications/VerificationsScreen.tsx

@@ -4,46 +4,60 @@ 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 { useRef, useState } from 'react';
+import { type Ref, useCallback, useState } from 'react';
 import { View } from 'react-native';
-import Animated from 'react-native-reanimated';
+import Animated, {
+  type AnimatedRef,
+  measure,
+  scrollTo,
+  useAnimatedRef,
+  useScrollOffset,
+} from 'react-native-reanimated';
+import { scheduleOnUI } from 'react-native-worklets';
 import { CreateClaim } from './CreateClaim';
 import { SelectChip } from './SelectChip';
+import { VerificationsScrollProvider } from './VerificationsScrollContext';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 type Mode = 'create' | 'verify';
 
+const MARGIN = Spacing.lg;
+
 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 scrollRef = useAnimatedRef<Animated.ScrollView>();
+  const scrollOffset = useScrollOffset(scrollRef);
 
   const select = (next: Mode) =>
     setMode((prev) => (prev === next ? undefined : next));
 
-  const scrollToBottom = () => {
-    pendingScroll.current = true;
-  };
+  // Align a revealed form section to the top of the viewport.
+  const scrollIntoView = useCallback(
+    (target: AnimatedRef<Animated.View>) => {
+      scheduleOnUI(() => {
+        'worklet';
+        const el = measure(target);
+        const scroll = measure(scrollRef);
+        if (el === null || scroll === null) return;
+        const y = scrollOffset.value + el.pageY - scroll.pageY - MARGIN;
+        scrollTo(scrollRef, 0, Math.max(0, y), true);
+      });
+    },
+    [scrollRef, scrollOffset],
+  );
 
   return (
-    <Screen>
+    <Screen keyboardAvoiding>
       <Screen.PrimaryColumn>
         <ScrollView
-          ref={scrollRef}
+          // useAnimatedRef works as a ref at runtime but isn't typed as one.
+          ref={scrollRef as Ref<Animated.ScrollView>}
           HeaderComponent={() => (
             <Topbar title="Verifications" left={isWeb ? <></> : undefined} />
           )}
           showsVerticalScrollIndicator={false}
-          onContentSizeChange={() => {
-            if (!pendingScroll.current) return;
-            pendingScroll.current = false;
-            scrollRef.current?.scrollToEnd({ animated: true });
-          }}
         >
           <View
             style={[
@@ -72,7 +86,9 @@ export default function VerificationsScreen() {
             </View>
 
             {mode === 'create' && (
-              <CreateClaim onPlatformSelected={scrollToBottom} />
+              <VerificationsScrollProvider value={scrollIntoView}>
+                <CreateClaim />
+              </VerificationsScrollProvider>
             )}
 
             {mode === 'verify' && (

apps/polycentric/src/features/verifications/VerificationsScrollContext.tsx

@@ -0,0 +1,18 @@
+import { createContext, useContext } from 'react';
+import type Animated from 'react-native-reanimated';
+import type { AnimatedRef } from 'react-native-reanimated';
+
+// Scrolls the given section to the top of the screen's scroll viewport.
+export type ScrollIntoView = (target: AnimatedRef<Animated.View>) => void;
+
+const Context = createContext<ScrollIntoView | null>(null);
+
+export const VerificationsScrollProvider = Context.Provider;
+
+export function useScrollIntoView() {
+  const ctx = useContext(Context);
+  if (!ctx) {
+    throw new Error('useScrollIntoView must be used within its provider');
+  }
+  return ctx;
+}