Value prop screen - polish, convert to pager (#9133)

* turn value prop screen into a pager on native * rm ts-ingore * fix pager swipe on android --------- Co-authored-by: Eric Bailey <git@esb.lol>
2025-10-10 22:05:22 +03:00
parent d528ae791f
commit 508fa2aced
12 changed files with 306 additions and 168 deletions
@@ -0,0 +1,127 @@
+import {useRef, useState} from 'react'
+import {View} from 'react-native'
+import PagerView from 'react-native-pager-view'
+import {Image} from 'expo-image'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {atoms as a, tokens, useTheme} from '#/alf'
+import {Text} from '#/components/Typography'
+import {PROP_1, PROP_2, PROP_3} from './images'
+import {Dot, useValuePropText} from './ValuePropositionPager.shared'
+
+export function ValuePropositionPager({
+  step,
+  setStep,
+  avatarUri,
+}: {
+  step: 0 | 1 | 2
+  setStep: (step: 0 | 1 | 2) => void
+  avatarUri?: string
+}) {
+  const t = useTheme()
+  const [activePage, setActivePage] = useState(step)
+  const ref = useRef<PagerView>(null)
+
+  if (step !== activePage) {
+    setActivePage(step)
+    ref.current?.setPage(step)
+  }
+
+  const images = [PROP_1[t.name], PROP_2[t.name], PROP_3[t.name]]
+
+  return (
+    <View style={[a.h_full, {marginHorizontal: tokens.space.xl * -1}]}>
+      <PagerView
+        ref={ref}
+        style={[a.flex_1]}
+        initialPage={step}
+        onPageSelected={evt => {
+          const page = evt.nativeEvent.position as 0 | 1 | 2
+          if (step !== page) {
+            setActivePage(page)
+            setStep(page)
+          }
+        }}>
+        {([0, 1, 2] as const).map(page => (
+          <Page
+            key={page}
+            page={page}
+            image={images[page]}
+            avatarUri={avatarUri}
+          />
+        ))}
+      </PagerView>
+    </View>
+  )
+}
+
+function Page({
+  page,
+  image,
+  avatarUri,
+}: {
+  page: 0 | 1 | 2
+  image: string
+  avatarUri?: string
+}) {
+  const {_} = useLingui()
+  const t = useTheme()
+  const {title, description, alt} = useValuePropText(page)
+
+  return (
+    <View key={page}>
+      <View
+        style={[
+          a.relative,
+          a.align_center,
+          a.justify_center,
+          a.pointer_events_none,
+        ]}>
+        <Image
+          source={image}
+          style={[a.w_full, a.aspect_square]}
+          alt={alt}
+          accessibilityIgnoresInvertColors={false} // I guess we do need it to blend into the background
+        />
+        {page === 1 && (
+          <Image
+            source={avatarUri}
+            style={[
+              a.z_10,
+              a.absolute,
+              a.rounded_full,
+              {
+                width: `${(80 / 393) * 100}%`,
+                height: `${(80 / 393) * 100}%`,
+              },
+            ]}
+            accessibilityIgnoresInvertColors
+            alt={_(msg`Your profile picture`)}
+          />
+        )}
+      </View>
+
+      <View style={[a.mt_4xl, a.gap_2xl, a.px_xl, a.align_center]}>
+        <View style={[a.flex_row, a.gap_sm]}>
+          <Dot active={page === 0} />
+          <Dot active={page === 1} />
+          <Dot active={page === 2} />
+        </View>
+
+        <View style={[a.gap_sm]}>
+          <Text style={[a.font_bold, a.text_3xl, a.text_center]}>{title}</Text>
+          <Text
+            style={[
+              t.atoms.text_contrast_medium,
+              a.text_md,
+              a.leading_snug,
+              a.text_center,
+            ]}>
+            {description}
+          </Text>
+        </View>
+      </View>
+    </View>
+  )
+}