Skip to content

feat(native/bridge): web fallbacks for all hooks + useNativeTransition page transitions#245

Merged
mayankmahavar1mg merged 2 commits into
feature/video_hook_android_iosfrom
feature/web_fallback
May 26, 2026
Merged

feat(native/bridge): web fallbacks for all hooks + useNativeTransition page transitions#245
mayankmahavar1mg merged 2 commits into
feature/video_hook_android_iosfrom
feature/web_fallback

Conversation

@mayankmahavar1mg
Copy link
Copy Markdown
Collaborator


Description:

## Summary

Two major additions on top of `feature/video_hook_android_ios`:

1. **All 9 native hooks refactored into per-file structure with web fallbacks**
2. **`useNativeTransition` — snapshot overlay page transitions (Android + JS)**

---

## 1. Hooks refactor + web fallbacks

All hooks moved from the monolithic `hooks.js` into `src/native/bridge/hooks/`
with individual files per hook.

**Hooks with web fallbacks added:**
- `useVideoStream` — web: `getUserMedia` stream
- `useCamera` — web: `<input type=file capture=environment>` (no getUserMedia — iOS WebView safe)
- `useFilePicker` — web: `<input type=file>`
- `useDataProtection` — web: localStorage/sessionStorage
- `useHapticFeedback` — web: no-op (API unavailable in browser)
- `useGoogleSignIn` — web: Google Identity Services SDK
- `useIntent` — web: `window.open`
- `useSafeArea` — web: CSS env() vars
- `useNetworkStatus` — web: `navigator.onLine` + Network Information API

**`useNotification` — web fallback intentionally skipped** (Browser Push requires
Service Worker; unreliable in iOS WebView).

**API surface added to every hook:**
```js
const { ..., webFallbackActive, webFallbackDisabled, setWebFallback } = useXxx()

webFallback prop is synchronous source of truth; overrides internal state.

Bug fixes included:

  • useBaseHook: isNative detection fixed to use nativeBridge.isAvailable()
    instead of window.WebBridge check (was always false on real Android devices)
  • Rules of Hooks violations fixed in useDataProtection, useFilePicker, useCamera
  • isNative / isWeb added to thin-state hooks (useSafeArea, useNetworkStatus, useDeviceInfo)
  • hooks.js retained as re-export shim for backwards compatibility

2. useNativeTransition

Snapshot overlay pattern for native-quality page transitions:

  1. JS calls navigate(to, opts) → bridge startTransition
  2. Native snapshots current WebView, places bitmap overlay over full screen
  3. JS router navigates underneath (snapshot hides the content swap)
  4. JS calls commitTransition → native animates overlay out
  5. Per-call safety timeout on native auto-commits if JS never calls commit

Web fallback: CSS overlay + requestAnimationFrame double-frame commit.

Android: TransitionManager.kt — Canvas bitmap, ImageView on decorView,
Handler safety timer, slide/fade ObjectAnimator. Bridge wired in
NativeBridge.kt + BridgeUtils.kt.

JS: useNativeTransition.js hook, NativeBridge.js helpers, command
registrations in NativeInterfaces.js.

navigate('/path', {
  type: 'slide',      // 'slide' | 'fade'
  direction: 'left',  // 'left' | 'right'
  duration: 300,
  timeout: 900,       // safety ms, default max(duration*3, 800)
})

iOS implementation complete but not included in this PR (pending iOS-only commit).


Files changed

Area Files
Android NativeBridge.kt, BridgeUtils.kt, TransitionManager.kt
JS bridge NativeBridge.js, NativeInterfaces.js, useBaseHook.js
Hooks hooks/ directory (11 files), hooks.js shim
KB knowledge-base.json (114 entries)
```

mayankmahavar1mg and others added 2 commits May 18, 2026 18:42
… with web fallbacks

- Extract all 9 hooks from monolithic hooks.js into src/native/bridge/hooks/ (one file per domain)
- hooks.js becomes a 2-line re-export shim for backwards compatibility
- Add web fallbacks for useVideoStream, useCamera, useCameraPermission, useFilePicker,
  useHapticFeedback, useDataProtection, useNetworkStatus, useSafeArea, useDeviceInfo
- Fix useBaseHook isNative detection to use nativeBridge.isAvailable() instead of raw window check
- Fix Rules of Hooks violations in useDataProtection, useFilePicker, useCamera
- Add isNative/isWeb to useSafeArea, useNetworkStatus, useDeviceInfo return shapes
- Fix useNotification interface alignment (add schedule alias, requestPermission, isNative/isWeb)
- Add webFallback prop dynamic sync to all hooks via useEffect
- Update KB with 4 new entries: notification config, sound asset, googleSignIn config, useBaseHook fix

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
… implementation

- Add TransitionManager.kt: snapshot overlay pattern using Canvas bitmap,
  ImageView on decorView, Handler safety timeout, slide/fade animations
- Wire startTransition/commitTransition/cancelTransition in NativeBridge.kt
  and BridgeUtils.kt (options parsing, delegation, malformed JSON safety)
- Add useNativeTransition.js hook: wraps useNavigate, CSS overlay web
  fallback, rAF double-frame commit, per-call configurable timeout
- Add transition bridge helpers to NativeBridge.js (start/commit/cancel)
- Register transition commands in NativeInterfaces.js
- Export useNativeTransition from hooks/index.js

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@deputydev-agent
Copy link
Copy Markdown

DeputyDev will no longer review pull requests automatically.To request a review, simply comment #review on your pull request—this will trigger an on-demand review whenever you need it.

@mayankmahavar1mg mayankmahavar1mg merged commit dc2f69a into feature/video_hook_android_ios May 26, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant