[officialasishkumar]

Summary

Closes #68. Adds a DebugView development helper that draws the safe area insets of the nearest SafeAreaProvider over its parent, so developers can check visually how their layout interacts with the safe area.

• Absolutely positioned, fills the parent, pointerEvents="none".
• Each inset is a translucent band labeled with its value (top: 47). Props: color and showLabels, plus all View props.
• As suggested by the maintainer in the issue, it is not exported from the main entry point (no tree shaking in RN). It is available from the react-native-safe-area-context/DebugView subpath, through root DebugView.js / DebugView.d.ts shims added to files, the same way jest/mock works.
• Added an API docs page.

import DebugView from 'react-native-safe-area-context/DebugView';

<SafeAreaProvider>
  <Content />
  {__DEV__ ? <DebugView /> : null}
</SafeAreaProvider>

Test Plan

• Added src/__tests__/DebugView-test.tsx (band geometry/size per edge, labels, no touch interception, custom color, hiding labels).
• jest (all suites pass), tsc --noEmit, eslint and prettier --check on the changed files are clean.
• bob build emits lib/commonjs/DebugView.js and lib/typescript/src/DebugView.d.ts, which the root shims point at.

[vercel]

@officialasishkumar is attempting to deploy a commit to the appandflow Team on Vercel.

A member of the Team first needs to authorize it.

[floco-af]

Thanks for the PR, and for following the subpath approach suggested in #68. Review below, from a maintainer-side bot run (not a human approval).

Validation (JS only, on the PR branch at 852fe2e)

• jest: 6 suites pass (35 passed, 2 skipped), including the new DebugView-test.tsx. The base branch has 5 suites, so the added suite is the only difference.
• tsc --noEmit, eslint and prettier --check on the changed files are clean.
• bob build emits lib/commonjs/DebugView.js, lib/module/DebugView.js and lib/typescript/src/DebugView.d.ts. npm pack --dry-run lists the root DebugView.js / DebugView.d.ts shims, so react-native-safe-area-context/DebugView resolves the same way as jest/mock.
• Not validated: rendering on a real iOS/Android device or web. There is no screenshot in the PR, and this run did not do a native repro either. A before/after screenshot on a notched device (portrait and landscape) would help.

Looks good

• Not exported from the main entry point, as agreed in #68, so apps that don't use it don't bundle it.
• Small, contained diff, with tests and a docs page.

Minor suggestions (non-blocking)

1. The left/right bands span the full height (top: 0, bottom: 0), so they overlap the top/bottom bands and the corners render darker. Constraining them between the top and bottom insets would give cleaner output.
2. The label is hard-coded white, so it is hard to read with a light custom color. A labelColor prop (or a contrasting default) would help.
3. Labels in the left/right bands are clipped when the inset is narrow (overflow: 'hidden', numberOfLines={1}, and a 0-3 px band on devices without side insets). That is fine for 0, but a vertical or offset label would be more legible in landscape.
4. pointerEvents is passed as a prop. react-native-web warns that this is deprecated in favor of style.pointerEvents, so it is worth checking the web console. Also, {...others} after it lets callers override it, which seems intended.
5. The docs sidebar_position: 11 leaves a gap after deprecated (9). Not a problem, just flagging.
6. The test only imports from ../DebugView. A small test of the root DebugView.js shim (or a check in the build) would catch broken subpath packaging later.

cc @janicduplessis for the final call on API naming and whether this belongs in the package.