Add json viewer and update content layout

[Kaveh-ap]

Summary

Add a BodyViewer component for displaying request/response bodies with JSON tree viewing and text fallback, plus initial expansion controls throughout RequestDetails.

Motivation

• Improve readability of large JSON payloads with a collapsible tree.
• Provide better defaults via initial expansion controls for sections (headers and bodies).

Changes

• New component: BodyViewer
  • Detects JSON strings and renders a collapsible tree; falls back to text view.
  • iOS uses read-only TextInput for large content rendering reliability.
  • Supports data prop to bypass parsing and render prepared JSON.
  • Basic styling and nested scroll support for better UX.
• RequestDetails enhancements
  • New props:
    • initialRequestHeadersExpanded?: boolean (default: true)
    • initialResponseHeadersExpanded?: boolean (default: true)
    • initialRequestBodyExpanded?: boolean (default: true)
    • initialResponseBodyExpanded?: boolean (default: true)
  • Uses BodyViewer for request/response bodies with collapsible sections.
  • Adds “Share full request” and “Share as cURL” actions.
• Header
  • Indicator ▼/▶ shows only when collapsible.

Usage

<RequestDetails
  request={request}
  onClose={close}
  initialRequestHeadersExpanded={true}
  initialResponseHeadersExpanded={false}
  initialRequestBodyExpanded={true}
  initialResponseBodyExpanded={false}
/>

If you want to directly render JSON data:

<BodyViewer data={{ foo: 'bar', list: [1, 2, 3] }} initiallyExpanded />

UI/UX

• JSON bodies: Collapsible, indented view with alternating backgrounds per level.
• Text bodies: Scrollable view; on iOS uses read-only TextInput for large content stability.

Backward Compatibility

• Defaults keep previous behavior (all sections expanded initially).
• No breaking API changes.

Testing

• All tests pass.
• Manual checks for:
  • Collapsible behavior for headers and bodies.
  • JSON parse vs. plain text fallback.
  • Share actions.

Performance

• JSON parsing only when content is a string and data isn’t provided.
• Tree rendering uses toggling to limit on-screen content.

Screenshots/GIFs

[seyedmostafahasani]

@alexbrazier
Would you please check this PR?
I think it is very useful.

@Kaveh-ap
Thanks for creating this PR.

[Shubham1Jain]

@Kaveh-ap Can we also add a search bar to search text in response body, it will help a lot to search for specific things in large payload or response

[alexbrazier]

@codex review

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 54ea0753ea

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Use button role only for collapsible headers

The header title is always rendered inside a TouchableOpacity with accessibilityRole="button", even when collapsible is false and no onPress is provided. In those non-collapsible cases, assistive technologies will announce an actionable control that does nothing, which is an accessibility regression for screen-reader users. Make the button role/press behavior conditional so static headers are exposed as plain text headers.

Useful? React with 👍 / 👎.