import React, { useState } from 'react';
import { View, Text, Button, LayoutAnimation, UIManager, Platform } from 'react-native';

// Enable LayoutAnimation on Android
if (Platform.OS === 'android') {
  UIManager.setLayoutAnimationEnabledExperimental(true);
}

const App = () => {
  const [showHeaderFooter, setShowHeaderFooter] = useState(true);

  const toggleHeaderFooter = () => {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
    setShowHeaderFooter(!showHeaderFooter);
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      {showHeaderFooter && <Header />}
      <Center />
      {showHeaderFooter && <Footer />}
      <Button title="Toggle Header/Footer" onPress={toggleHeaderFooter} />
    </View>
  );
};

const Header = () => (
  <View style={{ backgroundColor: 'lightblue', padding: 20 }}>
    <Text>This is the header</Text>
  </View>
);

const Center = () => (
  <View style={{ backgroundColor: 'lightgreen', padding: 20 }}>
    <Text>This is the center content</Text>
  </View>
);

const Footer = () => (
  <View style={{ backgroundColor: 'lightcoral', padding: 20 }}>
    <Text>This is the footer</Text>
  </View>
);

export default App;

In the above code i’m trying to hide header and footer with some animation (using layout animation).

But in android the the middle view is also getting removed on clicking the button. Also, on multiple clicks all the views are getting removed.
I have already added setLayoutAnimationEnabledExperimental.

Works fine on IOS for some reason.

Expo link: https://snack.expo.dev/@mmt10470/layout-animation