Restyle unknown text; closes #881

src/components/ObsDetails/Header.js

@@ -1,10 +1,11 @@
 // @flow
 import { useNavigation } from "@react-navigation/native";
 import {
+  Body1,
   DateDisplay, DisplayTaxon, InlineUser, ObservationLocation
 } from "components/SharedComponents";
 import ObsStatus from "components/SharedComponents/ObservationsFlashList/ObsStatus";
-import { Text, View } from "components/styledComponents";
+import { View } from "components/styledComponents";
 import type { Node } from "react";
 import React from "react";
 import {
@@ -33,7 +34,11 @@ const Header = ( {
 
   const showTaxon = () => {
     if ( !taxon ) {
-      return <Text>{t( "Unknown-organism" )}</Text>;
+      return (
+        <View className="justify-center ml-1">
+          <Body1>{t( "Unknown" )}</Body1>
+        </View>
+      );
     }
     return (
       <DisplayTaxon

tests/unit/components/ObsDetails/Header.test.js

@@ -0,0 +1,46 @@
+import { faker } from "@faker-js/faker";
+import { screen } from "@testing-library/react-native";
+import Header from "components/ObsDetails/Header";
+import initI18next from "i18n/initI18next";
+import React from "react";
+
+import factory from "../../../factory";
+import { renderComponent } from "../../../helpers/render";
+
+const mockTaxon = factory( "RemoteTaxon", {
+  name: faker.name.firstName( ),
+  rank: "genus",
+  preferred_common_name: faker.name.fullName( )
+} );
+
+describe( "Header", () => {
+  beforeAll( async ( ) => {
+    await initI18next( );
+  } );
+
+  it( "displays unknown text if no taxon", async ( ) => {
+    renderComponent(
+      <Header
+        observation={{
+          taxon: null
+        }}
+      />
+    );
+
+    const unknownText = screen.getByText( /Unknown/ );
+    expect( unknownText ).toBeVisible( );
+  } );
+
+  it( "displays taxon", async ( ) => {
+    renderComponent(
+      <Header
+        observation={{
+          taxon: mockTaxon
+        }}
+      />
+    );
+
+    const taxonName = screen.getByText( mockTaxon.name );
+    expect( taxonName ).toBeVisible( );
+  } );
+} );