Listening to parent state changes in modal

[mr-moto]

Bug

May be a feature request.

Similar but slightly different to #71
Currently using react native firebase realtime listener for database changes. The parent gets the data and passes it on to the modal which displays more information. The problem is that the data passed to the modal doesn't update with new data.
Id like to avoid dismissing the modal then making is appear again to show the updated state. Am I missing something or is there a workaround for something like this?

Works fine when using <BottomSheet/> and not a modal

Thanks!

Environment info

Library	Version
@gorhom/bottom-sheet	1.4.1
react-native	0.63.3
react-native-reanimated	1.13.2
react-native-gesture-handler	1.9.0

Steps To Reproduce

1. simulate a listener changing state ( see sample code )

Describe what you expected to happen:

1. updated state to be displayed in the modal

Reproducible sample code

// OverlayExample.tsx
import React, { useCallback, useState, useEffect } from 'react';
import { View, StyleSheet, Alert, Text } from 'react-native';
import { useBottomSheetModal, BottomSheetOverlay } from '@gorhom/bottom-sheet';
import Button from '../../components/button';
import ContactListContainer from '../../components/contactListContainer';
import withModalProvider from '../withModalProvider';

const OverlayExample = () => {
  //ADDED
  const [state, setState] = useState('unchanged');
  const { present } = useBottomSheetModal();

  //ADDED
  useEffect(() => {
    // simulate RN Firebase firestore realtime listener
    setTimeout(() => {
      setState('changed');
    }, 5000);
  }, []);

  // callbacks
  const handleChange = useCallback((index: number) => {
    if (index === 0) {
      Alert.alert('Modal Been Dismissed');
    }
  }, []);
  const handlePresentPress = useCallback(() => {
    present(
      <ContactListContainer
        title="Modal FlatList"
        type="FlatList"
        state={state} //ADDED - display the state in this component
      />,
      {
        snapPoints: [300, '50%'],
        animationDuration: 250,
        overlayComponent: BottomSheetOverlay,
        overlayOpacity: 0.75,
        dismissOnOverlayPress: true,
        onChange: handleChange,
      }
    );
  }, [present, handleChange, state]);

  // renders
  return (
    <View style={styles.container}>
      <Text>{state}</Text>
      <Button
        label="Present Modal"
        style={styles.buttonContainer}
        onPress={handlePresentPress}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 24,
  },
  buttonContainer: {
    marginBottom: 6,
  },
});

export default withModalProvider(OverlayExample);

[gorhom]

thanks @mr-moto for submitting this issue, currently i am working to rewriting the BottomSheetModal to make it more declarative 👍

please look at #75

[mr-moto]

@gorhom gotcha! Thanks for all the work your putting in!
Do you happen to have a rough timeline for when it might be released?

[gorhom]

i will try to get the next alpha release around this weekend 🤞

[gorhom]

I just released Alpha 5, it should fix this issue

yarn add @gorhom/bottom-sheet@2.0.0-alpha.5

also check out the new documents website ( still in progress ) 🎉