UI for side menu (#668)

* Update side menu * UI for side menu * Add placeholder components; adjust for small screen sizes * Code cleanup * Update snapshots * Query for second username element in e2e test --------- Co-authored-by: Johannes Klein <johannes.t.klein@gmail.com>
2025-12-23 22:18:36 -05:00 · 2023-06-26 10:34:51 -07:00
parent 45657ce0f7
commit d58415dd27
29 changed files with 459 additions and 218 deletions
--- a/android/app/src/main/assets/fonts/INatIcon.ttf
+++ b/android/app/src/main/assets/fonts/INatIcon.ttf
--- a/android/link-assets-manifest.json
+++ b/android/link-assets-manifest.json
@@ -3,7 +3,7 @@
  "data": [
    {
      "path": "assets/fonts/INatIcon.ttf",
-      "sha1": "2691c217d3dfbcba545ce985c306fa93f9610606"
+      "sha1": "fe95cee7255fc1323f469c2d76d483925a0b4eef"
    },
    {
      "path": "assets/fonts/Whitney-BookItalic-Pro.otf",
@@ -19,7 +19,7 @@
    },
    {
      "path": "assets/fonts/inaturalisticons.ttf",
-      "sha1": "d5a9b116c0d7857ec446f4f045fe5316196d22ec"
+      "sha1": "177ae18eacc4a277489677b4abdc441b4487df13"
    }
  ]
 }
--- a/assets/fonts/INatIcon.ttf
+++ b/assets/fonts/INatIcon.ttf
--- a/e2e/signIn.e2e.js
+++ b/e2e/signIn.e2e.js
@@ -47,7 +47,7 @@ describe( "Sign into app as logged-in user", () => {
    const loginButton = element( by.id( "Login.loginButton" ) );
    await expect( loginButton ).toBeVisible();
    await element( by.id( "Login.loginButton" ) ).tap();
-    const username = element( by.text( `@${Config.E2E_TEST_USERNAME}` ) );
+    const username = element( by.text( `@${Config.E2E_TEST_USERNAME}` ) ).atIndex( 1 );
    await waitFor( username ).toBeVisible().withTimeout( 10000 );
    await expect( username ).toBeVisible();
  } );
--- a/ios/iNaturalistReactNative.xcodeproj/project.pbxproj
+++ b/ios/iNaturalistReactNative.xcodeproj/project.pbxproj
@@ -8,14 +8,14 @@

 /* Begin PBXBuildFile section */
 		00E356F31AD99517003FC87E /* iNaturalistReactNativeTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 00E356F21AD99517003FC87E /* iNaturalistReactNativeTests.m */; };
-		015B74B1048846199E2104BF /* INatIcon.ttf in Resources */ = {isa = PBXBuildFile; fileRef = C9904C04E3DD410FA07BB0A1 /* INatIcon.ttf */; };
 		13B07FBC1A68108700A75B9A /* AppDelegate.mm in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.mm */; };
 		13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; };
 		13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
 		374CB22F29943E63005885ED /* Whitney-BookItalic-Pro.otf in Resources */ = {isa = PBXBuildFile; fileRef = 374CB22E29943E63005885ED /* Whitney-BookItalic-Pro.otf */; };
+		4FB3B444D46A4115B867B9CC /* inaturalisticons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = EE004FD2EC174086A7AB2908 /* inaturalisticons.ttf */; };
+		78D1665778AF449EA28D8F35 /* INatIcon.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 30806DE4AD83423EB6F3DCF6 /* INatIcon.ttf */; };
 		7F29616A6267D5F6EC5F67B7 /* libPods-iNaturalistReactNative.a in Frameworks */ = {isa = PBXBuildFile; fileRef = B935DA49196EBFE90895C8DD /* libPods-iNaturalistReactNative.a */; };
 		81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */; };
-		862E651A41DD461AAE4331B2 /* inaturalisticons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 142B10AEC7284E94AE0D2300 /* inaturalisticons.ttf */; };
 		8B65ED3129F575C10054CCEF /* MainInterface.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 8B65ED2F29F575C10054CCEF /* MainInterface.storyboard */; };
 		8B65ED3529F575C10054CCEF /* iNaturalistReactNative-ShareExtension.appex in Embed Foundation Extensions */ = {isa = PBXBuildFile; fileRef = 8B65ED2B29F575C10054CCEF /* iNaturalistReactNative-ShareExtension.appex */; settings = {ATTRIBUTES = (RemoveHeadersOnCopy, ); }; };
 		8B65ED3B29F575FE0054CCEF /* ShareViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 8B65ED3A29F575FE0054CCEF /* ShareViewController.swift */; };
@@ -66,8 +66,8 @@
 		13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = iNaturalistReactNative/Images.xcassets; sourceTree = "<group>"; };
 		13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = iNaturalistReactNative/Info.plist; sourceTree = "<group>"; };
 		13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = iNaturalistReactNative/main.m; sourceTree = "<group>"; };
-		142B10AEC7284E94AE0D2300 /* inaturalisticons.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = inaturalisticons.ttf; path = ../assets/fonts/inaturalisticons.ttf; sourceTree = "<group>"; };
 		19A5877328F8E3310016D128 /* iNaturalistReactNative-Bridging-Header.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = "iNaturalistReactNative-Bridging-Header.h"; sourceTree = "<group>"; };
+		30806DE4AD83423EB6F3DCF6 /* INatIcon.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = INatIcon.ttf; path = ../assets/fonts/INatIcon.ttf; sourceTree = "<group>"; };
 		374CB22E29943E63005885ED /* Whitney-BookItalic-Pro.otf */ = {isa = PBXFileReference; lastKnownFileType = file; name = "Whitney-BookItalic-Pro.otf"; path = "../assets/fonts/Whitney-BookItalic-Pro.otf"; sourceTree = "<group>"; };
 		52305C33CFC262F17ADC692E /* Pods-iNaturalistReactNative.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-iNaturalistReactNative.release.xcconfig"; path = "Target Support Files/Pods-iNaturalistReactNative/Pods-iNaturalistReactNative.release.xcconfig"; sourceTree = "<group>"; };
 		81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.storyboard; name = LaunchScreen.storyboard; path = iNaturalistReactNative/LaunchScreen.storyboard; sourceTree = "<group>"; };
@@ -82,10 +82,10 @@
 		ADBDD0D061046941F61CA31D /* libPods-iNaturalistReactNative-ShareExtension.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-iNaturalistReactNative-ShareExtension.a"; sourceTree = BUILT_PRODUCTS_DIR; };
 		B935DA49196EBFE90895C8DD /* libPods-iNaturalistReactNative.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-iNaturalistReactNative.a"; sourceTree = BUILT_PRODUCTS_DIR; };
 		BA9D41ECEBFA4C38B74009B3 /* Whitney-Light-Pro.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Whitney-Light-Pro.otf"; path = "../assets/fonts/Whitney-Light-Pro.otf"; sourceTree = "<group>"; };
-		C9904C04E3DD410FA07BB0A1 /* INatIcon.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = INatIcon.ttf; path = ../assets/fonts/INatIcon.ttf; sourceTree = "<group>"; };
 		D09FA3A0162844FF80A5EF96 /* Whitney-Medium-Pro.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Whitney-Medium-Pro.otf"; path = "../assets/fonts/Whitney-Medium-Pro.otf"; sourceTree = "<group>"; };
 		DEB901D3F8FB2DAE1CCED0CC /* Pods-iNaturalistReactNative-ShareExtension.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-iNaturalistReactNative-ShareExtension.release.xcconfig"; path = "Target Support Files/Pods-iNaturalistReactNative-ShareExtension/Pods-iNaturalistReactNative-ShareExtension.release.xcconfig"; sourceTree = "<group>"; };
 		ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; };
+		EE004FD2EC174086A7AB2908 /* inaturalisticons.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = inaturalisticons.ttf; path = ../assets/fonts/inaturalisticons.ttf; sourceTree = "<group>"; };
 /* End PBXFileReference section */

 /* Begin PBXFrameworksBuildPhase section */
@@ -220,8 +220,8 @@
 				BA9D41ECEBFA4C38B74009B3 /* Whitney-Light-Pro.otf */,
 				D09FA3A0162844FF80A5EF96 /* Whitney-Medium-Pro.otf */,
 				374CB22E29943E63005885ED /* Whitney-BookItalic-Pro.otf */,
-				142B10AEC7284E94AE0D2300 /* inaturalisticons.ttf */,
-				C9904C04E3DD410FA07BB0A1 /* INatIcon.ttf */,
+				30806DE4AD83423EB6F3DCF6 /* INatIcon.ttf */,
+				EE004FD2EC174086A7AB2908 /* inaturalisticons.ttf */,
 			);
 			name = Resources;
 			sourceTree = "<group>";
@@ -349,8 +349,8 @@
 				13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
 				A252B2AEA64E47C9AC1D20E8 /* Whitney-Light-Pro.otf in Resources */,
 				BA2479FA3D7B40A7BEF7B3CD /* Whitney-Medium-Pro.otf in Resources */,
-				862E651A41DD461AAE4331B2 /* inaturalisticons.ttf in Resources */,
-				015B74B1048846199E2104BF /* INatIcon.ttf in Resources */,
+				78D1665778AF449EA28D8F35 /* INatIcon.ttf in Resources */,
+				4FB3B444D46A4115B867B9CC /* inaturalisticons.ttf in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
--- a/ios/iNaturalistReactNative/Info.plist
+++ b/ios/iNaturalistReactNative/Info.plist
@@ -49,8 +49,8 @@
 		<string>Whitney-Light-Pro.otf</string>
 		<string>Whitney-Medium-Pro.otf</string>
 		<string>Whitney-BookItalic-Pro.otf</string>
-		<string>inaturalisticons.ttf</string>
 		<string>INatIcon.ttf</string>
+		<string>inaturalisticons.ttf</string>
 	</array>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen</string>
@@ -72,15 +72,15 @@
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<false/>
 	<key>CFBundleURLTypes</key>
-    <array>
-        <dict>
-            <key>CFBundleTypeRole</key>
-            <string>Editor</string>
-            <key>CFBundleURLSchemes</key>
-            <array>
-                <string>inaturalistmobile</string>
-            </array>
-        </dict>
-    </array>
+	<array>
+		<dict>
+			<key>CFBundleTypeRole</key>
+			<string>Editor</string>
+			<key>CFBundleURLSchemes</key>
+			<array>
+				<string>inaturalistmobile</string>
+			</array>
+		</dict>
+	</array>
 </dict>
 </plist>
--- a/ios/link-assets-manifest.json
+++ b/ios/link-assets-manifest.json
@@ -3,7 +3,7 @@
  "data": [
    {
      "path": "assets/fonts/INatIcon.ttf",
-      "sha1": "2691c217d3dfbcba545ce985c306fa93f9610606"
+      "sha1": "fe95cee7255fc1323f469c2d76d483925a0b4eef"
    },
    {
      "path": "assets/fonts/Whitney-BookItalic-Pro.otf",
@@ -19,7 +19,7 @@
    },
    {
      "path": "assets/fonts/inaturalisticons.ttf",
-      "sha1": "d5a9b116c0d7857ec446f4f045fe5316196d22ec"
+      "sha1": "177ae18eacc4a277489677b4abdc441b4487df13"
    }
  ]
 }
--- a/src/components/Camera/StandardCamera.js
+++ b/src/components/Camera/StandardCamera.js
@@ -467,7 +467,7 @@ const StandardCamera = ( ): Node => {
                  testID="camera-button-label-switch-camera"
                  width="100%"
                  height="100%"
-                  whiteBackground
+                  backgroundColor={colors.white}
                />
              </Animated.View>
            )
--- a/src/components/CustomDrawerContent.js
+++ b/src/components/CustomDrawerContent.js
@@ -4,9 +4,21 @@ import {
  DrawerContentScrollView,
  DrawerItem
 } from "@react-navigation/drawer";
+import {
+  Body1,
+  INatIconButton,
+  List2,
+  UserIcon
+} from "components/SharedComponents";
+import { View } from "components/styledComponents";
 import type { Node } from "react";
 import React from "react";
-import useCurrentUser from "sharedHooks/useCurrentUser";
+import { Dimensions, Platform } from "react-native";
+import { useTheme } from "react-native-paper";
+import User from "realmModels/User";
+import { BREAKPOINTS } from "sharedHelpers/breakpoint";
+import { useCurrentUser, useTranslation } from "sharedHooks";
+import colors from "styles/tailwindColors";

 type Props = {
  state: any,
@@ -14,47 +26,189 @@ type Props = {
  descriptors: any
 }

+const { width, height } = Dimensions.get( "screen" );
+
 const CustomDrawerContent = ( { ...props }: Props ): Node => {
  // $FlowFixMe
  const { state, navigation, descriptors } = props;
  const currentUser = useCurrentUser( );
+  const theme = useTheme( );
+  const { t } = useTranslation( );
+
+  const labelStyle = {
+    fontSize: 16,
+    lineHeight: 19.2,
+    letterSpacing: 2,
+    fontFamily: `Whitney-Light${Platform.OS === "ios"
+      ? ""
+      : "-Pro"}`,
+    color: theme.colors.primary,
+    fontWeight: "700",
+    textAlign: "left",
+    textAlignVertical: "center",
+    marginLeft: -20
+  };
+
+  const drawerItemStyle = {
+    marginBottom: width <= BREAKPOINTS.lg
+      ? -15
+      : -5
+  };
+
+  const drawerItems = {
+    search: {
+      label: t( "SEARCH" ),
+      navigation: "search",
+      icon: "magnifying-glass"
+    },
+    identify: {
+      label: t( "IDENTIFY" ),
+      navigation: "Identify",
+      icon: "label",
+      loggedInOnly: true
+    },
+    projects: {
+      label: t( "PROJECTS" ),
+      navigation: "Projects",
+      icon: "briefcase"
+    },
+    help: {
+      label: t( "HELP" ),
+      navigation: "Help",
+      icon: "help"
+    },
+    blog: {
+      label: t( "BLOG" ),
+      navigation: "Blog",
+      icon: "laptop"
+    },
+    about: {
+      label: t( "ABOUT" ),
+      navigation: "about",
+      icon: "inaturalist"
+    },
+    donate: {
+      label: t( "DONATE" ),
+      navigation: "Donate",
+      icon: "heart"
+    },
+    settings: {
+      label: t( "SETTINGS" ),
+      navigation: "settings",
+      icon: "gear",
+      loggedInOnly: true
+    },
+    // the following two are only for development mode,
+    // and should not be included in future app store releases
+    network: {
+      label: t( "NETWORK" ),
+      navigation: "network",
+      icon: "help"
+    },
+    uiLibrary: {
+      label: t( "UI-LIBRARY" ),
+      navigation: "UI Library",
+      icon: "help"
+    },
+    login: {
+      label: currentUser
+        ? t( "LOG-OUT" )
+        : t( "LOG-IN" ),
+      navigation: "Login",
+      icon: "door-exit",
+      loggedInOnly: true
+    }
+  };
+
+  const renderIcon = item => {
+    let color = null;
+    let backgroundColor = null;
+
+    if ( item === "help" ) {
+      color = colors.white;
+      backgroundColor = colors.darkGray;
+    }
+    return (
+      <INatIconButton
+        icon={drawerItems[item].icon}
+        size={15}
+        color={color}
+        backgroundColor={backgroundColor}
+      />
+    );
+  };
+
+  const drawerScrollViewStyle = {
+    backgroundColor: "white",
+    borderTopRightRadius: 20,
+    borderBottomRightRadius: 20,
+    height
+  };

  return (
-    <DrawerContentScrollView state={state} navigation={navigation} descriptors={descriptors}>
-      <DrawerItem
-        label="search"
-        onPress={( ) => navigation.navigate( "search" )}
-      />
-      <DrawerItem
-        label="identify"
-        onPress={( ) => navigation.navigate( "Identify" )}
-      />
-      <DrawerItem
-        label="projects"
-        onPress={( ) => navigation.navigate( "Projects" )}
-      />
-      <DrawerItem
-        label="about"
-        onPress={( ) => navigation.navigate( "about" )}
-      />
-      <DrawerItem
-        label="settings"
-        onPress={( ) => navigation.navigate( "settings" )}
-      />
-      <DrawerItem
-        label="network/logging"
-        onPress={( ) => navigation.navigate( "network" )}
-      />
-      <DrawerItem
-        label="UI library"
-        onPress={( ) => navigation.navigate( "UI Library" )}
-      />
-      <DrawerItem
-        label={currentUser
-          ? "logout"
-          : "login"}
-        onPress={( ) => navigation.navigate( "Login" )}
-      />
+    <DrawerContentScrollView
+      state={state}
+      navigation={navigation}
+      descriptors={descriptors}
+      contentContainerStyle={drawerScrollViewStyle}
+    >
+      <View className="ml-4 mb-8 flex-row flex-nowrap">
+        {currentUser
+          ? (
+            <UserIcon
+              uri={User.uri( currentUser )}
+            />
+          )
+          : (
+            <INatIconButton
+              icon="inaturalist"
+              size={40}
+              color={colors.inatGreen}
+              onPress={( ) => navigation.navigate( "Login" )}
+            />
+          ) }
+        <View className="ml-3 justify-center">
+          <Body1
+            onPress={( ) => {
+              if ( !currentUser ) {
+                navigation.navigate( "Login" );
+              }
+            }}
+          >
+            {currentUser
+              ? User.userHandle( currentUser )
+              : t( "Log-in-to-iNaturalist" )}
+          </Body1>
+          {currentUser && (
+            <List2>
+              {t( "X-Observations", { count: currentUser.observations_count } )}
+            </List2>
+          )}
+        </View>
+      </View>
+      <View className="ml-3">
+        {Object.keys( drawerItems ).map( item => {
+          if ( drawerItems[item].loggedInOnly && !currentUser ) {
+            return null;
+          }
+          return (
+            <DrawerItem
+              key={drawerItems[item].label}
+              label={drawerItems[item].label}
+              onPress={( ) => navigation.navigate( drawerItems[item].navigation )}
+              labelStyle={labelStyle}
+              icon={( ) => renderIcon( item )}
+              // eslint-disable-next-line react-native/no-inline-styles
+              style={{
+                ...drawerItemStyle,
+                opacity: ( item === "login" )
+                  ? 0.5
+                  : 1
+              }}
+            />
+          );
+        } )}
+      </View>
    </DrawerContentScrollView>
  );
 };
--- a/src/components/SharedComponents/Buttons/INatIconButton.js
+++ b/src/components/SharedComponents/Buttons/INatIconButton.js
@@ -6,6 +6,7 @@ import type { Node } from "react";
 import React from "react";
 import { Pressable } from "react-native";
 import { useTheme } from "react-native-paper";
+import colors from "styles/tailwindColors";

 type Props = {
  accessibilityLabel?: string,
@@ -17,9 +18,9 @@ type Props = {
  style?: Object,
  testID?: string,
  width?: number,
-  // Inserts a white view under the icon so an holes in the shape show as
+  // Inserts a white or colored view under the icon so an holes in the shape show as
  // white
-  whiteBackground?: boolean
+  backgroundColor?: string
 }

 const MIN_ACCESSIBLE_DIM = 44;
@@ -37,9 +38,10 @@ const INatIconButton = ( {
  style,
  testID,
  width = 44,
-  whiteBackground
+  backgroundColor
 }: Props ): Node => {
  const theme = useTheme( );
+  const isWhite = backgroundColor === colors.white;
  // width || 0 is to placate flow. width should never be undefined because of
  // the defaultProps, but I guess flow can't figure that out.
  if ( ( width || 0 ) < MIN_ACCESSIBLE_DIM ) {
@@ -72,17 +74,25 @@ const INatIconButton = ( {
      testID={testID}
    >
      <View className="relative">
-        { whiteBackground && (
+        { backgroundColor && (
          <View
            // Position and size need to be dynamic
            // eslint-disable-next-line react-native/no-inline-styles
            style={{
              position: "absolute",
-              top: 2,
-              start: 2,
-              width: size - 2,
-              height: size - 2,
-              backgroundColor: "white",
+              top: isWhite
+                ? 2
+                : -2,
+              start: isWhite
+                ? 2
+                : -2,
+              width: isWhite
+                ? size - 2
+                : size + 4,
+              height: isWhite
+                ? size - 2
+                : size + 4,
+              backgroundColor,
              borderRadius: 9999
            }}
          />
--- a/src/components/SharedComponents/INatIcon/glyphmap.json
+++ b/src/components/SharedComponents/INatIcon/glyphmap.json
@@ -11,71 +11,77 @@
    "arrow-up": 61706,
    "binoculars": 61707,
    "book": 61708,
-    "camera": 61709,
-    "check": 61710,
-    "checkmark-circle-outline": 61711,
-    "checkmark-circle": 61712,
-    "chevron-left-circle": 61713,
-    "chevron-left": 61714,
-    "chevron-right-circle": 61715,
-    "circle-dots": 61716,
-    "clock-outline": 61717,
-    "close-bold": 61718,
-    "close": 61719,
-    "comments-outline": 61720,
-    "comments": 61721,
-    "compass-rose-outline": 61722,
-    "copyright": 61723,
-    "crop": 61724,
-    "flag": 61725,
-    "flash-off": 61726,
-    "flash-on": 61727,
-    "flip": 61728,
-    "gallery": 61729,
-    "globe-outline": 61730,
-    "grid-square": 61731,
-    "grid": 61732,
-    "hamburger-menu": 61733,
-    "help-circle-outline": 61734,
-    "help": 61735,
-    "id-agree": 61736,
-    "inaturalist": 61737,
-    "info-circle-outline": 61738,
-    "kebab-menu": 61739,
-    "label-outline": 61740,
-    "label": 61741,
-    "layers": 61742,
-    "leaf": 61743,
-    "list-square": 61744,
-    "location-crosshairs": 61745,
-    "magnifying-glass": 61746,
-    "map-marker-outline": 61747,
-    "microphone-circle": 61748,
-    "microphone": 61749,
-    "noevidence": 61750,
-    "notifications-bell": 61751,
-    "pause-circle": 61752,
-    "pencil-outline": 61753,
-    "pencil": 61754,
-    "person": 61755,
-    "photos-outline": 61756,
-    "photos": 61757,
-    "play-circle": 61758,
-    "play": 61759,
-    "plus-bold": 61760,
-    "plus": 61761,
-    "pot-outline": 61762,
-    "rotate-exclamation": 61763,
-    "rotate-right": 61764,
-    "rotate": 61765,
-    "sliders": 61766,
-    "sound-bold-outline": 61767,
-    "sound-outline": 61768,
-    "sounds": 61769,
-    "sparkly-label": 61770,
-    "star-bold-outline": 61771,
-    "star": 61772,
-    "trash-outline": 61773,
-    "trash": 61774,
-    "triangle-exclamation": 61775
+    "briefcase": 61709,
+    "camera": 61710,
+    "check": 61711,
+    "checkmark-circle-outline": 61712,
+    "checkmark-circle": 61713,
+    "chevron-left-circle": 61714,
+    "chevron-left": 61715,
+    "chevron-right-circle": 61716,
+    "circle-dots": 61717,
+    "clock-outline": 61718,
+    "close-bold": 61719,
+    "close": 61720,
+    "comments-outline": 61721,
+    "comments": 61722,
+    "compass-rose-outline": 61723,
+    "copyright": 61724,
+    "crop": 61725,
+    "door-exit": 61726,
+    "flag": 61727,
+    "flash-off": 61728,
+    "flash-on": 61729,
+    "flip": 61730,
+    "gallery": 61731,
+    "gear": 61732,
+    "globe-outline": 61733,
+    "grid-square": 61734,
+    "grid": 61735,
+    "hamburger-menu": 61736,
+    "heart": 61737,
+    "help-circle-outline": 61738,
+    "help-circle": 61739,
+    "help": 61740,
+    "id-agree": 61741,
+    "inaturalist": 61742,
+    "info-circle-outline": 61743,
+    "kebab-menu": 61744,
+    "label-outline": 61745,
+    "label": 61746,
+    "laptop": 61747,
+    "layers": 61748,
+    "leaf": 61749,
+    "list-square": 61750,
+    "location-crosshairs": 61751,
+    "magnifying-glass": 61752,
+    "map-marker-outline": 61753,
+    "microphone-circle": 61754,
+    "microphone": 61755,
+    "noevidence": 61756,
+    "notifications-bell": 61757,
+    "pause-circle": 61758,
+    "pencil-outline": 61759,
+    "pencil": 61760,
+    "person": 61761,
+    "photos-outline": 61762,
+    "photos": 61763,
+    "play-circle": 61764,
+    "play": 61765,
+    "plus-bold": 61766,
+    "plus": 61767,
+    "pot-outline": 61768,
+    "rotate-exclamation": 61769,
+    "rotate-right": 61770,
+    "rotate": 61771,
+    "sliders": 61772,
+    "sound-bold-outline": 61773,
+    "sound-outline": 61774,
+    "sounds": 61775,
+    "sparkly-label": 61776,
+    "star-bold-outline": 61777,
+    "star": 61778,
+    "trash-outline": 61779,
+    "trash": 61780,
+    "triangle-exclamation": 61781
 }
--- a/src/i18n/l10n/en.ftl
+++ b/src/i18n/l10n/en.ftl
@@ -678,6 +678,8 @@ Saved-Observation = Saved observation, in queue to upload

 Saved-Observation = Saved observation, in queue to upload

+SEARCH = SEARCH
+
 Search-for-a-location = Search for a location

 Search-for-a-project = Search for a project
@@ -1169,3 +1171,12 @@ Please-click-the-link = Please click the link in the email within 60 minutes  to
 # Title for dialog telling the user that an Internet connection is required
 Internet-Connection-Required = Internet Connection Required
 Please-try-again-when-you-are-connected-to-the-internet=Please try again when you are connected to the Internet.
+
+IDENTIFY = IDENTIFY
+PROJECTS = PROJECTS
+HELP = HELP
+BLOG = BLOG
+DONATE = DONATE
+SETTINGS = SETTINGS
+LOG-OUT = LOG OUT
+Log-in-to-iNaturalist = Log in to iNaturalist
--- a/src/i18n/l10n/en.ftl.json
+++ b/src/i18n/l10n/en.ftl.json
@@ -407,6 +407,7 @@
  "SAVE-ALL": "SAVE ALL",
  "SAVE-CHANGES": "SAVE CHANGES",
  "Saved-Observation": "Saved observation, in queue to upload",
+  "SEARCH": "SEARCH",
  "Search-for-a-location": "Search for a location",
  "Search-for-a-project": "Search for a project",
  "Search-for-a-taxon": "Search for a taxon",
@@ -802,5 +803,12 @@
    "comment": "Title for dialog telling the user that an Internet connection is required",
    "val": "Internet Connection Required"
  },
-  "Please-try-again-when-you-are-connected-to-the-internet": "Please try again when you are connected to the Internet."
+  "Please-try-again-when-you-are-connected-to-the-internet": "Please try again when you are connected to the Internet.",
+  "IDENTIFY": "IDENTIFY",
+  "HELP": "HELP",
+  "BLOG": "BLOG",
+  "DONATE": "DONATE",
+  "SETTINGS": "SETTINGS",
+  "LOG-OUT": "LOG OUT",
+  "Log-in-to-iNaturalist": "Log in to iNaturalist"
 }
--- a/src/i18n/strings.ftl
+++ b/src/i18n/strings.ftl
@@ -678,6 +678,8 @@ Saved-Observation = Saved observation, in queue to upload

 Saved-Observation = Saved observation, in queue to upload

+SEARCH = SEARCH
+
 Search-for-a-location = Search for a location

 Search-for-a-project = Search for a project
@@ -1169,3 +1171,12 @@ Please-click-the-link = Please click the link in the email within 60 minutes  to
 # Title for dialog telling the user that an Internet connection is required
 Internet-Connection-Required = Internet Connection Required
 Please-try-again-when-you-are-connected-to-the-internet=Please try again when you are connected to the Internet.
+
+IDENTIFY = IDENTIFY
+PROJECTS = PROJECTS
+HELP = HELP
+BLOG = BLOG
+DONATE = DONATE
+SETTINGS = SETTINGS
+LOG-OUT = LOG OUT
+Log-in-to-iNaturalist = Log in to iNaturalist
--- a/src/images/icons/briefcase.svg
+++ b/src/images/icons/briefcase.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0"?>
+<svg width="24" height="24" viewBox="0 0 22 18">
+  <path d="M21.5 13.5C21.7761 13.5 22 13.7239 22 14V15C22 16.6569 20.5929 18 18.8571 18H3.14286C1.4071 18 0 16.6569 0 15V14C0 13.7239 0.223858 13.5 0.5 13.5H21.5ZM14.6584 0.9938L14.6667 1.125L14.6663 2.87488C14.6662 3.15107 14.8901 3.375 15.1663 3.375H18.8571C20.5929 3.375 22 4.71815 22 6.375V10.75C22 11.0261 21.7761 11.25 21.5 11.25H13.9444C13.6683 11.25 13.4444 11.0261 13.4444 10.75V10.5C13.4444 9.67157 12.7409 9 11.873 9H10.127C9.25911 9 8.55555 9.67157 8.55555 10.5V10.75C8.55555 11.0261 8.3317 11.25 8.05555 11.25H0.500001C0.223858 11.25 0 11.0261 0 10.75V6.375C0 4.71815 1.4071 3.375 3.14286 3.375H6.83252C7.10857 3.375 7.33239 3.15128 7.33252 2.87523L7.33333 1.125C7.33333 0.548059 7.80516 0.0725605 8.41302 0.00757478L8.55555 0H13.4444C14.0712 0 14.5878 0.434295 14.6584 0.9938ZM12.833 2.18781C12.8332 1.91155 12.6093 1.6875 12.333 1.6875H9.66651C9.39043 1.6875 9.1666 1.91126 9.16651 2.18735L9.1663 2.87485C9.16621 3.15105 9.3901 3.375 9.6663 3.375H12.3326C12.6086 3.375 12.8324 3.15133 12.8326 2.87531L12.833 2.18781Z"/>
+</svg>
--- a/src/images/icons/door-exit.svg
+++ b/src/images/icons/door-exit.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0"?>
+<svg width="24" height="24" viewBox="0 0 18 20">
+  <path clip-rule="evenodd" d="M11 0H2C1.46957 0 0.960859 0.210714 0.585786 0.585786C0.210714 0.960859 0 1.46957 0 2V18C0 18.5304 0.210714 19.0391 0.585786 19.4142C0.960859 19.7893 1.46957 20 2 20H11C11.5304 20 12.0391 19.7893 12.4142 19.4142C12.7893 19.0391 13 18.5304 13 18V17C13 16.7348 12.8946 16.4804 12.7071 16.2929C12.5196 16.1054 12.2652 16 12 16C11.7348 16 11.4804 16.1054 11.2929 16.2929C11.1054 16.4804 11 16.7348 11 17V18H2V2H11V3C11 3.26522 11.1054 3.51957 11.2929 3.70711C11.4804 3.89464 11.7348 4 12 4C12.2652 4 12.5196 3.89464 12.7071 3.70711C12.8946 3.51957 13 3.26522 13 3V2C13 1.46957 12.7893 0.960859 12.4142 0.585786C12.0391 0.210714 11.5304 0 11 0ZM14.115 14.2951C13.725 14.6851 13.095 14.6851 12.705 14.2951C12.5181 14.108 12.413 13.8543 12.4128 13.5898C12.4126 13.3253 12.5173 13.0715 12.704 12.8841L14.58 11.0001H5.91C5.64478 11.0001 5.39043 10.8948 5.20289 10.7072C5.01536 10.5197 4.91 10.2653 4.91 10.0001C4.91 9.73491 5.01536 9.48056 5.20289 9.29302C5.39043 9.10548 5.64478 9.00013 5.91 9.00013H14.58L12.704 7.11613C12.5322 6.92604 12.44 6.6772 12.4465 6.42106C12.4529 6.16491 12.5576 5.92104 12.7387 5.73987C12.9199 5.55869 13.1638 5.45405 13.4199 5.44758C13.6761 5.44112 13.9249 5.53332 14.115 5.70513L17.703 9.29313C17.8905 9.48065 17.9958 9.73496 17.9958 10.0001C17.9958 10.2653 17.8905 10.5196 17.703 10.7071L14.115 14.2951Z"/>
+</svg>
--- a/src/images/icons/gear.svg
+++ b/src/images/icons/gear.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0"?>
+<svg width="24" height="24" viewBox="0 0 22 22">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M13.0003 1L13.0008 2.8648C13.0008 3.09288 13.1558 3.29041 13.3736 3.35799C13.8443 3.50404 14.2965 3.69239 14.7255 3.9186C14.9274 4.02501 15.1767 3.99486 15.3381 3.83351L16.6569 2.51472C17.0173 2.15423 17.5846 2.1265 17.9769 2.43152L18.0711 2.51472L19.4853 3.92893C19.8458 4.28941 19.8735 4.85664 19.5685 5.24893L19.4853 5.34314L18.1665 6.6619C18.0051 6.82325 17.975 7.07262 18.0814 7.27447C18.3077 7.70367 18.4961 8.15594 18.6421 8.62683C18.7097 8.8447 18.9073 8.99966 19.1354 8.99968L21 8.99989C21.5522 9.00006 22 9.44776 22 10V12C22 12.5522 21.5522 12.9999 21 13.0001L19.1354 13.0003C18.9073 13.0003 18.7097 13.1553 18.6421 13.3732C18.4961 13.8441 18.3077 14.2963 18.0814 14.7255C17.975 14.9274 18.0051 15.1767 18.1665 15.3381L19.4853 16.6569C19.8458 17.0173 19.8735 17.5846 19.5685 17.9769L19.4853 18.0711L18.0711 19.4853C17.7106 19.8458 17.1434 19.8735 16.7511 19.5685L16.6569 19.4853L15.3381 18.1665C15.1767 18.0051 14.9274 17.975 14.7255 18.0814C14.2963 18.3077 13.8441 18.4961 13.3732 18.6421C13.1553 18.7097 13.0003 18.9073 13.0003 19.1354L13.0001 21C12.9999 21.5522 12.5522 22 12 22H10C9.48716 22 9.06449 21.6142 9.00673 21.1168L9.0002 21L9.00057 19.1358C9.00061 18.9077 8.84561 18.71 8.62766 18.6424C8.15647 18.4963 7.70392 18.3078 7.27447 18.0814C7.07262 17.975 6.82325 18.0051 6.6619 18.1665L5.34314 19.4853C4.98266 19.8458 4.41543 19.8735 4.02314 19.5685L3.92893 19.4853L2.51472 18.0711C2.15423 17.7106 2.1265 17.1434 2.43152 16.7511L2.51472 16.6569L3.83351 15.3381C3.99486 15.1767 4.02501 14.9274 3.9186 14.7255C3.69233 14.2963 3.50393 13.8441 3.35787 13.3732C3.29028 13.1553 3.0927 13.0003 2.86459 13.0003L1 13.0001C0.447758 12.9999 0 12.5522 0 12V10C0 9.44776 0.447758 9.00006 1 8.99989L2.86459 8.99968C3.0927 8.99966 3.29028 8.8447 3.35787 8.62683C3.50393 8.15594 3.69233 7.70367 3.9186 7.27447C4.02501 7.07262 3.99486 6.82325 3.83351 6.6619L2.51472 5.34314C2.15423 4.98266 2.1265 4.41543 2.43152 4.02314L2.51472 3.92893L3.92893 2.51472C4.28941 2.15423 4.85664 2.1265 5.24893 2.43152L5.34314 2.51472L6.6619 3.83351C6.82325 3.99486 7.07262 4.02501 7.27447 3.9186C7.7038 3.69226 8.15621 3.50382 8.62724 3.35774C8.84516 3.29016 9.00014 3.09252 9.00013 2.86437L9.00004 1C8.99998 0.487164 9.386 0.0644759 9.88334 0.00668893L10 0H12C12.5522 0.000265457 12.9999 0.447819 13.0003 1ZM11 6.41667C8.46869 6.41667 6.41667 8.46869 6.41667 11C6.41667 13.5313 8.46869 15.5833 11 15.5833C13.5313 15.5833 15.5833 13.5313 15.5833 11C15.5833 8.46869 13.5313 6.41667 11 6.41667Z"/>
+</svg>
--- a/src/images/icons/heart.svg
+++ b/src/images/icons/heart.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0"?>
+<svg width="24" height="24" viewBox="0 0 22 22">
+  <path d="M21 7.81387C21 14.3779 11.733 19.691 11.3384 19.9105C11.2344 19.9692 11.1181 20 11 20C10.8819 20 10.7656 19.9692 10.6616 19.9105C10.267 19.691 1 14.3779 1 7.81387C1.00165 6.27247 1.58541 4.7947 2.6232 3.70476C3.66099 2.61483 5.06806 2.00174 6.53571 2C8.37946 2 9.99375 2.8327 11 4.24022C12.0063 2.8327 13.6205 2 15.4643 2C16.9319 2.00174 18.339 2.61483 19.3768 3.70476C20.4146 4.7947 20.9983 6.27247 21 7.81387Z"/>
+</svg>
--- a/src/images/icons/help-circle.svg
+++ b/src/images/icons/help-circle.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0"?>
+<svg width="24" height="24" viewBox="0 0 40 40">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M20 40C31.0457 40 40 31.0457 40 20C40 8.9543 31.0457 0 20 0C8.9543 0 0 8.9543 0 20C0 31.0457 8.9543 40 20 40ZM22.748 30.317C22.748 28.8353 21.5847 27.6342 20.1496 27.6342C18.7145 27.6342 17.5512 28.8353 17.5512 30.317C17.5512 31.7988 18.7145 33 20.1496 33C21.5847 33 22.748 31.7988 22.748 30.317ZM20.6658 8.09552C12.5306 7.06006 10.8539 14.7443 12.6548 16.5972C13.1073 17.0628 13.8546 17.7841 15.328 17.4722C15.9329 17.3442 16.1287 16.6108 15.9555 16.0173C15.3842 14.0592 15.9336 11.1124 20.3553 11.42C23.1108 11.6116 23.6699 13.8773 23.1498 15.6163C22.6454 17.3023 21.133 18.6085 19.7792 19.7777C19.6164 19.9183 19.4558 20.057 19.2996 20.1941C17.9476 21.3806 17.4641 23.2054 17.9333 24.9899C18.1622 25.8603 19.8728 26.0484 21.39 25.4821C21.8186 25.3221 21.9909 24.8457 21.9511 24.39C21.8402 23.118 22.4732 22.3455 23.1928 21.572L23.4802 21.2652C23.6247 21.1105 23.7692 20.9533 23.9086 20.7896C24.0296 20.6474 24.1538 20.504 24.2795 20.3587C25.5573 18.8826 26.9974 17.219 27 14.7443C27.0027 12.2437 25.552 8.71745 20.6658 8.09552Z"/>
+</svg>
--- a/src/images/icons/laptop.svg
+++ b/src/images/icons/laptop.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0"?>
+<svg width="24" height="24" viewBox="0 0 22 18">
+  <path d="M2 0C0.89543 0 0 0.895431 0 2V16C0 17.1046 0.895431 18 2 18H20C21.1046 18 22 17.1046 22 16V2C22 0.89543 21.1046 0 20 0H2ZM19.3333 14.5C19.3333 14.7761 19.1095 15 18.8333 15H3.16667C2.89052 15 2.66667 14.7761 2.66667 14.5C2.66667 14.2239 2.89052 14 3.16667 14H18.8333C19.1095 14 19.3333 14.2239 19.3333 14.5ZM19.3333 12.5C19.3333 12.7761 19.1095 13 18.8333 13H3.16667C2.89052 13 2.66667 12.7761 2.66667 12.5C2.66667 12.2239 2.89052 12 3.16667 12H18.8333C19.1095 12 19.3333 12.2239 19.3333 12.5ZM19.3333 7C19.3333 8.10457 18.4379 9 17.3333 9H4.66667C3.5621 9 2.66667 8.10457 2.66667 7V5C2.66667 3.89543 3.5621 3 4.66667 3H17.3333C18.4379 3 19.3333 3.89543 19.3333 5V7Z"/>
+</svg>
--- a/src/navigation/BottomTabNavigator/index.js
+++ b/src/navigation/BottomTabNavigator/index.js
@@ -367,6 +367,19 @@ const BottomTabs = ( ) => {
        <Tab.Screen name="ForgotPassword" component={ForgotPassword} options={hideHeader} />
        <Tab.Screen name="LicensePhotos" component={LicensePhotos} options={hideHeader} />
        <Tab.Screen name="SignUpConfirmation" component={SignUpConfirmation} options={hideHeader} />
+
+        <Tab.Screen
+          name="Help"
+          component={PlaceholderComponent}
+        />
+        <Tab.Screen
+          name="Blog"
+          component={PlaceholderComponent}
+        />
+        <Tab.Screen
+          name="Donate"
+          component={PlaceholderComponent}
+        />
      </Tab.Navigator>
    </Mortal>
  );
--- a/src/navigation/rootDrawerNavigation.js
+++ b/src/navigation/rootDrawerNavigation.js
@@ -12,7 +12,11 @@ import BottomTabNavigator from "./BottomTabNavigator";
 const drawerOptions = {
  ...showHeader,
  // this removes the default hamburger menu from header
-  headerLeft: ( ) => <View />
+  headerLeft: ( ) => <View />,
+  drawerType: "front",
+  drawerStyle: {
+    backgroundColor: "transparent"
+  }
 };

 const Drawer = createDrawerNavigator( );
--- a/tests/unit/components/SharedComponents/ActivityCount/snapshots/ActivityCount.test.js.snap
+++ b/tests/unit/components/SharedComponents/ActivityCount/snapshots/ActivityCount.test.js.snap
@@ -36,7 +36,7 @@ exports[`ActivityCount renders reliably 1`] = `
      ]
    }
  >
-    
+    
  </Text>
  <Text
    style={
--- a/tests/unit/components/SharedComponents/ActivityCount/snapshots/CommentsCount.test.js.snap
+++ b/tests/unit/components/SharedComponents/ActivityCount/snapshots/CommentsCount.test.js.snap
@@ -1,75 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`CommentsCount renders default reliably 1`] = `
-<View
-  accessibilityLabel="1 comment"
-  accessible={true}
-  style={
-    [
-      [
-        {
-          "flexDirection": "row",
-        },
-        {
-          "alignItems": "center",
-        },
-      ],
-    ]
-  }
->
-  <Text
-    allowFontScaling={false}
-    selectable={false}
-    style={
-      [
-        {
-          "color": "rgba(103, 80, 164, 1)",
-          "fontSize": 14,
-        },
-        undefined,
-        {
-          "fontFamily": "INatIcon",
-          "fontStyle": "normal",
-          "fontWeight": "normal",
-        },
-        {},
-      ]
-    }
-  >
-    
-  </Text>
-  <Text
-    style={
-      [
-        {
-          "fontFamily": "Whitney-Light",
-        },
-        [
-          {
-            "fontSize": 14,
-            "lineHeight": 18,
-          },
-          {
-            "fontWeight": "400",
-          },
-          {
-            "color": "#454545",
-          },
-          [
-            {
-              "marginLeft": 6,
-            },
-          ],
-        ],
-      ]
-    }
-  >
-    1
-  </Text>
-</View>
-`;
-
-exports[`CommentsCount renders filled reliably 1`] = `
 <View
  accessibilityLabel="1 comment"
  accessible={true}
@@ -138,6 +69,75 @@ exports[`CommentsCount renders filled reliably 1`] = `
 </View>
 `;

+exports[`CommentsCount renders filled reliably 1`] = `
+<View
+  accessibilityLabel="1 comment"
+  accessible={true}
+  style={
+    [
+      [
+        {
+          "flexDirection": "row",
+        },
+        {
+          "alignItems": "center",
+        },
+      ],
+    ]
+  }
+>
+  <Text
+    allowFontScaling={false}
+    selectable={false}
+    style={
+      [
+        {
+          "color": "rgba(103, 80, 164, 1)",
+          "fontSize": 14,
+        },
+        undefined,
+        {
+          "fontFamily": "INatIcon",
+          "fontStyle": "normal",
+          "fontWeight": "normal",
+        },
+        {},
+      ]
+    }
+  >
+    
+  </Text>
+  <Text
+    style={
+      [
+        {
+          "fontFamily": "Whitney-Light",
+        },
+        [
+          {
+            "fontSize": 14,
+            "lineHeight": 18,
+          },
+          {
+            "fontWeight": "400",
+          },
+          {
+            "color": "#454545",
+          },
+          [
+            {
+              "marginLeft": 6,
+            },
+          ],
+        ],
+      ]
+    }
+  >
+    1
+  </Text>
+</View>
+`;
+
 exports[`CommentsCount renders white reliably 1`] = `
 <View
  accessibilityLabel="1 comment"
@@ -174,7 +174,7 @@ exports[`CommentsCount renders white reliably 1`] = `
      ]
    }
  >
-    
+    
  </Text>
  <Text
    style={
--- a/tests/unit/components/SharedComponents/ActivityCount/snapshots/IdentificationsCount.test.js.snap
+++ b/tests/unit/components/SharedComponents/ActivityCount/snapshots/IdentificationsCount.test.js.snap
@@ -36,7 +36,7 @@ exports[`IdentificationsCount renders default reliably 1`] = `
      ]
    }
  >
-    
+    
  </Text>
  <Text
    style={
@@ -105,7 +105,7 @@ exports[`IdentificationsCount renders filled reliably 1`] = `
      ]
    }
  >
-    
+    
  </Text>
  <Text
    style={
@@ -174,7 +174,7 @@ exports[`IdentificationsCount renders white reliably 1`] = `
      ]
    }
  >
-    
+    
  </Text>
  <Text
    style={
--- a/tests/unit/components/SharedComponents/Buttons/snapshots/INatIconButton.test.js.snap
+++ b/tests/unit/components/SharedComponents/Buttons/snapshots/INatIconButton.test.js.snap
@@ -75,7 +75,7 @@ exports[`INatIconButton renders correctly 1`] = `
        ]
      }
    >
-      
+      
    </Text>
  </View>
 </View>
--- a/tests/unit/components/SharedComponents/InlineUser/snapshots/InlineUser.test.js.snap
+++ b/tests/unit/components/SharedComponents/InlineUser/snapshots/InlineUser.test.js.snap
@@ -174,7 +174,7 @@ exports[`InlineUser when offline renders reliably 1`] = `
      }
      testID="InlineUser.NoInternetPicture"
    >
-      
+      
    </Text>
  </View>
  <Text
@@ -285,7 +285,7 @@ exports[`InlineUser when user has no icon set renders reliably 1`] = `
      }
      testID="InlineUser.FallbackPicture"
    >
-      
+      
    </Text>
  </View>
  <Text
--- a/tests/unit/components/SharedComponents/UploadStatus/snapshots/UploadStatus.test.js.snap
+++ b/tests/unit/components/SharedComponents/UploadStatus/snapshots/UploadStatus.test.js.snap
@@ -167,7 +167,7 @@ exports[`UploadStatus displays progress bar when progress is less than 5% correc
        ]
      }
    >
-      
+      
    </Text>
  </View>
 </View>
--- a/tests/unit/components/snapshots/INatIcon.test.js.snap
+++ b/tests/unit/components/snapshots/INatIcon.test.js.snap
@@ -20,6 +20,6 @@ exports[`INatIcon renders correctly 1`] = `
    ]
  }
 >
-  
+  
 </Text>
 `;