2 files changed, 73 insertions, 9 deletions
diff --git a/src/view/com/composer/Composer.tsx b/src/view/com/composer/Composer.tsx
index f88cf4bf0..abac291a2 100644
--- a/src/view/com/composer/Composer.tsx
+++ b/src/view/com/composer/Composer.tsx
@@ -38,6 +38,7 @@ import {isDesktopWeb, isAndroid} from 'platform/detection'
 import {GalleryModel} from 'state/models/media/gallery'
 import {Gallery} from './photos/Gallery'
 import {MAX_GRAPHEME_LENGTH} from 'lib/constants'
+import {SelectLangBtn} from './select-language/SelectLangBtn'
 
 type Props = ComposerOpts & {
   onClose: () => void
@@ -71,6 +72,13 @@ export const ComposePost = observer(function ComposePost({
   )
 
   const insets = useSafeAreaInsets()
+  const viewStyles = useMemo(
+    () => ({
+      paddingBottom: isAndroid ? insets.bottom : 0,
+      paddingTop: isAndroid ? insets.top : isDesktopWeb ? 0 : 15,
+    }),
+    [insets],
+  )
 
   // HACK
   // there's a bug with @mattermost/react-native-paste-input where if the input
@@ -87,6 +95,7 @@ export const ComposePost = observer(function ComposePost({
     autocompleteView.setup()
   }, [autocompleteView])
 
+  // listen to escape key on desktop web
   const onEscape = useCallback(
     (e: KeyboardEvent) => {
       if (e.key === 'Escape') {
@@ -109,7 +118,6 @@ export const ComposePost = observer(function ComposePost({
     },
     [store, onClose],
   )
-
   useEffect(() => {
     if (isDesktopWeb) {
       window.addEventListener('keydown', onEscape)
@@ -157,6 +165,7 @@ export const ComposePost = observer(function ComposePost({
           extLink: extLink,
           onStateChange: setProcessingState,
           knownHandles: autocompleteView.knownHandles,
+          langs: store.preferences.postLanguages,
         })
         track('Create Post', {
           imageCount: gallery.size,
@@ -197,15 +206,13 @@ export const ComposePost = observer(function ComposePost({
     ],
   )
 
-  const canPost = graphemeLength <= MAX_GRAPHEME_LENGTH
-
-  const selectTextInputPlaceholder = replyTo ? 'Write your reply' : "What's up?"
+  const canPost = useMemo(
+    () => graphemeLength <= MAX_GRAPHEME_LENGTH,
+    [graphemeLength],
+  )
+  const selectTextInputPlaceholder = replyTo ? 'Write your reply' : `What's up?`
 
-  const canSelectImages = gallery.size < 4
-  const viewStyles = {
-    paddingBottom: isAndroid ? insets.bottom : 0,
-    paddingTop: isAndroid ? insets.top : isDesktopWeb ? 0 : 15,
-  }
+  const canSelectImages = useMemo(() => gallery.size < 4, [gallery.size])
 
   return (
     <KeyboardAvoidingView
@@ -352,6 +359,7 @@ export const ComposePost = observer(function ComposePost({
             </>
           ) : null}
           <View style={s.flex1} />
+          <SelectLangBtn />
           <CharProgress count={graphemeLength} />
         </View>
       </View>
diff --git a/src/view/com/composer/select-language/SelectLangBtn.tsx b/src/view/com/composer/select-language/SelectLangBtn.tsx
new file mode 100644
index 000000000..8c55e1c91
--- /dev/null
+++ b/src/view/com/composer/select-language/SelectLangBtn.tsx
@@ -0,0 +1,56 @@
+import React, {useCallback} from 'react'
+import {TouchableOpacity, StyleSheet, Keyboard} from 'react-native'
+import {observer} from 'mobx-react-lite'
+import {
+  FontAwesomeIcon,
+  FontAwesomeIconStyle,
+} from '@fortawesome/react-native-fontawesome'
+import {Text} from 'view/com/util/text/Text'
+import {usePalette} from 'lib/hooks/usePalette'
+import {useStores} from 'state/index'
+import {isNative} from 'platform/detection'
+
+const HITSLOP = {left: 10, top: 10, right: 10, bottom: 10}
+
+export const SelectLangBtn = observer(function SelectLangBtn() {
+  const pal = usePalette('default')
+  const store = useStores()
+
+  const onPress = useCallback(async () => {
+    if (isNative) {
+      if (Keyboard.isVisible()) {
+        Keyboard.dismiss()
+      }
+    }
+    store.shell.openModal({name: 'post-languages-settings'})
+  }, [store])
+
+  return (
+    <TouchableOpacity
+      testID="selectLangBtn"
+      onPress={onPress}
+      style={styles.button}
+      hitSlop={HITSLOP}
+      accessibilityRole="button"
+      accessibilityLabel="Language selection"
+      accessibilityHint="Opens screen or modal to select language of post">
+      {store.preferences.postLanguages.length > 0 ? (
+        <Text type="lg-bold" style={pal.link}>
+          {store.preferences.postLanguages.join(', ')}
+        </Text>
+      ) : (
+        <FontAwesomeIcon
+          icon="language"
+          style={pal.link as FontAwesomeIconStyle}
+          size={26}
+        />
+      )}
+    </TouchableOpacity>
+  )
+})
+
+const styles = StyleSheet.create({
+  button: {
+    paddingHorizontal: 15,
+  },
+})