From 394edbf71a7a83d9d01cca6d8f92aa021e45a57d Mon Sep 17 00:00:00 2001
From: Sam Holmes <sam@edge.app>
Date: Tue, 28 May 2024 15:26:14 -0700
Subject: [PATCH] Add back missing key prop for SceneWrapperFooter to fix
 rendering

A change to fix a react warning (yellow box) removed the `key` prop
from SceneFooterWrapper which is required in order for the `onLayout`
handler to be invoked when transitioning between scenes causing a new
SceneFooterWrapper instance to be created in the `MenuTabs` component.
Without a key, the instance is considered a "re-render" of the same
React node and this will potentially omit a layout event from emitting
if the React node is the same layout dimensions. In order to force
React to treat these instances as indeed separate we leverage the `key`
prop. Luckily, it's only necessary to define a key at the top-most
component from `renderFooter`, so we don't need to use the `key` prop
within `SceneFooterWrapper`, so this is the correct way to resolve the
react warning.
---
 src/components/scenes/WalletListScene.tsx    | 2 +-
 src/components/themed/SceneFooterWrapper.tsx | 9 +++++----
 src/components/themed/SearchFooter.tsx       | 2 +-
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/scenes/WalletListScene.tsx b/src/components/scenes/WalletListScene.tsx
index 6e3ce1fb675..d10e49d29f3 100644
--- a/src/components/scenes/WalletListScene.tsx
+++ b/src/components/scenes/WalletListScene.tsx
@@ -97,7 +97,7 @@ export function WalletListScene(props: Props) {
     sceneWrapperInfo => {
       const key = 'WalletListScene-SearchFooter'
       return sorting ? (
-        <SceneFooterWrapper sceneFooterKey={key} noBackgroundBlur sceneWrapperInfo={sceneWrapperInfo} onLayoutHeight={handleFooterLayoutHeight}>
+        <SceneFooterWrapper key={key} noBackgroundBlur sceneWrapperInfo={sceneWrapperInfo} onLayoutHeight={handleFooterLayoutHeight}>
           <View style={styles.sortFooterContainer}>
             <ButtonUi4 key="doneButton" mini type="primary" label={lstrings.string_done_cap} onPress={handlePressDone} />
           </View>
diff --git a/src/components/themed/SceneFooterWrapper.tsx b/src/components/themed/SceneFooterWrapper.tsx
index 412d9304910..e955b1ffd8d 100644
--- a/src/components/themed/SceneFooterWrapper.tsx
+++ b/src/components/themed/SceneFooterWrapper.tsx
@@ -9,8 +9,10 @@ import { styled } from '../hoc/styled'
 import { BlurBackground } from '../ui4/BlurBackground'
 
 export interface SceneFooterProps {
-  // This component requires a key for the onLayoutHeight prop
-  sceneFooterKey: string
+  // This component requires a key prop so that way the onLayoutHeight prop
+  // will work correctly.
+  // eslint-disable-next-line react/no-unused-prop-types
+  key: string
 
   children: React.ReactNode
   sceneWrapperInfo?: SceneWrapperInfo
@@ -22,7 +24,7 @@ export interface SceneFooterProps {
 }
 
 export const SceneFooterWrapper = (props: SceneFooterProps) => {
-  const { sceneFooterKey: key, children, noBackgroundBlur = false, sceneWrapperInfo, onLayoutHeight } = props
+  const { children, noBackgroundBlur = false, sceneWrapperInfo, onLayoutHeight } = props
   const { hasTabs = true, isKeyboardOpen = false } = sceneWrapperInfo ?? {}
   const footerOpenRatio = useSceneFooterState(state => state.footerOpenRatio)
 
@@ -52,7 +54,6 @@ export const SceneFooterWrapper = (props: SceneFooterProps) => {
 
   return (
     <ContainerAnimatedView
-      key={`${key}-ContainerAnimatedView`}
       containerHeight={layout?.height}
       footerOpenRatio={footerOpenRatio}
       isKeyboardOpen={isKeyboardOpen}
diff --git a/src/components/themed/SearchFooter.tsx b/src/components/themed/SearchFooter.tsx
index fc7e0b6fcd3..f5ab8eae64c 100644
--- a/src/components/themed/SearchFooter.tsx
+++ b/src/components/themed/SearchFooter.tsx
@@ -96,7 +96,7 @@ export const SearchFooter = (props: SearchFooterProps) => {
 
   return (
     <SceneFooterWrapper
-      sceneFooterKey={`${name}-SceneFooterWrapper`}
+      key={`${name}-SceneFooterWrapper`}
       noBackgroundBlur={noBackground}
       sceneWrapperInfo={sceneWrapperInfo}
       onLayoutHeight={handleFooterLayoutHeight}