fix(native): overlay close on empty history stack (#79)

* fix(native): add testcase for overlay on empty history stack

* fix(native): add unfinished fallback behaviour for overlay error

* Update packages/react-navigation-native/src/index.ts

Co-authored-by: MinuKang <minukang5874@gmail.com>

* Update packages/react-navigation-native/src/index.ts

Co-authored-by: MinuKang <minukang5874@gmail.com>

---------

Co-authored-by: MinuKang <minukang5874@gmail.com>

Author: CodePsy-2001

packages/react-navigation-native/src/index.ts

@@ -142,6 +142,26 @@ export const useFunnel = createUseFunnel(({ id, initialState }) => {
         if (delta === -1) {
           if (navigation.canGoBack()) {
             navigation.goBack();
+          } else {
+            // FIXME: 미완성 코드. 관련 에러: https://github.com/toss/use-funnel/issues/77
+            // 이렇게 해도 네이티브 뒤로가기 시의 문제는 여전히 해결할 수 없음
+            if (params && params.index > 0 && navigation.getState().index === 0 && params.isOverlay) {
+              const prevHistory = (params.histories ?? [])[params.index - 1];
+              const newState: NativeFunnelState = {
+                step: prevHistory.step,
+                context: prevHistory.context,
+                index: params.index - 1,
+                histories: (params.histories ?? []).slice(0, params.index),
+                isOverlay: overlayStepMapRef.current[prevHistory.step],
+              };
+              navigation.setParams({
+                ...route.params,
+                [navigationParamName]: {
+                  ...useFunnelState,
+                  [id]: newState,
+                },
+              });
+            }
           }
         } else {
           // find delta index

packages/react-navigation-native/test/index.test.tsx

@@ -140,4 +140,66 @@ describe('Test useFunnel react-navigation-native router', () => {
     expect(screen.queryByText('B title : replace-test')).toBeNull();
     expect(screen.queryByText('A : Go B')).not.toBeNull();
   });
+
+  test('The overlay should work even if there is no history', async () => {
+    function NoHistoryOverlayTest() {
+      const funnel = useFunnel<{
+        A: { id?: string };
+        Overlay: {};
+      }>({
+        id: 'first-history-overlay-test',
+        initial: {
+          step: 'A',
+          context: {},
+        },
+      });
+      return (
+        <funnel.Render
+          A={({ history }) => (
+            <View>
+              <Button title="A : Go Overlay" onPress={() => history.push('Overlay')} />
+            </View>
+          )}
+          Overlay={funnel.Render.overlay({
+            render({ close }) {
+              return (
+                <View>
+                  <Text>Overlay : title</Text>
+                  <Button title="Overlay : Close Overlay" onPress={() => close()} />
+                </View>
+              );
+            },
+          })}
+        />
+      );
+    }
+
+    const navigationRef = createNavigationContainerRef();
+
+    render(
+      <NavigationContainer ref={navigationRef}>
+        <Stack.Navigator>
+          <Stack.Screen name="Home" component={NoHistoryOverlayTest} />
+        </Stack.Navigator>
+      </NavigationContainer>,
+    );
+
+    const user = userEvent.setup();
+
+    // The first screen is "A"
+    expect(screen.queryByText('A : Go Overlay')).not.toBeNull();
+
+    // When the user presses the "A : Go Overlay" button
+    await user.press(screen.getByText('A : Go Overlay'));
+
+    // The screen should be "Overlay"
+    expect(screen.queryByText('Overlay : title')).not.toBeNull();
+
+    // When the user presses the "Overlay : Close Overlay" button
+    await user.press(screen.getByText('Overlay : Close Overlay'));
+
+    // The screen should be "A", overlay is closed
+    expect(screen.queryByText('Overlay : title')).toBeNull();
+    expect(screen.queryByText('A : Go Overlay')).not.toBeNull();
+  });
 });