Do it the normal way

src/screens/Onboarding/StepInterests/InterestButton.tsx

@@ -1,16 +1,15 @@
 import React from 'react'
-import {View, ViewStyle, TextStyle} from 'react-native'
+import {TextStyle, View, ViewStyle} from 'react-native'
 
-import {useTheme, atoms as a, native} from '#/alf'
+import {capitalize} from '#/lib/strings/capitalize'
+import {useInterestsDisplayNames} from '#/screens/Onboarding/state'
+import {atoms as a, native, useTheme} from '#/alf'
 import * as Toggle from '#/components/forms/Toggle'
 import {Text} from '#/components/Typography'
-import {capitalize} from '#/lib/strings/capitalize'
-
-import {Context} from '#/screens/Onboarding/state'
 
 export function InterestButton({interest}: {interest: string}) {
   const t = useTheme()
-  const {interestsDisplayNames} = React.useContext(Context)
+  const interestsDisplayNames = useInterestsDisplayNames()
   const ctx = Toggle.useItemContext()
 
   const styles = React.useMemo(() => {

src/screens/Onboarding/StepInterests/index.tsx

@@ -15,7 +15,11 @@ import {
   OnboardingControls,
   TitleText,
 } from '#/screens/Onboarding/Layout'
-import {ApiResponseMap, Context} from '#/screens/Onboarding/state'
+import {
+  ApiResponseMap,
+  Context,
+  useInterestsDisplayNames,
+} from '#/screens/Onboarding/state'
 import {InterestButton} from '#/screens/Onboarding/StepInterests/InterestButton'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
@@ -33,8 +37,9 @@ export function StepInterests() {
   const t = useTheme()
   const {gtMobile} = useBreakpoints()
   const {track} = useAnalytics()
+  const interestsDisplayNames = useInterestsDisplayNames()
 
-  const {state, dispatch, interestsDisplayNames} = React.useContext(Context)
+  const {state, dispatch} = React.useContext(Context)
   const [saving, setSaving] = React.useState(false)
   const [interests, setInterests] = React.useState<string[]>(
     state.interestsStepResults.selectedInterests.map(i => i),

src/screens/Onboarding/state.ts

@@ -1,5 +1,6 @@
 import React from 'react'
-import {t} from '@lingui/macro'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
 
 import {logger} from '#/logger'
 import {AvatarColor, Emoji} from '#/screens/Onboarding/StepProfile/types'
@@ -69,32 +70,36 @@ export type ApiResponseMap = {
   }
 }
 
-export const INTEREST_TO_DISPLAY_NAME_DEFAULTS: {
+export function useInterestsDisplayNames() {
-  [key: string]: string
+  const {_} = useLingui()
-} = {
+
-  // Keep this alphabetized
+  return React.useMemo<Record<string, string>>(() => {
-  animals: t`Animals`,
+    return {
-  art: t`Art`,
+      // Keep this alphabetized
-  books: t`Books`,
+      animals: _(msg`Animals`),
-  comedy: t`Comedy`,
+      art: _(msg`Art`),
-  comics: t`Comics`,
+      books: _(msg`Books`),
-  culture: t`Culture`,
+      comedy: _(msg`Comedy`),
-  dev: t`Software Dev`,
+      comics: _(msg`Comics`),
-  education: t`Education`,
+      culture: _(msg`Culture`),
-  food: t`Food`,
+      dev: _(msg`Software Dev`),
-  gaming: t`Video Games`,
+      education: _(msg`Education`),
-  journalism: t`Journalism`,
+      food: _(msg`Food`),
-  movies: t`Movies`,
+      gaming: _(msg`Video Games`),
-  nature: t`Nature`,
+      journalism: _(msg`Journalism`),
-  news: t`News`,
+      movies: _(msg`Movies`),
-  pets: t`Pets`,
+      nature: _(msg`Nature`),
-  photography: t`Photography`,
+      news: _(msg`News`),
-  politics: t`Politics`,
+      pets: _(msg`Pets`),
-  science: t`Science`,
+      photography: _(msg`Photography`),
-  sports: t`Sports`,
+      politics: _(msg`Politics`),
-  tech: t`Tech`,
+      science: _(msg`Science`),
-  tv: t`TV`,
+      sports: _(msg`Sports`),
-  writers: t`Writers`,
+      tech: _(msg`Tech`),
+      tv: _(msg`TV`),
+      writers: _(msg`Writers`),
+    }
+  }, [_])
 }
 
 export const initialState: OnboardingState = {
@@ -122,11 +127,9 @@ export const initialState: OnboardingState = {
 export const Context = React.createContext<{
   state: OnboardingState
   dispatch: React.Dispatch<OnboardingAction>
-  interestsDisplayNames: {[key: string]: string}
 }>({
   state: {...initialState},
   dispatch: () => {},
-  interestsDisplayNames: INTEREST_TO_DISPLAY_NAME_DEFAULTS,
 })
 
 export function reducer(