[bug] Keep provided options separately to trigger when closeModal (#55)

package.json

@@ -8,7 +8,7 @@
     "modal",
     "useModal"
   ],
-  "version": "0.1.7",
+  "version": "0.1.8",
   "main": "lib/index",
   "types": "lib",
   "files": [

src/Modal.tsx

@@ -1,4 +1,10 @@
-import React, { createContext, useCallback, useMemo, useState } from 'react';
+import React, {
+  createContext,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { StyleSheet } from 'react-native';
 import ModalComponent, { ModalProps } from 'react-native-modal';
 
@@ -8,11 +14,6 @@ const styles = StyleSheet.create({
   },
 });
 
-export interface Modal {
-  content: React.ReactNode;
-  options?: Partial<ModalProps>;
-}
-
 export interface ModalProviderProps {
   children: React.ReactNode;
   modalProps?: Partial<ModalProps>;
@@ -31,19 +32,19 @@ export const ModalProvider: React.FC<ModalProviderProps> = ({
   children,
   modalProps,
 }: ModalProviderProps) => {
-  const [modal, setModal] = useState<Modal | null>(null);
+  const [content, setContent] = useState<React.ReactNode | null>(null);
+  const optionsRef = useRef<Partial<ModalProps>>({});
+
   const showModal = useCallback(
     (content: React.ReactNode, options?: Partial<ModalProps>) => {
-      setModal({
-        content,
-        options,
-      });
+      setContent(content);
+      optionsRef.current = options;
     },
     [],
   );
 
   const closeModal = useCallback(() => {
-    setModal(null);
+    setContent(null);
   }, []);
 
   const value = useMemo(() => ({ showModal, closeModal }), [
@@ -56,15 +57,15 @@ export const ModalProvider: React.FC<ModalProviderProps> = ({
       {children}
       <ModalComponent
         {...modalProps}
-        {...(modal?.options || {})}
-        isVisible={modal !== null}
+        {...(optionsRef.current || {})}
+        isVisible={content !== null}
         useNativeDriver
         hideModalContentWhileAnimating
         hardwareAccelerated={true}
         presentationStyle="overFullScreen"
         style={styles.modalStyle}
       >
-        {modal?.content}
+        {content}
       </ModalComponent>
     </ModalContext.Provider>
   );

tests/Modal.spec.tsx

@@ -1,7 +1,8 @@
 import React, { useContext, useEffect } from 'react';
-import { Text } from 'react-native';
+import { Text, TouchableOpacity, View } from 'react-native';
 import { create, act } from 'react-test-renderer';
 import { ModalContext, ModalProvider } from '../src/Modal';
+import { waitForPaint } from './testhelper';
 
 jest.useFakeTimers();
 
@@ -57,6 +58,72 @@ describe('Modal Provider', () => {
     expect(wrapper.root.findByType(Text).props.children).toBe('Hello World');
   });
 
+  test('showModal with options', async () => {
+    const onModalHideMock = jest.fn();
+    const TestConsumer: React.FC = () => {
+      const { showModal, closeModal } = useContext(ModalContext);
+      const onShowModal = () => {
+        showModal(<Text testID="modal-content">Hello World</Text>, {
+          onModalHide: onModalHideMock,
+        });
+      };
+
+      const onCloseModal = () => {
+        closeModal();
+      };
+      return (
+        <View>
+          <TouchableOpacity testID="show-modal" onPress={onShowModal}>
+            <Text>Show Modal</Text>
+          </TouchableOpacity>
+
+          <TouchableOpacity testID="close-modal" onPress={onCloseModal}>
+            <Text>Close Modal</Text>
+          </TouchableOpacity>
+        </View>
+      );
+    };
+
+    const wrapper = create(
+      <ModalProvider>
+        <TestConsumer />
+      </ModalProvider>,
+    );
+    await waitForPaint();
+
+    const { onPress: onShowModal } = wrapper.root.findByProps({
+      testID: 'show-modal',
+    })?.props;
+    act(() => {
+      onShowModal();
+    });
+
+    await waitForPaint();
+
+    expect(
+      wrapper.root.findAllByProps({
+        testID: 'modal-content',
+      }),
+    ).toHaveLength(2);
+
+    const { onPress: onCloseModal } = wrapper.root.findByProps({
+      testID: 'close-modal',
+    })?.props;
+    act(() => {
+      onCloseModal();
+    });
+
+    await waitForPaint();
+
+    expect(
+      wrapper.root.findAllByProps({
+        testID: 'modal-content',
+      }),
+    ).toHaveLength(0);
+
+    expect(onModalHideMock).toHaveBeenCalled();
+  });
+
   test('closeModal', () => {
     const TestConsumer: React.FC = () => {
       const { showModal, closeModal } = useContext(ModalContext);

tests/testhelper.ts

@@ -0,0 +1,6 @@
+export async function waitForPaint(times = 1): Promise<void> {
+  for (let i = 0; i < times + 1; i++) {
+    jest.advanceTimersByTime(1000);
+    await Promise.resolve();
+  }
+}