Onboarding moderation improvements (#2713)

* create separate label group arrays

* render adult and other label groups separately

* animate in/out the additional settings

* improve toggle logic

* support animations on all platforms

* remove debug

* update notice, prevent running animations on mount

* reorg imports

src/screens/Onboarding/StepModeration/AdultContentEnabledPref.tsx

@@ -2,19 +2,17 @@ import React from 'react'
 import {View} from 'react-native'
 import {useLingui} from '@lingui/react'
 import {msg, Trans} from '@lingui/macro'
+import {UseMutateFunction} from '@tanstack/react-query'
 
-import {isIOS} from '#/platform/detection'
 import * as Toast from '#/view/com/util/Toast'
 import {atoms as a, useTheme} from '#/alf'
-import {
+import {usePreferencesQuery} from '#/state/queries/preferences'
-  usePreferencesQuery,
-  usePreferencesSetAdultContentMutation,
-} from '#/state/queries/preferences'
 import {logger} from '#/logger'
 import {Text} from '#/components/Typography'
-import {InlineLink} from '#/components/Link'
 import * as Toggle from '#/components/forms/Toggle'
 import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
+import * as Prompt from '#/components/Prompt'
+import {isIOS} from '#/platform/detection'
 
 function Card({children}: React.PropsWithChildren<{}>) {
   const t = useTheme()
@@ -36,16 +34,25 @@ function Card({children}: React.PropsWithChildren<{}>) {
   )
 }
 
-export function AdultContentEnabledPref() {
+export function AdultContentEnabledPref({
+  mutate,
+  variables,
+}: {
+  mutate: UseMutateFunction<void, unknown, {enabled: boolean}, unknown>
+  variables: {enabled: boolean} | undefined
+}) {
   const {_} = useLingui()
   const t = useTheme()
+  const prompt = Prompt.usePromptControl()
 
   // Reuse logic here form ContentFilteringSettings.tsx
   const {data: preferences} = usePreferencesQuery()
-  const {mutate, variables} = usePreferencesSetAdultContentMutation()
 
   const onToggleAdultContent = React.useCallback(async () => {
-    if (isIOS) return
+    if (isIOS) {
+      prompt.open()
+      return
+    }
 
     try {
       mutate({
@@ -57,15 +64,33 @@ export function AdultContentEnabledPref() {
       )
       logger.error('Failed to update preferences with server', {error: e})
     }
-  }, [variables, preferences, mutate, _])
+  }, [variables, preferences, mutate, _, prompt])
 
   if (!preferences) return null
 
-  if (isIOS) {
+  return (
-    if (preferences?.adultContentEnabled === true) {
+    <>
-      return null
+      {preferences.userAge && preferences.userAge >= 18 ? (
-    } else {
+        <View style={[a.w_full, a.px_xs]}>
-      return (
+          <Toggle.Item
+            name={_(msg`Enable adult content in your feeds`)}
+            label={_(msg`Enable adult content in your feeds`)}
+            value={variables?.enabled ?? preferences?.adultContentEnabled}
+            onChange={onToggleAdultContent}>
+            <View
+              style={[
+                a.flex_row,
+                a.w_full,
+                a.justify_between,
+                a.align_center,
+                a.py_md,
+              ]}>
+              <Text style={[a.font_bold]}>Enable Adult Content</Text>
+              <Toggle.Switch />
+            </View>
+          </Toggle.Item>
+        </View>
+      ) : (
         <Card>
           <CircleInfo size="sm" fill={t.palette.contrast_500} />
           <Text
@@ -75,61 +100,23 @@ export function AdultContentEnabledPref() {
               a.leading_snug,
               {paddingTop: 1},
             ]}>
-            <Trans>
+            <Trans>You must be 18 years or older to enable adult content</Trans>
-              Adult content can only be enabled via the Web at{' '}
-              <InlineLink style={[a.leading_snug]} to="https://bsky.app">
-                bsky.app
-              </InlineLink>
-              .
-            </Trans>
           </Text>
         </Card>
-      )
+      )}
-    }
-  } else {
-    if (preferences?.userAge) {
-      if (preferences.userAge >= 18) {
-        return (
-          <View style={[a.w_full]}>
-            <Toggle.Item
-              name={_(msg`Enable adult content in your feeds`)}
-              label={_(msg`Enable adult content in your feeds`)}
-              value={variables?.enabled ?? preferences?.adultContentEnabled}
-              onChange={onToggleAdultContent}>
-              <View
-                style={[
-                  a.flex_row,
-                  a.w_full,
-                  a.justify_between,
-                  a.align_center,
-                  a.py_md,
-                ]}>
-                <Text style={[a.font_bold]}>Enable Adult Content</Text>
-                <Toggle.Switch />
-              </View>
-            </Toggle.Item>
-          </View>
-        )
-      } else {
-        return (
-          <Card>
-            <CircleInfo size="sm" fill={t.palette.contrast_500} />
-            <Text
-              style={[
-                a.flex_1,
-                t.atoms.text_contrast_700,
-                a.leading_snug,
-                {paddingTop: 1},
-              ]}>
-              <Trans>
-                You must be 18 years or older to enable adult content
-              </Trans>
-            </Text>
-          </Card>
-        )
-      }
-    }
 
-    return null
+      <Prompt.Outer control={prompt}>
-  }
+        <Prompt.Title>Adult Content</Prompt.Title>
+        <Prompt.Description>
+          <Trans>
+            Due to Apple policies, adult content can only be enabled on the web
+            after completing sign up.
+          </Trans>
+        </Prompt.Description>
+        <Prompt.Actions>
+          <Prompt.Action onPress={prompt.close}>OK</Prompt.Action>
+        </Prompt.Actions>
+      </Prompt.Outer>
+    </>
+  )
 }

src/screens/Onboarding/StepModeration/ModerationOption.tsx

@@ -3,6 +3,7 @@ import {View} from 'react-native'
 import {LabelPreference} from '@atproto/api'
 import {useLingui} from '@lingui/react'
 import {msg} from '@lingui/macro'
+import Animated, {Easing, Layout, FadeIn} from 'react-native-reanimated'
 
 import {
   CONFIGURABLE_LABEL_GROUPS,
@@ -16,8 +17,10 @@ import * as ToggleButton from '#/components/forms/ToggleButton'
 
 export function ModerationOption({
   labelGroup,
+  isMounted,
 }: {
   labelGroup: ConfigurableLabelGroup
+  isMounted: React.MutableRefObject<boolean>
 }) {
   const {_} = useLingui()
   const t = useTheme()
@@ -41,7 +44,7 @@ export function ModerationOption({
   }
 
   return (
-    <View
+    <Animated.View
       style={[
         a.flex_row,
         a.justify_between,
@@ -49,7 +52,9 @@ export function ModerationOption({
         a.py_xs,
         a.px_xs,
         a.align_center,
-      ]}>
+      ]}
+      layout={Layout.easing(Easing.ease).duration(200)}
+      entering={isMounted.current ? FadeIn : undefined}>
       <View style={[a.gap_xs, {width: '50%'}]}>
         <Text style={[a.font_bold]}>{groupInfo.title}</Text>
         <Text style={[t.atoms.text_contrast_700, a.leading_snug]}>
@@ -57,29 +62,23 @@ export function ModerationOption({
         </Text>
       </View>
       <View style={[a.justify_center, {minHeight: 35}]}>
-        {!preferences?.adultContentEnabled && groupInfo.isAdultImagery ? (
+        <ToggleButton.Group
-          <View style={[a.justify_center, {minHeight: 40}]}>
+          label={_(
-            <Text style={[a.font_bold]}>{labels.hide}</Text>
+            msg`Configure content filtering setting for category: ${groupInfo.title.toLowerCase()}`,
-          </View>
+          )}
-        ) : (
+          values={[visibility ?? 'hide']}
-          <ToggleButton.Group
+          onChange={onChange}>
-            label={_(
+          <ToggleButton.Button name="hide" label={labels.hide}>
-              msg`Configure content filtering setting for category: ${groupInfo.title.toLowerCase()}`,
+            {labels.hide}
-            )}
+          </ToggleButton.Button>
-            values={[visibility ?? 'hide']}
+          <ToggleButton.Button name="warn" label={labels.warn}>
-            onChange={onChange}>
+            {labels.warn}
-            <ToggleButton.Button name="hide" label={labels.hide}>
+          </ToggleButton.Button>
-              {labels.hide}
+          <ToggleButton.Button name="ignore" label={labels.show}>
-            </ToggleButton.Button>
+            {labels.show}
-            <ToggleButton.Button name="warn" label={labels.warn}>
+          </ToggleButton.Button>
-              {labels.warn}
+        </ToggleButton.Group>
-            </ToggleButton.Button>
-            <ToggleButton.Button name="ignore" label={labels.show}>
-              {labels.show}
-            </ToggleButton.Button>
-          </ToggleButton.Group>
-        )}
       </View>
-    </View>
+    </Animated.View>
   )
 }

src/screens/Onboarding/StepModeration/index.tsx

@@ -2,9 +2,14 @@ import React from 'react'
 import {View} from 'react-native'
 import {useLingui} from '@lingui/react'
 import {msg, Trans} from '@lingui/macro'
+import Animated, {Easing, Layout} from 'react-native-reanimated'
 
 import {atoms as a} from '#/alf'
-import {configurableLabelGroups} from 'state/queries/preferences'
+import {
+  configurableAdultLabelGroups,
+  configurableOtherLabelGroups,
+  usePreferencesSetAdultContentMutation,
+} from 'state/queries/preferences'
 import {Divider} from '#/components/Divider'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron'
@@ -23,11 +28,32 @@ import {AdultContentEnabledPref} from '#/screens/Onboarding/StepModeration/Adult
 import {Context} from '#/screens/Onboarding/state'
 import {IconCircle} from '#/screens/Onboarding/IconCircle'
 
+function AnimatedDivider() {
+  return (
+    <Animated.View layout={Layout.easing(Easing.ease).duration(200)}>
+      <Divider />
+    </Animated.View>
+  )
+}
+
 export function StepModeration() {
   const {_} = useLingui()
   const {track} = useAnalytics()
   const {state, dispatch} = React.useContext(Context)
   const {data: preferences} = usePreferencesQuery()
+  const {mutate, variables} = usePreferencesSetAdultContentMutation()
+
+  // We need to know if the screen is mounted so we know if we want to run entering animations
+  // https://github.com/software-mansion/react-native-reanimated/discussions/2513
+  const isMounted = React.useRef(false)
+  React.useLayoutEffect(() => {
+    isMounted.current = true
+  }, [])
+
+  const adultContentEnabled = !!(
+    (variables && variables.enabled) ||
+    (!variables && preferences?.adultContentEnabled)
+  )
 
   const onContinue = React.useCallback(() => {
     dispatch({type: 'next'})
@@ -57,14 +83,23 @@ export function StepModeration() {
         </View>
       ) : (
         <>
-          <AdultContentEnabledPref />
+          <AdultContentEnabledPref mutate={mutate} variables={variables} />
 
           <View style={[a.gap_sm, a.w_full]}>
-            {configurableLabelGroups.map((g, index) => (
+            {adultContentEnabled &&
+              configurableAdultLabelGroups.map((g, index) => (
+                <React.Fragment key={index}>
+                  {index === 0 && <AnimatedDivider />}
+                  <ModerationOption labelGroup={g} isMounted={isMounted} />
+                  <AnimatedDivider />
+                </React.Fragment>
+              ))}
+
+            {configurableOtherLabelGroups.map((g, index) => (
               <React.Fragment key={index}>
-                {index === 0 && <Divider />}
+                {!adultContentEnabled && index === 0 && <AnimatedDivider />}
-                <ModerationOption labelGroup={g} />
+                <ModerationOption labelGroup={g} isMounted={isMounted} />
-                <Divider />
+                <AnimatedDivider />
               </React.Fragment>
             ))}
           </View>

src/state/queries/preferences/types.ts

@@ -5,15 +5,23 @@ import {
   BskyFeedViewPreference,
 } from '@atproto/api'
 
-export const configurableLabelGroups = [
+export const configurableAdultLabelGroups = [
   'nsfw',
   'nudity',
   'suggestive',
   'gore',
+] as const
+
+export const configurableOtherLabelGroups = [
   'hate',
   'spam',
   'impersonation',
 ] as const
+
+export const configurableLabelGroups = [
+  ...configurableAdultLabelGroups,
+  ...configurableOtherLabelGroups,
+] as const
 export type ConfigurableLabelGroup = (typeof configurableLabelGroups)[number]
 
 export type LabelGroup =