docs: merge React Native documentation and UI fixes

app/globals.css

@@ -1368,7 +1368,7 @@ select {
 .prose-docs pre {
   overflow: auto;
   margin: 20px 0;
-  padding: 19px 20px;
+  padding: 20px 5px;
   border: 1px solid color-mix(in srgb, var(--border) 75%, black);
   border-radius: 12px;
   background: var(--code-bg);
@@ -1386,7 +1386,7 @@ select {
 
 .prose-docs .code-block-shell pre {
   margin: 0;
-  padding-top: 48px;
+  padding: 20px 5px;
 }
 
 .prose-docs .code-block-shell.is-inside-tabs {
@@ -1403,17 +1403,16 @@ select {
   z-index: 1;
   top: 10px;
   right: 10px;
-  display: inline-flex;
+  display: inline-grid;
+  width: 30px;
+  height: 30px;
   align-items: center;
-  gap: 6px;
-  min-height: 30px;
-  padding: 0 9px;
+  justify-content: center;
+  padding: 0;
   border: 1px solid rgb(255 255 255 / 0.11);
   border-radius: 7px;
   background: rgb(255 255 255 / 0.06);
   color: color-mix(in srgb, var(--code-text) 86%, white);
-  font-size: 11px;
-  font-weight: 700;
   transition:
     background 150ms ease,
     border-color 150ms ease,
@@ -1427,8 +1426,13 @@ select {
 }
 
 .code-copy-button svg {
-  width: 15px;
-  height: 15px;
+  width: 14px;
+  height: 14px;
+}
+
+.code-copy-button:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
 }
 
 .code-tabs {
@@ -2739,6 +2743,20 @@ select {
   text-transform: uppercase;
 }
 
+.pagination a .pagination-label {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: 5px;
+}
+
+.pagination a .pagination-label svg {
+  width: 15px;
+  height: 15px;
+  flex: 0 0 auto;
+  color: var(--accent);
+}
+
 .pagination a strong {
   min-width: 0;
   overflow: hidden;
@@ -2752,13 +2770,8 @@ select {
   text-align: right;
 }
 
-.pagination-next svg {
-  position: absolute;
-  right: 11px;
-  bottom: 10px;
-  width: 15px;
-  height: 15px;
-  color: var(--accent);
+.pagination-next .pagination-label {
+  justify-content: flex-end;
 }
 
 .toc-nav > p {
@@ -2841,6 +2854,7 @@ select {
 .search-dialog {
   width: min(720px, calc(100vw - 28px));
   max-height: min(680px, calc(100vh - 40px));
+  margin: 10vh auto auto;
   padding: 0;
   overflow: hidden;
   border: 1px solid var(--border-strong);
@@ -3936,6 +3950,19 @@ html.dark .guide-markdown a {
   line-height: 1.65;
 }
 
+.guide-markdown .code-block-shell {
+  position: relative;
+  margin: 20px 0;
+}
+
+.guide-markdown .code-block-shell pre {
+  max-height: none;
+  overflow-x: auto;
+  overflow-y: visible;
+  margin: 0;
+  padding: 20px 5px;
+}
+
 .guide-markdown blockquote {
   margin: 0;
   padding: 14px 16px;
@@ -4640,10 +4667,6 @@ html.dark .guide-markdown a {
     grid-template-columns: 1fr;
   }
 
-  .pagination-next {
-    text-align: left;
-  }
-
   .feedback-card,
   .site-footer {
     align-items: flex-start;

content/docs/chat/sdk/react-native/calling/managing-calls/accept-call.mdx

@@ -0,0 +1,24 @@
+---
+title: 'Accept a call'
+description: 'Accept a call invitation with OpenIM React Native SDK.'
+product: 'sdk'
+context: 'chat/sdk/react-native'
+template: 'guide'
+status: 'draft'
+version: 'v4'
+platform: 'react-native'
+sourcePath: '/sdk/react-native/calling/managing-calls/accept-call'
+---
+
+After receiving `OnReceiveNewInvitation`, call `signalingAccept()` to accept the call invitation.
+
+```ts
+const roomCredentials = await OpenIMSDK.signalingAccept({
+  opUserID: currentUserID,
+  invitation,
+});
+```
+
+`opUserID` is the user ID of the user accepting the invitation. Use the complete `invitation` object provided by the `OnReceiveNewInvitation` event callback.
+
+The call returns `RtcInviteResults`, which contains the call room's `roomID`, `token`, and `liveURL`. Other participants receive the acceptance through `OnInviteeAccepted`; use `invitation.roomID` in its callback to identify the call. For event listeners, see [Handle call events](/sdk/react-native/calling/managing-calls/handle-call-events).

content/docs/chat/sdk/react-native/calling/managing-calls/cancel-call.mdx

@@ -0,0 +1,24 @@
+---
+title: 'Cancel a call invitation'
+description: 'Cancel a call invitation with OpenIM React Native SDK.'
+product: 'sdk'
+context: 'chat/sdk/react-native'
+template: 'guide'
+status: 'draft'
+version: 'v4'
+platform: 'react-native'
+sourcePath: '/sdk/react-native/calling/managing-calls/cancel-call'
+---
+
+Before the call connects, the inviter can call `signalingCancel()` to cancel the invitation.
+
+```ts
+await OpenIMSDK.signalingCancel({
+  opUserID: currentUserID,
+  invitation,
+});
+```
+
+`opUserID` is the user ID that cancels the invitation. Use the complete `RtcInvite` object saved when the call was initiated for `invitation`.
+
+After the call returns, the cancellation request is complete. Invitees receive the cancellation through `OnInvitationCancelled`; use `invitation.roomID` in its callback to identify the call. For event parameters and listeners, see [Handle call events](/sdk/react-native/calling/managing-calls/handle-call-events).

content/docs/chat/sdk/react-native/calling/managing-calls/handle-call-events.mdx

@@ -0,0 +1,133 @@
+---
+title: 'Handle call events'
+description: 'Listen for call events with OpenIM React Native SDK.'
+product: 'sdk'
+context: 'chat/sdk/react-native'
+template: 'guide'
+status: 'draft'
+version: 'v4'
+platform: 'react-native'
+sourcePath: '/sdk/react-native/calling/managing-calls/handle-call-events'
+---
+
+Call events report invitation status, participant status, and media-stream status. For invitation events, read room information from `invitation` in the callback parameter. Media-stream events provide `roomID` directly. To send and receive custom signals, see [Send a custom signal](/sdk/react-native/calling/sending-custom-signals/send-a-custom-signal).
+
+## Event parameters
+
+| Event | Callback parameter type | Common fields |
+| --- | --- | --- |
+| `OnReceiveNewInvitation` | `OnReceiveNewInvitationPayload` | `invitation`, `userID`, `participant`, `offlinePushInfo`. |
+| `OnInviteeAccepted` | `OnInviteeAcceptedPayload` | `invitation`, `userID`, `participant`, `opUserPlatformID`. |
+| `OnInviteeRejected` | `OnInviteeRejectedPayload` | `invitation`, `userID`, `participant`, `opUserPlatformID`. |
+| `OnInvitationCancelled` | `OnInvitationCancelledPayload` | `invitation`, `userID`, `participant`, `offlinePushInfo`. |
+| `OnInvitationTimeout` | `OnReceiveNewInvitationPayload` | `invitation`, `userID`, `participant`, `offlinePushInfo`. |
+| `OnInviteeAcceptedByOtherDevice` | `OnInviteeAcceptedPayload` | `invitation`, `userID`, `participant`, `opUserPlatformID`. |
+| `OnInviteeRejectedByOtherDevice` | `OnInviteeRejectedPayload` | `invitation`, `userID`, `participant`, `opUserPlatformID`. |
+| `OnHangUp` | `OnHangUpPayload` | `invitation`, `userID`, `offlinePushInfo`. |
+| `OnRoomParticipantConnected` | `OnRoomParticipantConnectedPayload` | `invitation`, `groupID`, `participant`. |
+| `OnRoomParticipantDisconnected` | `OnRoomParticipantDisconnectedPayload` | `invitation`, `groupID`, `participant`. |
+| `OnStreamChange` | `OnStreamChangePayload` | `roomID`, `streamType`, `mute`. |
+
+Use `invitation.roomID` or `roomID` to distinguish calls. Use `participant.userInfo.userID` to distinguish participants.
+
+```ts
+function handleReceiveNewInvitation(payload: OnReceiveNewInvitationPayload) {
+  // ...
+}
+
+function handleInviteeAccepted(payload: OnInviteeAcceptedPayload) {
+  // ...
+}
+
+function handleInviteeRejected(payload: OnInviteeRejectedPayload) {
+  // ...
+}
+
+function handleInvitationCancelled(payload: OnInvitationCancelledPayload) {
+  // ...
+}
+
+function handleInvitationTimeout(payload: OnReceiveNewInvitationPayload) {
+  // ...
+}
+
+function handleInviteeAcceptedByOtherDevice(payload: OnInviteeAcceptedPayload) {
+  // ...
+}
+
+function handleInviteeRejectedByOtherDevice(payload: OnInviteeRejectedPayload) {
+  // ...
+}
+
+function handleHangUp(payload: OnHangUpPayload) {
+  // ...
+}
+
+function handleRoomParticipantConnected(
+  payload: OnRoomParticipantConnectedPayload,
+) {
+  // ...
+}
+
+function handleRoomParticipantDisconnected(
+  payload: OnRoomParticipantDisconnectedPayload,
+) {
+  // ...
+}
+
+function handleStreamChange(payload: OnStreamChangePayload) {
+  // ...
+}
+
+// Start listening
+OpenIMSDK.on(OpenIMEvent.OnReceiveNewInvitation, handleReceiveNewInvitation);
+OpenIMSDK.on(OpenIMEvent.OnInviteeAccepted, handleInviteeAccepted);
+OpenIMSDK.on(OpenIMEvent.OnInviteeRejected, handleInviteeRejected);
+OpenIMSDK.on(OpenIMEvent.OnInvitationCancelled, handleInvitationCancelled);
+OpenIMSDK.on(OpenIMEvent.OnInvitationTimeout, handleInvitationTimeout);
+OpenIMSDK.on(
+  OpenIMEvent.OnInviteeAcceptedByOtherDevice,
+  handleInviteeAcceptedByOtherDevice,
+);
+OpenIMSDK.on(
+  OpenIMEvent.OnInviteeRejectedByOtherDevice,
+  handleInviteeRejectedByOtherDevice,
+);
+OpenIMSDK.on(OpenIMEvent.OnHangUp, handleHangUp);
+OpenIMSDK.on(
+  OpenIMEvent.OnRoomParticipantConnected,
+  handleRoomParticipantConnected,
+);
+OpenIMSDK.on(
+  OpenIMEvent.OnRoomParticipantDisconnected,
+  handleRoomParticipantDisconnected,
+);
+OpenIMSDK.on(OpenIMEvent.OnStreamChange, handleStreamChange);
+
+// Stop listening
+OpenIMSDK.off(OpenIMEvent.OnReceiveNewInvitation, handleReceiveNewInvitation);
+OpenIMSDK.off(OpenIMEvent.OnInviteeAccepted, handleInviteeAccepted);
+OpenIMSDK.off(OpenIMEvent.OnInviteeRejected, handleInviteeRejected);
+OpenIMSDK.off(OpenIMEvent.OnInvitationCancelled, handleInvitationCancelled);
+OpenIMSDK.off(OpenIMEvent.OnInvitationTimeout, handleInvitationTimeout);
+OpenIMSDK.off(
+  OpenIMEvent.OnInviteeAcceptedByOtherDevice,
+  handleInviteeAcceptedByOtherDevice,
+);
+OpenIMSDK.off(
+  OpenIMEvent.OnInviteeRejectedByOtherDevice,
+  handleInviteeRejectedByOtherDevice,
+);
+OpenIMSDK.off(OpenIMEvent.OnHangUp, handleHangUp);
+OpenIMSDK.off(
+  OpenIMEvent.OnRoomParticipantConnected,
+  handleRoomParticipantConnected,
+);
+OpenIMSDK.off(
+  OpenIMEvent.OnRoomParticipantDisconnected,
+  handleRoomParticipantDisconnected,
+);
+OpenIMSDK.off(OpenIMEvent.OnStreamChange, handleStreamChange);
+```
+
+Stop listening when the component is unmounted, the user signs out, or the account changes.

content/docs/chat/sdk/react-native/calling/managing-calls/hang-up-call.mdx

@@ -0,0 +1,24 @@
+---
+title: 'Hang up a call'
+description: 'Hang up a call with OpenIM React Native SDK.'
+product: 'sdk'
+context: 'chat/sdk/react-native'
+template: 'guide'
+status: 'draft'
+version: 'v4'
+platform: 'react-native'
+sourcePath: '/sdk/react-native/calling/managing-calls/hang-up-call'
+---
+
+After a call connects, call `signalingHungUp()` to hang up.
+
+```ts
+await OpenIMSDK.signalingHungUp({
+  opUserID: currentUserID,
+  invitation,
+});
+```
+
+`opUserID` is the user ID hanging up the call. Use the complete `RtcInvite` object for the current call for `invitation`; its `roomID` must match the active call room.
+
+After the call returns, the hang-up request is complete. Other participants receive call-end information through `OnHangUp`; use `invitation.roomID` in its callback to identify the call. For event parameters and listeners, see [Handle call events](/sdk/react-native/calling/managing-calls/handle-call-events).

content/docs/chat/sdk/react-native/calling/managing-calls/reject-call.mdx

@@ -0,0 +1,24 @@
+---
+title: 'Reject a call'
+description: 'Reject a call invitation with OpenIM React Native SDK.'
+product: 'sdk'
+context: 'chat/sdk/react-native'
+template: 'guide'
+status: 'draft'
+version: 'v4'
+platform: 'react-native'
+sourcePath: '/sdk/react-native/calling/managing-calls/reject-call'
+---
+
+After receiving a call invitation, call `signalingReject()` to reject it when the invitation will not be accepted.
+
+```ts
+await OpenIMSDK.signalingReject({
+  opUserID: currentUserID,
+  invitation,
+});
+```
+
+`opUserID` is the user ID of the user rejecting the invitation. Use the complete `invitation` object provided by the `OnReceiveNewInvitation` event callback.
+
+After the call returns, the rejection request is complete. The inviter receives the result through `OnInviteeRejected`; use `invitation.roomID` in its callback to identify the call. For event parameters and listeners, see [Handle call events](/sdk/react-native/calling/managing-calls/handle-call-events).