1 files changed, 10 insertions, 11 deletions
diff --git a/src/view/com/modals/lang-settings/LanguageToggle.tsx b/src/view/com/modals/lang-settings/LanguageToggle.tsx
index 187b46e8c..45b100f20 100644
--- a/src/view/com/modals/lang-settings/LanguageToggle.tsx
+++ b/src/view/com/modals/lang-settings/LanguageToggle.tsx
@@ -1,11 +1,10 @@
 import React from 'react'
 import {StyleSheet} from 'react-native'
 import {usePalette} from 'lib/hooks/usePalette'
-import {observer} from 'mobx-react-lite'
 import {ToggleButton} from 'view/com/util/forms/ToggleButton'
-import {useStores} from 'state/index'
+import {useLanguagePrefs, toPostLanguages} from '#/state/preferences/languages'
 
-export const LanguageToggle = observer(function LanguageToggleImpl({
+export function LanguageToggle({
   code2,
   name,
   onPress,
@@ -17,17 +16,17 @@ export const LanguageToggle = observer(function LanguageToggleImpl({
   langType: 'contentLanguages' | 'postLanguages'
 }) {
   const pal = usePalette('default')
-  const store = useStores()
+  const langPrefs = useLanguagePrefs()
 
-  const isSelected = store.preferences[langType].includes(code2)
+  const values =
+    langType === 'contentLanguages'
+      ? langPrefs.contentLanguages
+      : toPostLanguages(langPrefs.postLanguage)
+  const isSelected = values.includes(code2)
 
   // enforce a max of 3 selections for post languages
   let isDisabled = false
-  if (
-    langType === 'postLanguages' &&
-    store.preferences[langType].length >= 3 &&
-    !isSelected
-  ) {
+  if (langType === 'postLanguages' && values.length >= 3 && !isSelected) {
     isDisabled = true
   }
 
@@ -39,7 +38,7 @@ export const LanguageToggle = observer(function LanguageToggleImpl({
       style={[pal.border, styles.languageToggle, isDisabled && styles.dimmed]}
     />
   )
-})
+}
 
 const styles = StyleSheet.create({
   languageToggle: {