fixed taxon attribute layout issue (in one node record edit mode)

src/screens/RecordEditor/NodeComponentSwitch/nodeTypes/NodeTaxonComponent/NodeTaxonAutocomplete.js

@@ -1,10 +1,11 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useMemo } from "react";
 import PropTypes from "prop-types";
 
 import { NodeDefs } from "@openforis/arena-core";
 
 import { SelectableListWithFilter } from "components";
 import { Taxa } from "model";
+
 import { useTaxaFiltered } from "./useTaxaFiltered";
 
 const alwaysIncludeVernacularNames = false;
@@ -135,9 +136,14 @@ export const NodeTaxonAutocomplete = (props) => {
     [updateNodeValue]
   );
 
+  const filterItemsCallback = useMemo(
+    () => filterItems({ nodeDef, unlistedTaxon, unknownTaxon }),
+    [nodeDef, unknownTaxon, unlistedTaxon]
+  );
+
   return (
     <SelectableListWithFilter
-      filterItems={filterItems({ nodeDef, unlistedTaxon, unknownTaxon })}
+      filterItems={filterItemsCallback}
       itemKeyExtractor={itemKeyExtractor}
       itemLabelExtractor={itemLabelExtractor({ nodeDef })}
       itemDescriptionExtractor={itemDescriptionExtractor}

src/screens/RecordEditor/NodeComponentSwitch/nodeTypes/NodeTaxonComponent/NodeTaxonComponent.js

@@ -1,10 +1,9 @@
-import { useMemo, useState } from "react";
+import { useState } from "react";
 import PropTypes from "prop-types";
 
 import { NodeDefs } from "@openforis/arena-core";
 
 import { Button, CloseIconButton, HView, Text, VView, View } from "components";
-import { useEffectiveTheme } from "hooks";
 import { RecordEditViewMode } from "model";
 import { SurveyOptionsSelectors } from "state";
 
@@ -13,7 +12,7 @@ import { NodeTaxonEditDialog } from "./NodeTaxonEditDialog";
 import { NodeTaxonAutocomplete } from "./NodeTaxonAutocomplete";
 import { TaxonValuePreview } from "../../../NodeValuePreview/TaxonValuePreview";
 import { useTaxonByNodeValue } from "../../../NodeValuePreview/useTaxonByNodeValue";
-
+import { useDynamicStyles } from "./useDynamicStyles";
 import styles from "./styles";
 
 export const NodeTaxonComponent = (props) => {
@@ -24,7 +23,6 @@ export const NodeTaxonComponent = (props) => {
       `rendering NodeTaxonComponent for ${NodeDefs.getName(nodeDef)}`
     );
   }
-  const theme = useEffectiveTheme();
   const viewMode = SurveyOptionsSelectors.useRecordEditViewMode();
 
   const [editDialogOpen, setEditDialogOpen] = useState(false);
@@ -38,18 +36,12 @@ export const NodeTaxonComponent = (props) => {
 
   const selectedTaxon = useTaxonByNodeValue({ value });
   const selectedTaxonVernacularName = selectedTaxon?.vernacularName;
-
-  const selectedTaxonContainerStyle = useMemo(
-    () => [
-      styles.selectedTaxonContainer,
-      { borderColor: theme.colors.onSurfaceVariant },
-      { height: selectedTaxonVernacularName ? 70 : 40 },
-    ],
-    [selectedTaxonVernacularName, theme.colors.onSurfaceVariant]
-  );
+  const { containerStyle, selectedTaxonContainerStyle } = useDynamicStyles({
+    selectedTaxonVernacularName,
+  });
 
   return (
-    <VView style={styles.container}>
+    <VView style={containerStyle}>
       <View style={styles.selectedTaxonWrapper}>
         {selectedTaxon ? (
           <HView style={selectedTaxonContainerStyle}>

src/screens/RecordEditor/NodeComponentSwitch/nodeTypes/NodeTaxonComponent/styles.js

@@ -2,6 +2,7 @@ import { StyleSheet } from "react-native";
 
 export default StyleSheet.create({
   container: { gap: 10 },
+  containerOneNode: { flex: 1 },
   searchButton: {
     alignSelf: "center",
   },

src/screens/RecordEditor/NodeComponentSwitch/nodeTypes/NodeTaxonComponent/useDynamicStyles.js

@@ -0,0 +1,25 @@
+import { useMemo } from "react";
+
+import { useEffectiveTheme } from "hooks";
+import { RecordEditViewMode } from "model";
+import { SurveyOptionsSelectors } from "state";
+
+import defaultStyles from "./styles";
+
+export const useDynamicStyles = ({ selectedTaxonVernacularName }) => {
+  const theme = useEffectiveTheme();
+  const viewMode = SurveyOptionsSelectors.useRecordEditViewMode();
+
+  return useMemo(() => {
+    const selectedTaxonContainerStyle = [
+      defaultStyles.selectedTaxonContainer,
+      { borderColor: theme.colors.onSurfaceVariant },
+      { height: selectedTaxonVernacularName ? 70 : 40 },
+    ];
+    const containerStyle = [defaultStyles.container];
+    if (viewMode === RecordEditViewMode.oneNode) {
+      containerStyle.push(defaultStyles.containerOneNode);
+    }
+    return { containerStyle, selectedTaxonContainerStyle };
+  }, [selectedTaxonVernacularName, theme.colors.onSurfaceVariant, viewMode]);
+};