[Bug]: Strange disappearance animation when changing content of dynamic bottom sheet

[yolpsoftware]

Version

v5

Reanimated Version

v3

Gesture Handler Version

v2

Platforms

iOS

What happened?

There is a strange case of the bottom-sheet suddenly animating back to the bottom without any explicit trigger for it.

As you can see, the bottom sheet animates to the bottom, just because the size of the contents have changed (sometimes the top border keeps where it is, but the bottom border is animated to the top until the bottom sheet is no longer visible).

What triggers this behavior seems to be the following combination:

• enableDynamicSizing={true}
• a positive marginTop on the BottomSheetView
• a change in the contents of the bottom sheet

Note: the provided Snack does not run for some reason that I don't understand but have already reported. Just paste the whole App.tsx into a local project and run it from there.

Note that the problem disappears if you remove the marginTop on line 25.

Reproduction steps

• Take the code from the reproduction example here: https://snack.expo.dev/@yolpsoftware/reproduction-for-strange-bottom-sheet-disappearance-animation
• If you cannot run the Snack, paste the code (just one file, App.tsx) into a local project and run it from there

Reproduction sample

https://snack.expo.dev/@yolpsoftware/reproduction-for-strange-bottom-sheet-disappearance-animation

Relevant log output

[gorhom]

Hi @yolpsoftware , i have updated your provided sample and it worked as expected.

tl;dr: i converted provided styles into immutable objects , which stabilise the rendering

import {
  BottomSheetModal,
  BottomSheetModalProvider,
  BottomSheetView,
  TouchableOpacity,
} from '@gorhom/bottom-sheet';
import React, { useEffect, useRef, useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';

const App = () => {
  const modalRef = useRef<BottomSheetModal>(null);
  useEffect(() => {
    setTimeout(() => {
      modalRef.current?.present();
    }, 100);
  }, []);

  const [isExpanded, setExpanded] = useState(false);

  return (
    <GestureHandlerRootView>
      <BottomSheetModalProvider>
        <View style={{ flex: 1, backgroundColor: '#EEEEEE' }}></View>
        <BottomSheetModal
          ref={modalRef}
          handleStyle={styles.handle}
          handleIndicatorStyle={styles.indicator}
          enableDynamicSizing={true}
        >
          <BottomSheetView style={styles.container}>
            {/* !!! if you set this margin to 0, the problem disappears */}
            <View style={{ width: 280, height: 500, paddingTop: 20 }}>
              {!isExpanded && (
                <TouchableOpacity onPress={() => setExpanded(true)}>
                  <Text>Click Me</Text>
                </TouchableOpacity>
              )}
              {isExpanded && (
                <View
                  style={{
                    marginTop: -10,
                    marginBottom: 4,
                    flexDirection: 'row',
                    backgroundColor: 'yellow',
                  }}
                >
                  <View style={{ flex: 1 }}>
                    <Text>dynamic content</Text>
                  </View>
                </View>
              )}
            </View>
          </BottomSheetView>
        </BottomSheetModal>
      </BottomSheetModalProvider>
    </GestureHandlerRootView>
  );
};

const styles = StyleSheet.create({
  handle: { marginBottom: -24 },
  indicator: { backgroundColor: 'red' },
  container: {
    marginTop: 24,
  },
});

export default App;

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[yolpsoftware]

@gorhom thank you, that makes sense. Would you agree that it might be a good idea to warn the user about non-immutable styles? The resulting bugs are very spurious, and we lost quite a lot of time tracking it down, i.e. isolating this bug.

[joacub]

this fix all issues with dinamic sizes

 // calculate a new snap point based on content height.
    const dynamicSnapPoint =
      containerHeight.value -
      Math.min(
        contentHeight.value + handleHeight.value + footerHeight.value  --------> + 1,
        maxDynamicContentSize !== undefined
          ? maxDynamicContentSize
          : containerHeight.value
      );