/// WebMethod Define
async test() {
  throw new Error('test error');
}

/// App Invoke WebMethod
webMethod.current.test().catch(e => console.warn(e)); // then you will get a timeout error but not the "test error"

 "@webview-bridge/react-native": "^1.3.3",
"react-native-code-push": "^8.2.1", 
 "react": "18.2.0",
 "react-native": "0.71.12",

import {bridge} from '@webview-bridge/react-native';
import {RootStackParamList} from '../../types/RootStackPrams';
import {
  StackActions,
  createNavigationContainerRef,
} from '@react-navigation/native';
import {goBack, navigate} from '@utils/NavigationService';
import {store} from '@config/configureStore';
import {hbookAPI} from '@utils/ApiUtils';

export const navigationRef = createNavigationContainerRef<RootStackParamList>();

export const appBridge = bridge({
  async canGoBack() {
    return await Boolean(
      navigationRef.current?.isReady() && navigationRef.current.canGoBack(),
    );
  },
  async goBack() {
    await goBack();
  },
  async navigate<RouteName extends keyof RootStackParamList>(
    name: RouteName,
    params: RootStackParamList[RouteName],
  ) {
    if (name === 'ChatSettingScreen') {
      params = {...params, screenName: 'ChatScreen'};
    }
    await navigate(name as any, params as any);
  },
  async push<RouteName extends keyof RootStackParamList>(
    name: RouteName,
    params: RootStackParamList[RouteName],
  ) {
    if (navigationRef.current?.isReady()) {
      await navigationRef.current.dispatch(StackActions.push(name, params));
    }
  },
  async replace<RouteName extends keyof RootStackParamList>(
    name: RouteName,
    params: RootStackParamList[RouteName],
  ) {
    if (navigationRef.current?.isReady()) {
      await navigationRef.current.dispatch(StackActions.replace(name, params));
    }
  },
  async popToTop() {
    if (navigationRef.current?.isReady()) {
      await navigationRef.current.dispatch(StackActions.popToTop());
    }
  },
  async getNativeState() {
    return await store.getState();
  },
  async changeBranch(token, id) {
    try {
      const response = await hbookAPI().post(
        'api/get-token',
        {
          data: {
            token,
            id,
          },
        },
      );
      return response.data;
    } catch (error) {
      console.error(error);
    }
  },
});

export type AppBridge = typeof appBridge;

 "@webview-bridge/react": "^1.4.0",
 "@webview-bridge/web": "^1.4.0",
  "next": "14.1.1",
  "react": "^18",

"use client";
import { createLinkBridgeProvider } from "@webview-bridge/react";

export const {
  BridgeProvider,
  useBridgeStore,
  useBridgeStatus,
  useBridgeLoose,
} = createLinkBridgeProvider({
  throwOnError: true,
  onReady: () => {
    console.log("Bridge is ready");
  },
});

import { useCallback, useEffect, useState } from "react";
import { useBridgeStatus, useBridgeStore } from "@/providers/BridgeProvider";

interface NativeState {
  loginMobileReducer: {
    token: string;
    book_token: string;
    doctor_role_id: string;
    doctor_details: {
      doctor_id: string;
      doctor_name: string;
      doctor_profile_image: string;
      branch_doctor_id: string;
      branch_name: string;
      patient_role_id: string;
    };
  };
}

const useNativeBridge = () => {
  const [nativeState, setNativeState] = useState<NativeState>();

  const { getNativeState, goBack, canGoBack, navigate, changeBranch } =
    useBridgeStore((state) => ({
      getNativeState: state.getNativeState,
      goBack: state.goBack,
      canGoBack: state.canGoBack,
      navigate: state.navigate,
      changeBranch: state.changeBranch,
    }));

  const { isNativeMethodAvailable, isWebViewBridgeAvailable } =
    useBridgeStatus();

  const isNativeMethodSafe = useCallback(
    (method: string | number) =>
      isWebViewBridgeAvailable && isNativeMethodAvailable(method),
    [isWebViewBridgeAvailable, isNativeMethodAvailable]
  );

  const fetchNativeState = useCallback(async () => {
    if (!isNativeMethodSafe("getNativeState")) return;
    const state = await getNativeState();
    setNativeState(state);
  }, [getNativeState, isNativeMethodSafe]);

  const fetchNativeGoBack = useCallback(async () => {
    if (!isNativeMethodSafe("goBack")) return;
    return await goBack();
  }, [goBack, isNativeMethodSafe]);

  const fetchNativeCanGoBack = useCallback(async () => {
    if (!isNativeMethodSafe("canGoBack")) return;
    return await canGoBack();
  }, [canGoBack, isNativeMethodSafe]);

  const fetchNativeNavigate = useCallback(
    async (screenName: string) => {
      if (!isNativeMethodSafe("navigate")) return;
      return await navigate(screenName);
    },
    [navigate, isNativeMethodSafe]
  );

  const switchBranchSPOT = useCallback(
    async (token: string, id: string) => {
      if (!isNativeMethodSafe("changeBranch")) return;
      return await changeBranch(token, id);
    },
    [changeBranch, isNativeMethodSafe]
  );

  useEffect(() => {
    fetchNativeState();
  }, [fetchNativeState]);

  return {
    nativeState,
    isNativeMethodSafe,
    isWebViewBridgeAvailable,
    fetchNativeGoBack,
    fetchNativeCanGoBack,
    fetchNativeNavigate,
    switchBranchSPOT,
  };
};

export default useNativeBridge;