Capacitor Use Watch Position w/ Fallback to Get Current Position

PositionProvider.ts

const PositionProvider: React.FC = ({ children }) => {
  const position = useCurrentPosition();

  return (
    <WatchLocationContext.Provider value={position}>
      {children}
    </WatchLocationContext.Provider>
  );
};

usage.tsx

const [showLocationHelp, setShowLocationHelp] = useState(false);
const currentLocation = useContext(WatchLocationContext);

const onSubmit = () => {
    if (currentLocation.error) {
      setShowLocationHelp(true);
      return;
    }
    const {
      currentPosition: { coords },
    } = currentLocation;

   // continue on
};

if (showLocationHelp) {
  return <>Enable Your Location Prompt</>;
}

return <>Form</>;

useCurrentPosition.ts

const useCurrentPosition = (): GeoWatchPositionResult => {
  const [position, setPosition] = useState<Position>();
  const [watchId, setWatchId] = useState("");
  const [error, setError] = useState();

  const clearWatch = () => {
    if (watchId) {
      clearPosition({ id: watchId });
      setWatchId("");
    }
  };

  const startWatch = async () => {
    if (!watchId) {
      const id = await watchPosition(async (pos: Position | null, err) => {
        if (err) {
          setError(err);
        }
        if (pos) {
          setPosition(pos);
        } else {
          const newPosition = await getCurrentPosition();
          setPosition(newPosition);
        }
      });
      setWatchId(id);
    }
  };

  useEffect(() => {
    startWatch();

    return () => clearWatch();
  }, []);

  return { currentPosition: position, error };
};