[v4] BottomSheetModal Hides after parent state changed inside modal

Bug

When changing screen state inside “BottomSheetModal” where i pass “React.Dispatch” prop will hide bottom sheet modal content, until i click somewhere then it will show again

this happends only on Expo 44, Expo 43 works perfect

PS unable to make stack cuz Expo 44 is not yet in Stack …

Environment info

Library	Version
@gorhom/bottom-sheet	^4.1.5
react-native	0.64.3
react-native-reanimated	~2.3.1
react-native-gesture-handler	~2.1.0
expo	~44.0.0

Video

https://user-images.githubusercontent.com/53254371/148389011-98127d2b-c056-4da1-b556-283ccf7eee1f.mp4

Steps To Reproduce

1. Change parent state from modal

Describe what you expected to happen:

1. when i change parent / state outside of modal modal should not hidde

Reproducible sample code

Parent ( drawer screen )

const [filter, setFilter] = React.useState({
        dlc: {
            2: true,
            3: true,
            4: false,
            5: true,
            6: true,
        }
    });
const [showFilter, setShowFilter] = React.useState<boolean>(false);

return <BottomSheetModalWrap filter={filter} setFilter={setFilter} visible={showFilter} setVisible={setShowFilter} />

BottomSheetWrap component

interface bottomSheetModalWrapProps {
    visible: boolean
    setVisible: React.Dispatch<boolean>
    filter: any // yup any for example ...
    setFilter: Dispatch<any> // yup any for example ...
}
const BottomSheetModalWrap: React.FC<BottomSheetModalWrapProps> = (props) => {

    const bottomSheetModalRef = useRef<BottomSheetModal>(null);
    
    React.useEffect(() => {

        if (props.visible) {
            bottomSheetModalRef.current?.present();
        } else {
            bottomSheetModalRef.current?.dismiss();
        }

    }, [props.visible]);

    function setNewSwitchValue(dlc: number, switchValue: boolean) {
        let newFilter = JSON.parse(JSON.stringify(props.filter));
        newFilter.dlc[dlc] = switchValue;
        props.setFilter(newFilter);
    }
    
    return (
        <BottomSheetModal
            ref={bottomSheetModalRef}
            snapPoints={['75%']}
            backdropComponent={props => (
                <BottomSheetBackdrop
                    {...props}
                    disappearsOnIndex={-1}
                    appearsOnIndex={0}
                />
            )}
            onDismiss={() => props.setVisible(false)}
        >
            <View>
                <View style={{flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between'}}>
                    <Text>A Realm Reborn</Text>
                    <Switch
                        ios_backgroundColor="#3e3e3e"
                        value={props.filter.dlc[2]}
                        onValueChange={(switchValue) => setNewSwitchValue(2, switchValue)}
                    />
                </View>
            </View>
        </BottomSheetModal>
    )
}

[hirbod]

At all. It is finally fixed. You need to upgrade react-native-reanimated to v2.5.0.

[masiamj]

@hirbod Thanks for all your work and diligence staying up on this issue. I also saw your involvement in the root cause bug in react-native-reanimated. Do you have thoughts on when the root cause fix will be merged?

Thanks all for your work here 👍