Fix all type errors

src/view/shell/desktop-web/left-column.tsx

@@ -1,55 +1,57 @@
 import React from 'react'
-import {Pressable, View, StyleSheet} from 'react-native'
+import {View} from 'react-native'
 
-export const NavItem: React.FC<{label: string; screen: string}> = ({
-  label,
-  screen,
-}) => {
-  const Link = <></> // TODO
-  return (
-    <View>
-      <Pressable
-        style={state => [
-          // @ts-ignore it does exist! (react-native-web) -prf
-          state.hovered && styles.navItemHovered,
-        ]}>
-        <Link
-          style={[
-            styles.navItemLink,
-            false /* TODO route.name === screen*/ && styles.navItemLinkSelected,
-          ]}
-          to={{screen, params: {}}}>
-          {label}
-        </Link>
-      </Pressable>
-    </View>
-  )
-}
+// export const NavItem: React.FC<{label: string; screen: string}> = ({
+//   label,
+//   screen,
+// }) => {
+//   const Link = <></> // TODO
+//   return (
+//     <View>
+//       <Pressable
+//         style={state => [
+//           // @ts-ignore it does exist! (react-native-web) -prf
+//           state.hovered && styles.navItemHovered,
+//         ]}>
+//         <Link
+//           style={[
+//             styles.navItemLink,
+//             false /* TODO route.name === screen*/ && styles.navItemLinkSelected,
+//           ]}
+//           to={{screen, params: {}}}>
+//           {label}
+//         </Link>
+//       </Pressable>
+//     </View>
+//   )
+// }
 
 export const DesktopLeftColumn: React.FC = () => {
-  return (
-    <View style={styles.container}>
-      <NavItem screen="Home" label="Home" />
-      <NavItem screen="Search" label="Search" />
-      <NavItem screen="Notifications" label="Notifications" />
-    </View>
-  )
+  // TODO
+  return <View />
+  // return (
+  //   <View style={styles.container}>
+  //     <NavItem screen="Home" label="Home" />
+  //     <NavItem screen="Search" label="Search" />
+  //     <NavItem screen="Notifications" label="Notifications" />
+  //   </View>
+  // )
 }
 
-const styles = StyleSheet.create({
-  container: {
-    position: 'absolute',
-    left: 'calc(50vw - 500px)',
-    width: '200px',
-    height: '100%',
-  },
-  navItemHovered: {
-    backgroundColor: 'gray',
-  },
-  navItemLink: {
-    padding: '1rem',
-  },
-  navItemLinkSelected: {
-    color: 'blue',
-  },
-})
+// const styles = StyleSheet.create({
+//   container: {
+//     position: 'absolute',
+//     left: 'calc(50vw - 500px)',
+//     width: '200px',
+//     height: '100%',
+//   },
+//   navItemHovered: {
+//     backgroundColor: 'gray',
+//   },
+//   navItemLink: {
+//     padding: '1rem',
+//   },
+//   navItemLinkSelected: {
+//     color: 'blue',
+//   },
+// })

src/view/shell/mobile/TabsSelector.tsx

@@ -36,11 +36,12 @@ export const TabsSelector = observer(
       undefined,
     )
     const closeInterp = useAnimatedValue(0)
+    const tabsContainerRef = useRef<View>(null)
     const tabsRef = useRef<ScrollView>(null)
     const tabRefs = useMemo(
       () =>
         Array.from({length: store.nav.tabs.length}).map(() =>
-          createRef<Animated.View>(),
+          createRef<View>(),
         ),
       [store.nav.tabs.length],
     )
@@ -90,9 +91,9 @@ export const TabsSelector = observer(
     const onLayout = () => {
       // focus the current tab
       const targetTab = tabRefs[store.nav.tabIndex]
-      if (tabsRef.current && targetTab.current) {
+      if (tabsContainerRef.current && tabsRef.current && targetTab.current) {
         targetTab.current.measureLayout?.(
-          tabsRef.current,
+          tabsContainerRef.current,
           (_left: number, top: number) => {
             tabsRef.current?.scrollTo({y: top, animated: false})
           },
@@ -162,7 +163,9 @@ export const TabsSelector = observer(
               </TouchableWithoutFeedback>
             </View>
           </View>
-          <View style={[s.p10, styles.section, styles.sectionGrayBg]}>
+          <View
+            ref={tabsContainerRef}
+            style={[s.p10, styles.section, styles.sectionGrayBg]}>
             <ScrollView ref={tabsRef} style={styles.tabs}>
               {store.nav.tabs.map((tab, tabIndex) => {
                 const {icon} = match(tab.current.url)

src/view/shell/mobile/index.tsx

@@ -67,29 +67,36 @@ const Btn = ({
   onLongPress?: (event: GestureResponderEvent) => void
 }) => {
   const pal = usePalette('default')
-  let size = 24
-  let addedStyles
-  let IconEl
+  let iconEl
   if (icon === 'menu') {
-    IconEl = GridIcon
+    iconEl = <GridIcon style={[styles.ctrlIcon, pal.text]} />
   } else if (icon === 'menu-solid') {
-    IconEl = GridIconSolid
+    iconEl = <GridIconSolid style={[styles.ctrlIcon, pal.text]} />
   } else if (icon === 'home') {
-    IconEl = HomeIcon
-    size = 27
+    iconEl = <HomeIcon size={27} style={[styles.ctrlIcon, pal.text]} />
   } else if (icon === 'home-solid') {
-    IconEl = HomeIconSolid
-    size = 27
+    iconEl = <HomeIconSolid size={27} style={[styles.ctrlIcon, pal.text]} />
   } else if (icon === 'bell') {
-    IconEl = BellIcon
-    size = 27
-    addedStyles = {position: 'relative', top: -1} as ViewStyle
+    const addedStyles = {position: 'relative', top: -1} as ViewStyle
+    iconEl = (
+      <BellIcon size={27} style={[styles.ctrlIcon, pal.text, addedStyles]} />
+    )
   } else if (icon === 'bell-solid') {
-    IconEl = BellIconSolid
-    size = 27
-    addedStyles = {position: 'relative', top: -1} as ViewStyle
+    const addedStyles = {position: 'relative', top: -1} as ViewStyle
+    iconEl = (
+      <BellIconSolid
+        size={27}
+        style={[styles.ctrlIcon, pal.text, addedStyles]}
+      />
+    )
   } else {
-    IconEl = FontAwesomeIcon
+    iconEl = (
+      <FontAwesomeIcon
+        size={24}
+        icon={icon}
+        style={[styles.ctrlIcon, pal.text]}
+      />
+    )
   }
 
   return (
@@ -108,11 +115,7 @@ const Btn = ({
           <Text style={styles.tabCountLabel}>{tabCount}</Text>
         </View>
       ) : undefined}
-      <IconEl
-        size={size}
-        style={[styles.ctrlIcon, pal.text, addedStyles]}
-        icon={icon}
-      />
+      {iconEl}
     </TouchableOpacity>
   )
 }
@@ -122,7 +125,7 @@ export const MobileShell: React.FC = observer(() => {
   const pal = usePalette('default')
   const store = useStores()
   const [isTabsSelectorActive, setTabsSelectorActive] = useState(false)
-  const scrollElRef = useRef<FlatList | undefined>()
+  const scrollElRef = useRef<FlatList>(null)
   const winDim = useWindowDimensions()
   const [menuSwipingDirection, setMenuSwipingDirection] = useState(0)
   const swipeGestureInterp = useAnimatedValue(0)
@@ -292,9 +295,11 @@ export const MobileShell: React.FC = observer(() => {
     )
     shouldRenderMenu = true
   }
-  const menuSwipeTransform = {
-    transform: [{translateX: menuTranslateX}],
-  }
+  const menuSwipeTransform = menuTranslateX
+    ? {
+        transform: [{translateX: menuTranslateX}],
+      }
+    : undefined
   const swipeOpacity = {
     opacity: swipeGestureInterp.interpolate({
       inputRange: [-1, 0, 1],
@@ -417,10 +422,7 @@ export const MobileShell: React.FC = observer(() => {
           ) : undefined}
           {shouldRenderMenu && (
             <Animated.View style={[styles.menuDrawer, menuSwipeTransform]}>
-              <Menu
-                visible={isMenuActive}
-                onClose={() => store.shell.setMainMenuOpen(false)}
-              />
+              <Menu onClose={() => store.shell.setMainMenuOpen(false)} />
             </Animated.View>
           )}
         </HorzSwipe>