Replace notifications icon

src/view/lib/icons.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import {StyleProp, ViewStyle} from 'react-native'
-import Svg, {Circle, Line, G, Path} from 'react-native-svg'
+import Svg, {Path} from 'react-native-svg'
 
 export function GridIcon({style}: {style?: StyleProp<ViewStyle>}) {
   const DIM = 4
@@ -47,6 +47,30 @@ export function HomeIcon({style}: {style?: StyleProp<ViewStyle>}) {
   )
 }
 
+// https://github.com/Remix-Design/RemixIcon/blob/master/License
+export function BellIcon({
+  style,
+  size,
+}: {
+  style?: StyleProp<ViewStyle>
+  size?: string | number
+}) {
+  return (
+    <Svg
+      fill="none"
+      viewBox="0 0 24 24"
+      width={size || 24}
+      height={size || 24}
+      style={style}>
+      <Path fill="none" d="M0 0h24v24H0z" />
+      <Path
+        fill="currentColor"
+        d="M20 17h2v2H2v-2h2v-7a8 8 0 1 1 16 0v7zm-2 0v-7a6 6 0 1 0-12 0v7h12zm-9 4h6v2H9v-2z"
+      />
+    </Svg>
+  )
+}
+
 // Copyright (c) 2020 Refactoring UI Inc.
 // https://github.com/tailwindlabs/heroicons/blob/master/LICENSE
 export function UserGroupIcon({style}: {style?: StyleProp<ViewStyle>}) {

src/view/shell/mobile/MainMenu.tsx

@@ -16,7 +16,7 @@ import Animated, {
 } from 'react-native-reanimated'
 import {IconProp} from '@fortawesome/fontawesome-svg-core'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {HomeIcon, UserGroupIcon} from '../../lib/icons'
+import {HomeIcon, UserGroupIcon, BellIcon} from '../../lib/icons'
 import {UserAvatar} from '../../com/util/UserAvatar'
 import {useStores} from '../../../state'
 import {s, colors} from '../../lib/styles'
@@ -70,6 +70,8 @@ export const MainMenu = observer(
             <HomeIcon style={styles.menuItemIcon} />
           ) : icon === 'user-group' ? (
             <UserGroupIcon style={styles.menuItemIcon} />
+          ) : icon === 'bell' ? (
+            <BellIcon style={styles.menuItemIcon} size="28" />
           ) : (
             <FontAwesomeIcon
               icon={icon}
@@ -160,7 +162,7 @@ export const MainMenu = observer(
               <View style={[styles.menuItems]}>
                 <MenuItem icon="home" label="Home" url="/" />
                 <MenuItem
-                  icon={['far', 'bell']}
+                  icon="bell"
                   label="Notifications"
                   url="/notifications"
                   count={store.me.notificationCount}

src/view/shell/mobile/index.tsx

@@ -9,6 +9,7 @@ import {
   Text,
   TouchableOpacity,
   View,
+  ViewStyle,
 } from 'react-native'
 import {ScreenContainer, Screen} from 'react-native-screens'
 import LinearGradient from 'react-native-linear-gradient'
@@ -31,7 +32,7 @@ import {LocationNavigator} from './LocationNavigator'
 import {MainMenu} from './MainMenu'
 import {TabsSelector} from './TabsSelector'
 import {s, colors} from '../../lib/styles'
-import {GridIcon, HomeIcon} from '../../lib/icons'
+import {GridIcon, HomeIcon, BellIcon} from '../../lib/icons'
 
 const SWIPE_GESTURE_DIST_TRIGGER = 0.5
 const SWIPE_GESTURE_VEL_TRIGGER = 2500
@@ -43,17 +44,23 @@ const Btn = ({
   onPress,
   onLongPress,
 }: {
-  icon: IconProp
+  icon: IconProp | 'menu' | 'house' | 'bell'
   inactive?: boolean
   notificationCount?: number
   onPress?: (event: GestureResponderEvent) => void
   onLongPress?: (event: GestureResponderEvent) => void
 }) => {
+  let size = 21
+  let addedStyles
   let IconEl
   if (icon === 'menu') {
     IconEl = GridIcon
   } else if (icon === 'house') {
     IconEl = HomeIcon
+  } else if (icon === 'bell') {
+    IconEl = BellIcon
+    size = 24
+    addedStyles = {position: 'relative', top: -1} as ViewStyle
   } else {
     IconEl = FontAwesomeIcon
   }
@@ -67,8 +74,8 @@ const Btn = ({
           </View>
         ) : undefined}
         <IconEl
-          size={21}
+          size={size}
-          style={[styles.ctrlIcon, styles.inactive]}
+          style={[styles.ctrlIcon, styles.inactive, addedStyles]}
           icon={icon}
         />
       </View>
@@ -85,7 +92,7 @@ const Btn = ({
           <Text style={styles.ctrlCountLabel}>{notificationCount}</Text>
         </View>
       ) : undefined}
-      <IconEl size={21} style={styles.ctrlIcon} icon={icon} />
+      <IconEl size={size} style={[styles.ctrlIcon, addedStyles]} icon={icon} />
     </TouchableOpacity>
   )
 }
@@ -203,7 +210,7 @@ export const MobileShell: React.FC = observer(() => {
         <Btn icon="search" inactive={true} onPress={() => {} /* TODO */} />
         <Btn icon="menu" onPress={onPressMenu} />
         <Btn
-          icon={['far', 'bell']}
+          icon="bell"
           onPress={onPressNotifications}
           notificationCount={store.me.notificationCount}
         />