Move to expo and react-navigation (#288)

* WIP - adding expo

* WIP - adding expo 2

* Fix tsc

* Finish adding expo

* Disable the 'require cycle' warning

* Tweak plist

* Modify some dependency versions to make expo happy

* Fix icon fill

* Get Web compiling for expo

* 1.7

* Switch to react-navigation in expo2 (#287)

* WIP Switch to react-navigation

* WIP Switch to react-navigation 2

* WIP Switch to react-navigation 3

* Convert all screens to react navigation

* Update BottomBar for react navigation

* Update mobile menu to be react-native drawer

* Fixes to drawer and bottombar

* Factor out some helpers

* Replace the navigation model with react-navigation

* Restructure the shell folder and fix the header positioning

* Restore the error boundary

* Fix tsc

* Implement not-found page

* Remove react-native-gesture-handler (no longer used)

* Handle notifee card presses

* Handle all navigations from the state layer

* Fix drawer behaviors

* Fix two linking issues

* Switch to our react-native-progress fork to fix an svg rendering issue

* Get Web working with react-navigation

* Refactor routes and navigation for a bit more clarity

* Remove dead code

* Rework Web shell to left/right nav to make this easier

* Fix ViewHeader for desktop web

* Hide profileheader back btn on desktop web

* Move the compose button to the left nav

* Implement reply prompt in threads for desktop web

* Composer refactors

* Factor out all platform-specific text input behaviors from the composer

* Small fix

* Update the web build to use tiptap for the composer

* Tune up the mention autocomplete dropdown

* Simplify the default avatar and banner

* Fixes to link cards in web composer

* Fix dropdowns on web

* Tweak load latest on desktop

* Add web beta message and feedback link

* Fix up links in desktop web

1 files changed, 0 insertions, 354 deletions

diff --git a/src/view/shell/mobile/Menu.tsx b/src/view/shell/mobile/Menu.tsx
deleted file mode 100644
index 927e712e1..000000000
--- a/src/view/shell/mobile/Menu.tsx
+++ /dev/null
@@ -1,354 +0,0 @@
-import React from 'react'
-import {
-  Linking,
-  StyleProp,
-  StyleSheet,
-  TouchableOpacity,
-  View,
-  ViewStyle,
-} from 'react-native'
-import {observer} from 'mobx-react-lite'
-import {
-  FontAwesomeIcon,
-  FontAwesomeIconStyle,
-} from '@fortawesome/react-native-fontawesome'
-import {s, colors} from 'lib/styles'
-import {FEEDBACK_FORM_URL} from 'lib/constants'
-import {useStores} from 'state/index'
-import {
-  HomeIcon,
-  HomeIconSolid,
-  BellIcon,
-  BellIconSolid,
-  UserIcon,
-  CogIcon,
-  MagnifyingGlassIcon2,
-  MagnifyingGlassIcon2Solid,
-  MoonIcon,
-} from 'lib/icons'
-import {TabPurpose, TabPurposeMainPath} from 'state/models/navigation'
-import {UserAvatar} from '../../com/util/UserAvatar'
-import {Text} from '../../com/util/text/Text'
-import {useTheme} from 'lib/ThemeContext'
-import {usePalette} from 'lib/hooks/usePalette'
-import {useAnalytics} from 'lib/analytics'
-import {pluralize} from 'lib/strings/helpers'
-
-export const Menu = observer(({onClose}: {onClose: () => void}) => {
-  const theme = useTheme()
-  const pal = usePalette('default')
-  const store = useStores()
-  const {track} = useAnalytics()
-
-  // events
-  // =
-
-  const onNavigate = (url: string) => {
-    track('Menu:ItemClicked', {url})
-
-    onClose()
-    if (url === TabPurposeMainPath[TabPurpose.Notifs]) {
-      store.nav.switchTo(TabPurpose.Notifs, true)
-    } else if (url === TabPurposeMainPath[TabPurpose.Search]) {
-      store.nav.switchTo(TabPurpose.Search, true)
-    } else {
-      store.nav.switchTo(TabPurpose.Default, true)
-      if (url !== '/') {
-        store.nav.navigate(url)
-      }
-    }
-  }
-
-  const onPressFeedback = () => {
-    track('Menu:FeedbackClicked')
-    Linking.openURL(FEEDBACK_FORM_URL)
-  }
-
-  // rendering
-  // =
-
-  const MenuItem = ({
-    icon,
-    label,
-    count,
-    url,
-    bold,
-    onPress,
-  }: {
-    icon: JSX.Element
-    label: string
-    count?: number
-    url?: string
-    bold?: boolean
-    onPress?: () => void
-  }) => (
-    <TouchableOpacity
-      testID={`menuItemButton-${label}`}
-      style={styles.menuItem}
-      onPress={onPress ? onPress : () => onNavigate(url || '/')}>
-      <View style={[styles.menuItemIconWrapper]}>
-        {icon}
-        {count ? (
-          <View style={styles.menuItemCount}>
-            <Text style={styles.menuItemCountLabel}>{count}</Text>
-          </View>
-        ) : undefined}
-      </View>
-      <Text
-        type={bold ? '2xl-bold' : '2xl'}
-        style={[pal.text, s.flex1]}
-        numberOfLines={1}>
-        {label}
-      </Text>
-    </TouchableOpacity>
-  )
-
-  const onDarkmodePress = () => {
-    track('Menu:ItemClicked', {url: '/darkmode'})
-    store.shell.setDarkMode(!store.shell.darkMode)
-  }
-
-  const isAtHome =
-    store.nav.tab.current.url === TabPurposeMainPath[TabPurpose.Default]
-  const isAtSearch =
-    store.nav.tab.current.url === TabPurposeMainPath[TabPurpose.Search]
-  const isAtNotifications =
-    store.nav.tab.current.url === TabPurposeMainPath[TabPurpose.Notifs]
-
-  return (
-    <View
-      testID="menuView"
-      style={[
-        styles.view,
-        theme.colorScheme === 'light' ? pal.view : styles.viewDarkMode,
-      ]}>
-      <TouchableOpacity
-        testID="profileCardButton"
-        onPress={() => onNavigate(`/profile/${store.me.handle}`)}>
-        <UserAvatar
-          size={80}
-          displayName={store.me.displayName}
-          handle={store.me.handle}
-          avatar={store.me.avatar}
-        />
-        <Text
-          type="title-lg"
-          style={[pal.text, s.bold, styles.profileCardDisplayName]}>
-          {store.me.displayName || store.me.handle}
-        </Text>
-        <Text type="2xl" style={[pal.textLight, styles.profileCardHandle]}>
-          @{store.me.handle}
-        </Text>
-        <Text type="xl" style={[pal.textLight, styles.profileCardFollowers]}>
-          <Text type="xl-medium" style={pal.text}>
-            {store.me.followersCount || 0}
-          </Text>{' '}
-          {pluralize(store.me.followersCount || 0, 'follower')} &middot;{' '}
-          <Text type="xl-medium" style={pal.text}>
-            {store.me.followsCount || 0}
-          </Text>{' '}
-          following
-        </Text>
-      </TouchableOpacity>
-      <View style={s.flex1} />
-      <View>
-        <MenuItem
-          icon={
-            isAtSearch ? (
-              <MagnifyingGlassIcon2Solid
-                style={pal.text as StyleProp<ViewStyle>}
-                size={24}
-                strokeWidth={1.7}
-              />
-            ) : (
-              <MagnifyingGlassIcon2
-                style={pal.text as StyleProp<ViewStyle>}
-                size={24}
-                strokeWidth={1.7}
-              />
-            )
-          }
-          label="Search"
-          url="/search"
-          bold={isAtSearch}
-        />
-        <MenuItem
-          icon={
-            isAtHome ? (
-              <HomeIconSolid
-                style={pal.text as StyleProp<ViewStyle>}
-                size="24"
-                strokeWidth={3.25}
-                fillOpacity={1}
-              />
-            ) : (
-              <HomeIcon
-                style={pal.text as StyleProp<ViewStyle>}
-                size="24"
-                strokeWidth={3.25}
-              />
-            )
-          }
-          label="Home"
-          url="/"
-          bold={isAtHome}
-        />
-        <MenuItem
-          icon={
-            isAtNotifications ? (
-              <BellIconSolid
-                style={pal.text as StyleProp<ViewStyle>}
-                size="24"
-                strokeWidth={1.7}
-                fillOpacity={1}
-              />
-            ) : (
-              <BellIcon
-                style={pal.text as StyleProp<ViewStyle>}
-                size="24"
-                strokeWidth={1.7}
-              />
-            )
-          }
-          label="Notifications"
-          url="/notifications"
-          count={store.me.notifications.unreadCount}
-          bold={isAtNotifications}
-        />
-        <MenuItem
-          icon={
-            <UserIcon
-              style={pal.text as StyleProp<ViewStyle>}
-              size="26"
-              strokeWidth={1.5}
-            />
-          }
-          label="Profile"
-          url={`/profile/${store.me.handle}`}
-        />
-        <MenuItem
-          icon={
-            <CogIcon
-              style={pal.text as StyleProp<ViewStyle>}
-              size="26"
-              strokeWidth={1.75}
-            />
-          }
-          label="Settings"
-          url="/settings"
-        />
-      </View>
-      <View style={s.flex1} />
-      <View style={styles.footer}>
-        <TouchableOpacity
-          onPress={onDarkmodePress}
-          style={[
-            styles.footerBtn,
-            theme.colorScheme === 'light' ? pal.btn : styles.footerBtnDarkMode,
-          ]}>
-          <MoonIcon
-            size={22}
-            style={pal.text as StyleProp<ViewStyle>}
-            strokeWidth={2}
-          />
-        </TouchableOpacity>
-        <TouchableOpacity
-          onPress={onPressFeedback}
-          style={[
-            styles.footerBtn,
-            styles.footerBtnFeedback,
-            theme.colorScheme === 'light'
-              ? styles.footerBtnFeedbackLight
-              : styles.footerBtnFeedbackDark,
-          ]}>
-          <FontAwesomeIcon
-            style={pal.link as FontAwesomeIconStyle}
-            size={19}
-            icon={['far', 'message']}
-          />
-          <Text type="2xl-medium" style={[pal.link, s.pl10]}>
-            Feedback
-          </Text>
-        </TouchableOpacity>
-      </View>
-    </View>
-  )
-})
-
-const styles = StyleSheet.create({
-  view: {
-    flex: 1,
-    paddingTop: 20,
-    paddingBottom: 50,
-    paddingLeft: 30,
-  },
-  viewDarkMode: {
-    backgroundColor: '#1B1919',
-  },
-
-  profileCardDisplayName: {
-    marginTop: 20,
-    paddingRight: 20,
-  },
-  profileCardHandle: {
-    marginTop: 4,
-    paddingRight: 20,
-  },
-  profileCardFollowers: {
-    marginTop: 16,
-    paddingRight: 20,
-  },
-
-  menuItem: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingVertical: 16,
-    paddingRight: 10,
-  },
-  menuItemIconWrapper: {
-    width: 24,
-    height: 24,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginRight: 12,
-  },
-  menuItemCount: {
-    position: 'absolute',
-    right: -6,
-    top: -2,
-    backgroundColor: colors.red3,
-    paddingHorizontal: 4,
-    paddingBottom: 1,
-    borderRadius: 6,
-  },
-  menuItemCountLabel: {
-    fontSize: 12,
-    fontWeight: 'bold',
-    color: colors.white,
-  },
-
-  footer: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    paddingRight: 30,
-    paddingTop: 80,
-  },
-  footerBtn: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    padding: 10,
-    borderRadius: 25,
-  },
-  footerBtnDarkMode: {
-    backgroundColor: colors.black,
-  },
-  footerBtnFeedback: {
-    paddingHorizontal: 24,
-  },
-  footerBtnFeedbackLight: {
-    backgroundColor: '#DDEFFF',
-  },
-  footerBtnFeedbackDark: {
-    backgroundColor: colors.blue6,
-  },
-})