https://react-native-documents.github.io/assets/js/930a80de.7c0ceae1.js

1"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["212"],{5817(e,r,n){n.r(r),n.d(r,{metadata:()=>o,default:()=>m,frontMatter:()=>l,contentTitle:()=>c,toc:()=>d,assets:()=>u});var o=JSON.parse('{"id":"sponsor-only/viewer","title":"Document Viewer","description":"Document viewer for previewing files by uri or bookmark on Android (Intent.ACTION_VIEW) and iOS (QuickLook)","source":"@site/docs/sponsor-only/viewer.mdx","sourceDirName":"sponsor-only","slug":"/sponsor-only/viewer","permalink":"/docs/sponsor-only/viewer","draft":false,"unlisted":false,"editUrl":"https://github.com/react-native-documents/document-picker/edit/main/docs/docs/sponsor-only/viewer.mdx","tags":[],"version":"current","sidebarPosition":30,"frontMatter":{"sidebar_position":30,"sidebar_class_name":"larger-heading","description":"Document viewer for previewing files by uri or bookmark on Android (Intent.ACTION_VIEW) and iOS (QuickLook)"},"sidebar":"guidesSidebar","previous":{"title":"Virtual files","permalink":"/docs/sponsor-only/picker/virtual-files"},"next":{"title":"Jest module mocks","permalink":"/docs/sponsor-only/jest-mocks"}}'),t=n(4848),i=n(8453),s=n(7689),a=n(1647);let l={sidebar_position:30,sidebar_class_name:"larger-heading",description:"Document viewer for previewing files by uri or bookmark on Android (Intent.ACTION_VIEW) and iOS (QuickLook)"},c="Document Viewer",u={},d=[{value:"How it works",id:"how-it-works",level:3},{value:"View a document given a <code>uri</code>",id:"view-a-document-given-a-uri",level:3},{value:"View a document given a <code>bookmark</code>",id:"view-a-document-given-a-bookmark",level:3}];function h(e){let r={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h3:"h3",header:"header",p:"p",pre:"pre",...(0,i.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(r.header,{children:(0,t.jsx)(r.h1,{id:"document-viewer",children:"Document Viewer"})}),"\n",(0,t.jsxs)(r.p,{children:["The viewer module is designed to work with the files that the document picker module returns. It supports both ",(0,t.jsx)(r.code,{children:"uri"})," and ",(0,t.jsx)(r.code,{children:"bookmark"})," coming from ",(0,t.jsx)(r.code,{children:"open"})," and ",(0,t.jsx)(r.code,{children:"import"})," modes, also supports virtual files and long-term access to the files."]}),"\n",(0,t.jsxs)(r.p,{children:["The call to ",(0,t.jsx)(r.code,{children:"viewDocument"})," returns a promise that resolves with ",(0,t.jsx)(r.code,{children:"null"}),' in case of success or rejects with an error. It is a "fire-and-forget" function, meaning that the promise resolves right after the package asks the OS to present the preview.']}),"\n",(0,t.jsx)(r.h3,{id:"how-it-works",children:"How it works"}),"\n","\n",(0,t.jsxs)(s.A,{queryString:"current-os",className:"unique-tabs",children:[(0,t.jsx)(a.A,{value:"android",label:"Android",children:(0,t.jsxs)(r.p,{children:[(0,t.jsx)(r.code,{children:"viewDocument"})," uses ",(0,t.jsx)(r.a,{href:"https://developer.android.com/reference/android/content/Intent#ACTION_VIEW",children:(0,t.jsx)(r.code,{children:"Intent.ACTION_VIEW"})})," internally."]})}),(0,t.jsx)(a.A,{value:"ios",label:"iOS",children:(0,t.jsxs)(r.p,{children:[(0,t.jsx)(r.code,{children:"viewDocument"})," uses the ",(0,t.jsx)(r.a,{href:"https://developer.apple.com/documentation/quicklook",children:"QuickLook framework"})," internally."]})})]}),"\n",(0,t.jsxs)(r.h3,{id:"view-a-document-given-a-uri",children:["View a document given a ",(0,t.jsx)(r.code,{children:"uri"})]}),"\n",(0,t.jsxs)(r.p,{children:["Uri would come from the ",(0,t.jsx)(r.a,{href:"/docs/sponsor-only/picker/open-mode",children:"open"})," or ",(0,t.jsx)(r.a,{href:"/docs/sponsor-only/picker/import-mode",children:"import"})," modes of the document picker."]}),"\n",(0,t.jsxs)(r.blockquote,{children:["\n",(0,t.jsxs)(r.p,{children:["See more in the ",(0,t.jsx)(r.a,{href:"../doc-viewer-api#optionsviewuri",children:"API reference"})]}),"\n"]}),"\n",(0,t.jsx)(r.pre,{children:(0,t.jsx)(r.code,{className:"language-tsx",metastring:'title="Previewing a document given a uri"',children:"import { viewDocument } from '@react-native-documents/viewer'\n\nreturn (\n  <Button\n    title=\"view the last imported file\"\n    onPress={() => {\n      const uriToOpen = 'file:///path/to/your/file'\n      viewDocument({ uri: uriToOpen, mimeType: 'some-mime' }).catch(handleError)\n    }}\n  />\n)\n"})}),"\n",(0,t.jsxs)(r.h3,{id:"view-a-document-given-a-bookmark",children:["View a document given a ",(0,t.jsx)(r.code,{children:"bookmark"})]}),"\n",(0,t.jsxs)(r.p,{children:[(0,t.jsx)(r.code,{children:"bookmark"})," would come from the ",(0,t.jsx)(r.a,{href:"/docs/sponsor-only/picker/open-mode",children:"open"})," mode, with the ",(0,t.jsx)(r.code,{children:"requestLongTermAccess"})," option set to ",(0,t.jsx)(r.code,{children:"true"}),"."]}),"\n",(0,t.jsxs)(r.blockquote,{children:["\n",(0,t.jsxs)(r.p,{children:["See more in the ",(0,t.jsx)(r.a,{href:"../doc-viewer-api#optionsviewbookmark",children:"API reference"})]}),"\n"]}),"\n",(0,t.jsx)(r.pre,{children:(0,t.jsx)(r.code,{className:"language-tsx",metastring:'title="Previewing a document given a bookmark"',children:"import { viewDocument } from '@react-native-documents/viewer'\n\nreturn (\n  <Button\n    title=\"view the last imported file\"\n    onPress={() => {\n      const bookmark = '...'\n      viewDocument({ bookmark }).catch(handleError)\n    }}\n  />\n)\n"})})]})}function m(e={}){let{wrapper:r}={...(0,i.R)(),...e.components};return r?(0,t.jsx)(r,{...e,children:(0,t.jsx)(h,{...e})}):h(e)}},1647(e,r,n){n.d(r,{A:()=>i});var o=n(4848);n(6540);var t=n(4164);function i({children:e,hidden:r,className:n}){return(0,o.jsx)("div",{role:"tabpanel",className:(0,t.A)("tabItem_Ymn6",n),hidden:r,children:e})}},7689(e,r,n){n.d(r,{A:()=>k});var o=n(4848),t=n(6540),i=n(4164),s=n(5678),a=n(5341),l=n(6347),c=n(3398),u=n(3270),d=n(1335),h=n(5714);function m(e){return t.Children.toArray(e).filter(e=>"\n"!==e).map(e=>{if(!e||(0,t.isValidElement)(e)&&function(e){let{props:r}=e;return!!r&&"object"==typeof r&&"value"in r}(e))return e;throw Error(`Docusaurus error: Bad <Tabs>

1 child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.`)})?.filter(Boolean)??[]}function p({value:e,tabValues:r}){return r.some(r=>r.value===e)}var f=n(8094);function v({className:e,block:r,selectedValue:n,selectValue:t,tabValues:s}){let l=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.a_)(),u=e=>{let r=e.currentTarget,o=s[l.indexOf(r)].value;o!==n&&(c(r),t(o))},d=e=>{let r=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{let n=l.indexOf(e.currentTarget)+1;r=l[n]??l[0];break}case"ArrowLeft":{let n=l.indexOf(e.currentTarget)-1;r=l[n]??l[l.length-1]}}r?.focus()};return(0,o.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,i.A)("tabs",{"tabs--block":r},e),children:s.map(({value:e,label:r,attributes:t})=>(0,o.jsx)("li",{role:"tab",tabIndex:n===e?0:-1,"aria-selected":n===e,ref:e=>{l.push(e)},onKeyDown:d,onClick:u,...t,className:(0,i.A)("tabs__item","tabItem_LNqP",t?.className,{"tabs__item--active":n===e}),children:r??e},e))})}function w({lazy:e,children:r,selectedValue:n}){let s=(Array.isArray(r)?r:[r]).filter(Boolean);if(e){let e=s.find(e=>e.props.value===n);return e?(0,t.cloneElement)(e,{className:(0,i.A)("margin-top--md",e.props.className)}):null}return(0,o.jsx)("div",{className:"margin-top--md",children:s.map((e,r)=>(0,t.cloneElement)(e,{key:r,hidden:e.props.value!==n}))})}function b(e){let r=function(e){let r,{defaultValue:n,queryString:o=!1,groupId:i}=e,s=function(e){let{values:r,children:n}=e;return(0,t.useMemo)(()=>{let e=r??m(n).map(({props:{value:e,label:r,attributes:n,default:o}})=>({value:e,label:r,attributes:n,default:o})),o=(0,d.XI)(e,(e,r)=>e.value===r.value);if(o.length>0)throw Error(`Docusaurus error: Duplicate values "${o.map(e=>e.value).join(", ")}" found in <Tabs>. Every value needs to be unique.`);return e},[r,n])}(e),[a,f]=(0,t.useState)(()=>(function({defaultValue:e,tabValues:r}){if(0===r.length)throw Error("Docusaurus error: the <Tabs> component requires at least one <TabItem> children component");if(e){if(!p({value:e,tabValues:r}))throw Error(`Docusaurus error: The <Tabs> has a defaultValue "${e}" but none of its children has the corresponding value. Available values are: ${r.map(e=>e.value).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return e}let n=r.find(e=>e.default)??r[0];if(!n)throw Error("Unexpected error: 0 tabValues");return n.value})({defaultValue:n,tabValues:s})),[v,w]=function({queryString:e=!1,groupId:r}){let n=(0,l.W6)(),o=function({queryString:e=!1,groupId:r}){if("string"==typeof e)return e;if(!1===e)return null;if(!0===e&&!r)throw Error('Docusaurus error: The <Tabs> component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return r??null}({queryString:e,groupId:r});return[(0,u.aZ)(o),(0,t.useCallback)(e=>{if(!o)return;let r=new URLSearchParams(n.location.search);r.set(o,e),n.replace({...n.location,search:r.toString()})},[o,n])]}({queryString:o,groupId:i}),[b,k]=function({groupId:e}){let r=e?`docusaurus.tab.${e}`:null,[n,o]=(0,h.Dv)(r);return[n,(0,t.useCallback)(e=>{r&&o.set(e)},[r,o])]}({groupId:i}),x=p({value:r=v??b,tabValues:s})?r:null;return(0,c.A)(()=>{x&&f(x)},[x]),{selectedValue:a,selectValue:(0,t.useCallback)(e=>{if(!p({value:e,tabValues:s}))throw Error(`Can't select invalid tab value=${e}`);f(e),w(e),k(e)},[w,k,s]),tabValues:s}}(e);return(0,o.jsxs)("div",{className:(0,i.A)(s.G.tabs.container,"tabs-container","tabList__CuJ"),children:[(0,o.jsx)(v,{...r,...e}),(0,o.jsx)(w,{...r,...e})]})}function k(e){let r=(0,f.A)();return(0,o.jsx)(b,{...e,children:m(e.children)},String(r))}},8453(e,r,n){n.d(r,{R:()=>s,x:()=>a});var o=n(6540);let t={},i=o.createContext(t);function s(e){let r=o.useContext(i);return o.useMemo(function(){return"function"==typeof e?e(r):{...r,...e}},[r,e])}function a(e){let r;return r=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:s(e.components),o.createElement(i.Provider,{value:r},e.children)}}}]);