2 files changed, 38 insertions, 33 deletions

diff --git a/src/view/shell/mobile/TabsSelector.tsx b/src/view/shell/mobile/TabsSelector.tsx
index 433471602..921a0c85b 100644
--- a/src/view/shell/mobile/TabsSelector.tsx
+++ b/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)
diff --git a/src/view/shell/mobile/index.tsx b/src/view/shell/mobile/index.tsx
index 62ab7a2ad..b0b83b12e 100644
--- a/src/view/shell/mobile/index.tsx
+++ b/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>