diff --git a/src/lib/statsig/gates.ts b/src/lib/statsig/gates.ts
index 46ef934ef6..b667245dd4 100644
--- a/src/lib/statsig/gates.ts
+++ b/src/lib/statsig/gates.ts
@@ -2,6 +2,7 @@ export type Gate =
// Keep this alphabetic please.
| 'debug_show_feedcontext'
| 'native_pwi_disabled'
+ | 'onboarding_minimum_interests'
| 'request_notifications_permission_after_onboarding_v2'
| 'show_avi_follow_button'
| 'show_follow_back_label_v2'
diff --git a/src/screens/Onboarding/StepInterests/index.tsx b/src/screens/Onboarding/StepInterests/index.tsx
index ded473ff59..ca29b5db9b 100644
--- a/src/screens/Onboarding/StepInterests/index.tsx
+++ b/src/screens/Onboarding/StepInterests/index.tsx
@@ -6,8 +6,10 @@ import {useQuery} from '@tanstack/react-query'
import {useAnalytics} from '#/lib/analytics/analytics'
import {logEvent} from '#/lib/statsig/statsig'
+import {useGate} from '#/lib/statsig/statsig'
import {capitalize} from '#/lib/strings/capitalize'
import {logger} from '#/logger'
+import {isWeb} from '#/platform/detection'
import {useAgent} from '#/state/session'
import {useOnboardingDispatch} from '#/state/shell'
import {
@@ -27,16 +29,23 @@ import * as Toggle from '#/components/forms/Toggle'
import {IconCircle} from '#/components/IconCircle'
import {ArrowRotateCounterClockwise_Stroke2_Corner0_Rounded as ArrowRotateCounterClockwise} from '#/components/icons/ArrowRotateCounterClockwise'
import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron'
+import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
import {EmojiSad_Stroke2_Corner0_Rounded as EmojiSad} from '#/components/icons/Emoji'
import {Hashtag_Stroke2_Corner0_Rounded as Hashtag} from '#/components/icons/Hashtag'
import {Loader} from '#/components/Loader'
import {Text} from '#/components/Typography'
+const PROMPT_HEIGHT = isWeb ? 42 : 36
+// matches the padding of the OnboardingControls.Portal
+const PROMPT_OFFSET = isWeb ? a.pb_2xl.paddingBottom : a.pb_lg.paddingBottom
+const MIN_INTERESTS = 3
+
export function StepInterests() {
const {_} = useLingui()
const t = useTheme()
const {gtMobile} = useBreakpoints()
const {track} = useAnalytics()
+ const gate = useGate()
const interestsDisplayNames = useInterestsDisplayNames()
const {state, dispatch} = React.useContext(Context)
@@ -134,6 +143,11 @@ export function StepInterests() {
track('OnboardingV2:StepInterests:Start')
}, [track])
+ const isMinimumInterestsEnabled = gate('onboarding_minimum_interests')
+ const meetsMinimumRequirement = isMinimumInterestsEnabled
+ ? interests.length >= MIN_INTERESTS
+ : true
+
const title = isError ? (
Oh no! Something went wrong.
) : (
@@ -171,8 +185,13 @@ export function StepInterests() {
{title}
{description}
+ {isMinimumInterestsEnabled && (
+
+ Choose 3 or more:
+
+ )}
-
+
{isLoading ? (
) : isError || !data ? (
@@ -248,7 +267,7 @@ export function StepInterests() {
) : (
)}
+
+ {!meetsMinimumRequirement && (
+
+
+
+
+
+ Choose at least {MIN_INTERESTS - interests.length} more
+
+
+
+
+ )}
)