Footer being remounted when the tree changes

[julian-gargicevich]

Before submitting a new issue

• I tested using the latest version of the library, as the bug might be already fixed.
• I tested using a supported version of react native.
• I checked for possible duplicate issues, with possible answers.

Bug summary

When having a Footer with conditional components, the whole Footer gets remounted with the slide from bottom animation.

Example:

import { useState } from "react";
import { View, Button, Text } from "react-native";
import CustomSheet from "components/CustomSheet"; // or your bottom sheet component

const ConditionalFooter = ({ showBar }: { showBar: boolean }) => (
  <View style={{ backgroundColor: "#fff", padding: 16 }}>
    <Text>Footer always here</Text>
    {showBar && (
      <View style={{ backgroundColor: "#eee", padding: 8, marginTop: 8 }}>
        <Text>Conditional Bar</Text>
      </View>
    )}
  </View>
);

export default function TestFooterRemountBug() {
  const [showBar, setShowBar] = useState(false);
  const sheet = useRef<TrueSheet>(null);

  // Present the sheet ✅
  const present = async () => {
    await sheet.current?.present()
    console.log('horray! sheet has been presented 💩')
  }

  useEffect(() => {
     present();
  },[]);

  return (
    <>
      <Button title="Toggle Bar" onPress={() => setShowBar((v) => !v)} />
      <CustomSheet
        ref={sheet}
        onClose={() => setOpen(false)}
        Footer={<ConditionalFooter showBar={showBar} />}
      >
        <View style={{ height: 200, justifyContent: "center", alignItems: "center" }}>
          <Text>Sheet Content</Text>
        </View>
      </CustomSheet>
    </>
  );
}

Library version

2.0.5

Environment info

0.77

Steps to reproduce

1. …
2. …

Reproducible example repository

example provided