Change how onboarding handles adult content enabled/disabled

src/screens/Onboarding/StepModeration/ModerationOption.tsx

@@ -2,8 +2,7 @@ import React from 'react'
 import {View} from 'react-native'
 import {LabelPreference, InterpretedLabelValueDefinition} from '@atproto/api'
 import {useLingui} from '@lingui/react'
-import {msg} from '@lingui/macro'
+import {msg, Trans} from '@lingui/macro'
-import Animated, {Easing, Layout, FadeIn} from 'react-native-reanimated'
 
 import {
   usePreferencesQuery,
@@ -16,10 +15,10 @@ import {useGlobalLabelStrings} from '#/lib/moderation/useGlobalLabelStrings'
 
 export function ModerationOption({
   labelValueDefinition,
-  isMounted,
+  disabled,
 }: {
   labelValueDefinition: InterpretedLabelValueDefinition
-  isMounted: React.MutableRefObject<boolean>
+  disabled?: boolean
 }) {
   const {_} = useLingui()
   const t = useTheme()
@@ -56,7 +55,7 @@ export function ModerationOption({
   }
 
   return (
-    <Animated.View
+    <View
       style={[
         a.flex_row,
         a.justify_between,
@@ -64,33 +63,37 @@ 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, a.flex_1]}>
         <Text style={[a.font_bold]}>{labelStrings.name}</Text>
         <Text style={[t.atoms.text_contrast_medium, a.leading_snug]}>
           {labelStrings.description}
         </Text>
       </View>
-      <View style={[a.justify_center, {minHeight: 35}]}>
+      <View style={[a.justify_center, {minHeight: 40}]}>
-        <ToggleButton.Group
+        {disabled ? (
-          label={_(
+          <Text style={[a.font_bold]}>
-            msg`Configure content filtering setting for category: ${labelStrings.name.toLowerCase()}`,
+            <Trans>Hide</Trans>
-          )}
+          </Text>
-          values={[visibility ?? 'hide']}
+        ) : (
-          onChange={onChange}>
+          <ToggleButton.Group
-          <ToggleButton.Button name="ignore" label={labels.show}>
+            label={_(
-            {labels.show}
+              msg`Configure content filtering setting for category: ${labelStrings.name.toLowerCase()}`,
-          </ToggleButton.Button>
+            )}
-          <ToggleButton.Button name="warn" label={labels.warn}>
+            values={[visibility ?? 'hide']}
-            {labels.warn}
+            onChange={onChange}>
-          </ToggleButton.Button>
+            <ToggleButton.Button name="ignore" label={labels.show}>
-          <ToggleButton.Button name="hide" label={labels.hide}>
+              {labels.show}
-            {labels.hide}
+            </ToggleButton.Button>
-          </ToggleButton.Button>
+            <ToggleButton.Button name="warn" label={labels.warn}>
-        </ToggleButton.Group>
+              {labels.warn}
+            </ToggleButton.Button>
+            <ToggleButton.Button name="hide" label={labels.hide}>
+              {labels.hide}
+            </ToggleButton.Button>
+          </ToggleButton.Group>
+        )}
       </View>
-    </Animated.View>
+    </View>
   )
 }

src/screens/Onboarding/StepModeration/index.tsx

@@ -2,12 +2,10 @@ 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 {LABELS} from '@atproto/api'
 
 import {atoms as a} from '#/alf'
 import {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'
 import {EyeSlash_Stroke2_Corner0_Rounded as EyeSlash} from '#/components/icons/EyeSlash'
@@ -25,14 +23,6 @@ import {AdultContentEnabledPref} from '#/screens/Onboarding/StepModeration/Adult
 import {Context} from '#/screens/Onboarding/state'
 import {IconCircle} from '#/components/IconCircle'
 
-function AnimatedDivider() {
-  return (
-    <Animated.View layout={Layout.easing(Easing.ease).duration(200)}>
-      <Divider />
-    </Animated.View>
-  )
-}
-
 export function StepModeration() {
   const {_} = useLingui()
   const {track} = useAnalytics()
@@ -83,28 +73,19 @@ export function StepModeration() {
           <AdultContentEnabledPref mutate={mutate} variables={variables} />
 
           <View style={[a.gap_sm, a.w_full]}>
-            {adultContentEnabled && (
-              <>
-                <AnimatedDivider />
-                <ModerationOption
-                  labelValueDefinition={LABELS.porn}
-                  isMounted={isMounted}
-                />
-                <ModerationOption
-                  labelValueDefinition={LABELS.sexual}
-                  isMounted={isMounted}
-                />
-                <ModerationOption
-                  labelValueDefinition={LABELS['graphic-media']}
-                  isMounted={isMounted}
-                />
-                <AnimatedDivider />
-              </>
-            )}
             <ModerationOption
-              labelValueDefinition={LABELS.nudity}
+              labelValueDefinition={LABELS.porn}
-              isMounted={isMounted}
+              disabled={!adultContentEnabled}
             />
+            <ModerationOption
+              labelValueDefinition={LABELS.sexual}
+              disabled={!adultContentEnabled}
+            />
+            <ModerationOption
+              labelValueDefinition={LABELS['graphic-media']}
+              disabled={!adultContentEnabled}
+            />
+            <ModerationOption labelValueDefinition={LABELS.nudity} />
           </View>
         </>
       )}