fix: backdrop -> check if mounted before setting state

[christophby]

closes #1376 (has already been closed, although it hasn't been fixed yet )

Motivation

When using the backdrop component you could get a "Warning: Can't perform a React state update on an unmounted component [...] in BottomSheetBackdrop" error.

This PR adds a check if the component is mounted before setting the local state to fix that issue.

[gorhom]

i tried to repo the issue but i couldn't, do you have a repo example ?

[christophby]

@gorhom I don't have a repo example but I just used this component:

BottomSheet.tsx component

import {
  BottomSheetBackdrop,
  BottomSheetBackdropProps,
  BottomSheetModal,
  BottomSheetScrollView,
} from '@gorhom/bottom-sheet';
import React, {useCallback, useRef} from 'react';
import {Button, Text, View} from 'react-native';

interface Props {}

export const BottomSheet = ({}: Props) => {
  const bottomSheetModalRef = useRef<BottomSheetModal>(null);

  const backdropComponent = useCallback(
    (props: BottomSheetBackdropProps) => (
      <BottomSheetBackdrop
        {...props}
        appearsOnIndex={0}
        disappearsOnIndex={-1}
      />
    ),
    [],
  );

  return (
    <View>
      <Button
        title="Open Bottom Sheet"
        onPress={() => {
          bottomSheetModalRef.current?.present();
        }}
      />

      <BottomSheetModal
        ref={bottomSheetModalRef}
        snapPoints={['25%']}
        backdropComponent={backdropComponent}>
        <BottomSheetScrollView>
          <>
            <Text>1 Lorem Ipsum</Text>
            <Text>2 Lorem Ipsum</Text>
          </>
        </BottomSheetScrollView>
      </BottomSheetModal>
    </View>
  );
};

I'm using

"@gorhom/bottom-sheet": "^4.5.1",
"react-native": "0.68.2",
"react-native-gesture-handler": "^2.14.0",
"react-native-reanimated": "^2.8.0",

bottom-sheet-unmount-update.mov

[gorhom]

could you move this hook to the region at the end effects

[gorhom]

looks good, i just left a code styling comment, once it is addressed im going to merge this PR into v4 & v5

[christophby]

Thank you for merging