Internationalization & localization (#1822)

* install and setup lingui

* setup dynamic locale activation and async loading

* first pass of automated replacement of text messages

* add some more documentaton

* fix nits

* add `es` and `hi`locales for testing purposes

* make accessibilityLabel localized

* compile and extract new messages

* fix merge conflicts

* fix eslint warning

* change instructions from sending email to opening PR

* fix comments

src/view/shell/bottom-bar/BottomBar.tsx

@@ -24,6 +24,8 @@ import {styles} from './BottomBarStyles'
 import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
 import {useNavigationTabState} from 'lib/hooks/useNavigationTabState'
 import {UserAvatar} from 'view/com/util/UserAvatar'
+import {useLingui} from '@lingui/react'
+import {msg} from '@lingui/macro'
 import {useModalControls} from '#/state/modals'
 
 type TabOptions = 'Home' | 'Search' | 'Notifications' | 'MyProfile' | 'Feeds'
@@ -34,6 +36,7 @@ export const BottomBar = observer(function BottomBarImpl({
   const {openModal} = useModalControls()
   const store = useStores()
   const pal = usePalette('default')
+  const {_} = useLingui()
   const safeAreaInsets = useSafeAreaInsets()
   const {track} = useAnalytics()
   const {isAtHome, isAtSearch, isAtFeeds, isAtNotifications, isAtMyProfile} =
@@ -105,7 +108,7 @@ export const BottomBar = observer(function BottomBarImpl({
         }
         onPress={onPressHome}
         accessibilityRole="tab"
-        accessibilityLabel="Home"
+        accessibilityLabel={_(msg`Home`)}
         accessibilityHint=""
       />
       <Btn
@@ -127,7 +130,7 @@ export const BottomBar = observer(function BottomBarImpl({
         }
         onPress={onPressSearch}
         accessibilityRole="search"
-        accessibilityLabel="Search"
+        accessibilityLabel={_(msg`Search`)}
         accessibilityHint=""
       />
       <Btn
@@ -149,7 +152,7 @@ export const BottomBar = observer(function BottomBarImpl({
         }
         onPress={onPressFeeds}
         accessibilityRole="tab"
-        accessibilityLabel="Feeds"
+        accessibilityLabel={_(msg`Feeds`)}
         accessibilityHint=""
       />
       <Btn
@@ -173,7 +176,7 @@ export const BottomBar = observer(function BottomBarImpl({
         notificationCount={notifications.unreadCountLabel}
         accessible={true}
         accessibilityRole="tab"
-        accessibilityLabel="Notifications"
+        accessibilityLabel={_(msg`Notifications`)}
         accessibilityHint={
           notifications.unreadCountLabel === ''
             ? ''
@@ -215,7 +218,7 @@ export const BottomBar = observer(function BottomBarImpl({
         onPress={onPressProfile}
         onLongPress={onLongPressProfile}
         accessibilityRole="tab"
-        accessibilityLabel="Profile"
+        accessibilityLabel={_(msg`Profile`)}
         accessibilityHint=""
       />
     </Animated.View>