feat(react-native): Add setIosSwipeGestureEnabled (#111)

* feat(react-native): Add setIosSwipeGestureEnabled

* changeset

Author: heecheolman

.changeset/free-animals-show.md

@@ -0,0 +1,5 @@
+---
+'@granite-js/react-native': patch
+---
+
+Add setIosSwipeGestureEnabled

packages/react-native/src/app/AppRoot.tsx

@@ -15,9 +15,18 @@ interface AppRootProps extends GraniteProps {
   container: ComponentType<PropsWithChildren<InitialProps>>;
   initialProps: InitialProps;
   initialScheme: string;
+  setIosSwipeGestureEnabled?: ({ isEnabled }: { isEnabled: boolean }) => void;
 }
 
-export function AppRoot({ appName, context, container: Container, initialProps, initialScheme, router }: AppRootProps) {
+export function AppRoot({
+  appName,
+  context,
+  container: Container,
+  initialProps,
+  initialScheme,
+  router,
+  setIosSwipeGestureEnabled,
+}: AppRootProps) {
   const prefix = getSchemePrefix({
     appName,
     scheme: global.__granite.app.scheme,
@@ -35,6 +44,7 @@ export function AppRoot({ appName, context, container: Container, initialProps,
               initialScheme={initialScheme}
               container={Container}
               prefix={prefix}
+              setIosSwipeGestureEnabled={setIosSwipeGestureEnabled}
               {...router}
             />
           </BackEventProvider>

packages/react-native/src/app/Granite.tsx

@@ -31,6 +31,12 @@ export interface GraniteProps {
    * The initial scheme of the app.
    */
   initialScheme?: string;
+
+  /**
+   * @description
+   * The function to set the iOS swipe gesture enabled.
+   */
+  setIosSwipeGestureEnabled?: ({ isEnabled }: { isEnabled: boolean }) => void;
 }
 
 const createApp = () => {
@@ -47,7 +53,7 @@ const createApp = () => {
   return {
     registerApp(
       AppContainer: ComponentType<PropsWithChildren<InitialProps>>,
-      { appName, context, router, initialScheme }: GraniteProps
+      { appName, context, router, initialScheme, setIosSwipeGestureEnabled }: GraniteProps
     ): (initialProps: InitialProps) => JSX.Element {
       if (appName === ENTRY_BUNDLE_NAME) {
         throw new Error(`Reserved app name 'shared' cannot be used`);
@@ -59,6 +65,7 @@ const createApp = () => {
             container={AppContainer}
             initialProps={initialProps}
             initialScheme={initialScheme ?? getSchemeUri()}
+            setIosSwipeGestureEnabled={setIosSwipeGestureEnabled}
             appName={appName}
             context={context}
             router={router}

packages/react-native/src/router/Router.tsx

@@ -56,6 +56,7 @@ export interface InternalRouterProps {
   container: ComponentType<PropsWithChildren<InitialProps>>;
   initialProps: InitialProps;
   initialScheme: string;
+  setIosSwipeGestureEnabled?: ({ isEnabled }: { isEnabled: boolean }) => Promise<void> | void;
 }
 
 export type RouterProps = StackNavigatorProps & NavigationContainerProps;
@@ -129,6 +130,7 @@ export function Router({
   defaultScreenOption,
   screenContainer,
   // Public props (StackNavigator)
+  setIosSwipeGestureEnabled,
   ...navigationContainerProps
 }: InternalRouterProps & RouterProps): ReactElement {
   const initialRouteName = useInitialRouteName({ prefix, initialScheme });
@@ -163,7 +165,7 @@ export function Router({
 
   return (
     <NavigationContainer ref={ref} {...navigationContainerProps} linking={linkingOptions}>
-      <CanGoBackGuard canGoBack={canGoBack} onBack={onBack}>
+      <CanGoBackGuard canGoBack={canGoBack} onBack={onBack} setIosSwipeGestureEnabled={setIosSwipeGestureEnabled}>
         <Container {...initialProps}>
           <StackNavigator.Navigator initialRouteName={initialRouteName} screenOptions={screenOptions}>
             {Screens}

packages/react-native/src/router/components/CanGoBackGuard.tsx

@@ -1,17 +1,34 @@
 import { ReactNode, useEffect } from 'react';
 import { BackHandler } from 'react-native';
+import { useIsInitialScreen } from '../hooks/useIsInitialScreen';
 
 export function CanGoBackGuard({
   children,
   canGoBack,
   onBack,
+  setIosSwipeGestureEnabled,
 }: {
   canGoBack: boolean;
   children: ReactNode;
   onBack?: () => void;
+  setIosSwipeGestureEnabled?: ({ isEnabled }: { isEnabled: boolean }) => void;
 }) {
+  const isInitialScreen = useIsInitialScreen();
+
   const shouldBlockGoingBack = !canGoBack;
 
+  useEffect(() => {
+    if (!isInitialScreen || !canGoBack) {
+      setIosSwipeGestureEnabled?.({ isEnabled: false });
+
+      return () => {
+        setIosSwipeGestureEnabled?.({ isEnabled: true });
+      };
+    }
+
+    return;
+  }, [canGoBack, isInitialScreen, setIosSwipeGestureEnabled]);
+
   useEffect(() => {
     if (shouldBlockGoingBack) {
       const subscription = BackHandler.addEventListener('hardwareBackPress', () => {