{"id":20393356,"url":"https://github.com/foxitsoftware/foxitpdfsdkforweb-reactnative-example","last_synced_at":"2026-05-11T09:45:46.233Z","repository":{"id":75785249,"uuid":"598022759","full_name":"foxitsoftware/FoxitPDFSDKForWeb-ReactNative-Example","owner":"foxitsoftware","description":null,"archived":false,"fork":false,"pushed_at":"2024-07-02T01:22:47.000Z","size":605,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-01-15T10:28:22.581Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/foxitsoftware.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-02-06T08:24:53.000Z","updated_at":"2024-07-02T01:22:51.000Z","dependencies_parsed_at":null,"dependency_job_id":"359b9863-fb5a-4778-8b12-1efc37b4fd45","html_url":"https://github.com/foxitsoftware/FoxitPDFSDKForWeb-ReactNative-Example","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foxitsoftware%2FFoxitPDFSDKForWeb-ReactNative-Example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foxitsoftware%2FFoxitPDFSDKForWeb-ReactNative-Example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foxitsoftware%2FFoxitPDFSDKForWeb-ReactNative-Example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foxitsoftware%2FFoxitPDFSDKForWeb-ReactNative-Example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/foxitsoftware","download_url":"https://codeload.github.com/foxitsoftware/FoxitPDFSDKForWeb-ReactNative-Example/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241942777,"owners_count":20046428,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-15T03:48:21.290Z","updated_at":"2026-05-11T09:45:41.190Z","avatar_url":"https://github.com/foxitsoftware.png","language":"Java","funding_links":[],"categories":[],"sub_categories":[],"readme":"# FoxitPDFSDK for Web Example - React Native\n\nThese guides are divided into two parts:\n\n- [Part 1: How to run this example](#part-1-how-to-run-this-example)\n- [Part 2: How to use FoxitPDFSDK for Web in React Native](#part-2-how-to-use-foxitpdfsdk-for-web-in-react-native)\n\n## Prerequisites\n\n- [Android Studio](https://developer.android.com/studio) or [XCode](https://developer.apple.com/xcode/)\n\n## System requirements\n\n- react-native \u003e= 0.71.7 and React Native CLI.\n- react-native-webview \u003e= 11.26.0\n- @foxitsoftware/foxit-pdf-sdk-for-web-library \u003e= 9.0.0\n\n## Part 1: How to run this example\n\n### 1. Setting up the development environment\n\nFollow the React Native guide to [set up the development environment](https://reactnative.dev/docs/environment-setup).\n\n### 2. Installation dependencies\n\nAssume you've cloned project into the `RNWebSDKExample` directory.\n\n#### a. Nodejs dependencies\n\nNavigate to `RNWebSDKExample`, and execute:\n\n```bash\nnpm install\n```\n\n#### b. Android dependencies\n\nNavigate to `RNWebSDKExample/android`, and execute:\n\n```bash\n# win\ngradlew build\n# mac, linux\n./gradlew build\n```\n\nExecute \"chmod +x gradlew\" if you don't have permission.\n\n#### c. iOS dependencies\n\nNavigate to `RNWebSDKExample/ios`, and execute:\n\n```bash\npod install\n```\n\n### 3. Integrate Foxit PDF SDK for Web\n\n#### 3.1. Copy the following directories to the `RNWebSDKExample/html/Web.bundle`.\n\n- node_modules/@foxitsoftware/foxit-pdf-sdk-for-web-library/lib\n\n#### 3.2. Update the licenseSN and licenseKey\n\nUpdate the licenseSN and licenseKey values in `RNWebSDKExample/html/Web.bundle/index.html` with your own licenseSN and licenseKey that you received from sales.\n\n### 4. Running the example\n\n#### Android\n\n1. Start the Metro service, navigate to `RNWebSDKExample`, and execute:\n```bash\nnpx react-native start\n```\n\n2. Start the Android Emulator.\n3. Run the app, and in the new terminal, navigate to `RNWebSDKExample` and execute:\n\n```bash\nnpx react-native run-android\n```\n\nWait for some time and your application will be automatically installed and launched in the Android emulator.\n\n#### iOS\n\n1. Start the Metro service, navigate to `RNWebSDKExample` and execute:\n\n```bash\nnpx react-native start\n```\n\n2. Run the app, and in the new terminal, navigate to `RNWebSDKExample` and execute:\n\n```bash\nnpx react-native run-ios\n```\n\nWait for some time and your application will be automatically installed and launched in the Android emulator.\n\n## Part 2: How to use Foxit PDF SDK for Web in React Native\n\n### 1. Setting up the development environment\n\nFollow the React Native guide to [set up the development environment](https://reactnative.dev/docs/environment-setup).\n\nAssume you've created a project named `RNWebSDKExample`.\n\n### 2. Integrate Foxit PDF SDK for Web\n\n#### 2.1 Install dependence.\n```shell\ncd RNWebSDKExample\nnpm install @foxitsoftware/foxit-pdf-sdk-for-web-library react-native-webview react-native-fs\n```\n\n##### iOS\n```shell\ncd ios\npod install\n```\n\n##### Android\n```shell\ncd android\n# win\ngradlew build\n# mac, linux\n./gradlew build\n```\n\n#### 2.2 Create a Web resource directory\n\n1. New an `html` directory in the `RNWebSDKExample` and new a `Web.bundle` folder inside the `html` directory.\n2. Copy the following directories to the `RNWebSDKExample/html/Web.bundle`.\n\n- node_modules/@foxitsoftware/foxit-pdf-sdk-for-web-library/lib\n\n3. Copy the `index.html` file to the `RNWebSDKExample/html/Web.bundle` directory.\n\n```html\n\u003chtml\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"utf-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width,initial-scale=1,user-scalable=0\"\u003e\n    \u003cmeta http-equiv=\"Service-Worker-Allowed\" content=\"*\"\u003e\n    \u003clink rel=\"stylesheet\" type=\"text/css\" href=\"./lib/UIExtension.css\"\u003e\n    \u003cstyle\u003e\n        html {\n            overflow: hidden;\n        }\n        body {\n            height: 100vh;\n        }\n        #pdf-ui {\n            top: 40px;\n            bottom: 0;\n            position: absolute;\n            width: 100vw;\n        }\n    \u003c/style\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\u003cdiv class=\"fv__ui-nav\"\u003e\n    \u003cdiv class=\"fv__ui-nav-logo\"\u003e\n        \u003ci class=\"fv__icon-logo\"\u003e\u003c/i\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv id=\"pdf-ui\"\u003e\u003c/div\u003e\n\n\u003cscript src=\"./lib/UIExtension.full.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"./lib/preload-jr-worker.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n    const licenseSN = 'xxx';\n    const licenseKey = 'xxx';\n    \n    const readyWorker = preloadJrWorker({\n        workerPath: './lib/',\n        enginePath: '../lib/jr-engine/gsdk',\n        fontPath: 'http://webpdf.foxitsoftware.com/webfonts/',\n        licenseSN: licenseSN,\n        licenseKey: licenseKey\n    });\n\n    const PDFUI = UIExtension.PDFUI;\n    const pdfui = new PDFUI({\n        viewerOptions: {\n            libPath: './lib',\n            jr: {\n                readyWorker: readyWorker\n            }\n        },\n        renderTo: '#pdf-ui',\n        appearance: UIExtension.appearances.adaptive,\n        fragments: [],\n        addons: './lib/uix-addons/allInOne.mobile.js'\n    });\n\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n4. Update the licenseSN and licenseKey values in `RNWebSDKExample/html/Web.bundle/index.html` with your own licenseSN and licenseKey that you received from sales.\n\n#### 2.3 Set up Web resource directory\n\n##### Android\n\n1. Open the directory `RNWebSDKExample/android` using Android Studio.\n2. Update `RNWebSDKExample/android/app/build.gradle` as follows.\n\n```diff\n// ...\nandroid {\n    // ...\n+    sourceSets {\n+        main {\n+            assets.srcDirs = ['src/main/assets', '../../html']\n+        }\n+    }\n}\n```\n\n##### iOS\n\n1. Open the `RNWebSDKExample/ios/RNWebSDK.xcworkspace` with XCode.\n2. Expand the left directory tree `RNWebSDKExample/RNWebSDKExample`, drag and drop `RNWebSDKExample/html/Web.bundle` to the directory tree `RNWebSDKExample/RNWebSDKExample`, in the window that pops up, do not check \"Copy items if needed\" and click \"Finish\" button.\n\n#### 2.4 Use webview to load and render the Foxit PDF SDK for Web\n\nThere are two ways to load a Web page in a webview, one is to load a URL like this:\n\n```tsx\n\u003cWebView\n    source={{uri: 'https://www.xxx.com'}}\n    originWhitelist={['*']}\n/\u003e\n```\n\nThe other is to load local Web resources, which we will use in the following.\n\n1. Create a `src` directory in the `RNWebSDKExample` directory and add the `App.tsx` file to the `src`directory.\n\n```tsx\nimport React, { createRef } from 'react';\nimport {\n  Platform,\n  SafeAreaView,\n  StatusBar,\n  View\n} from 'react-native';\nimport { WebView } from 'react-native-webview';\nimport type { ShouldStartLoadRequest } from 'react-native-webview/lib/WebViewTypes';\nimport RNFS from 'react-native-fs';\nimport { WebViewMessageEvent } from 'react-native-webview/lib/WebViewTypes';\n\nfunction App(): JSX.Element {\n\n  const sourceUri = (Platform.OS === 'android' ? 'file:///android_asset/' : '') + 'Web.bundle/index.html';\n  const userAgent = 'Mozilla/5.0 (iPhone; CPU iPhone OS 16_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/113.0.5672.69 Mobile/15E148 Safari/604.1';\n\n  const webviewRef = createRef\u003cWebView\u003e();\n\n  function onShouldStartLoadWithRequest(event: ShouldStartLoadRequest) {\n    if (event.url.startsWith('blob:') \u0026\u0026 event.navigationType === 'click') {\n      return false;\n    }\n    return true;\n  }\n\n  const injectedJavaScript = `\n    (() =\u003e {\n      const dispatchEventOri = EventTarget.prototype.dispatchEvent;\n      EventTarget.prototype.dispatchEvent = function(event) {\n        const download = this.getAttribute('download');\n        const href = this.getAttribute('href');\n        const rel = this.getAttribute('rel');\n        if (download \u0026\u0026 href.startsWith('blob:') \u0026\u0026 rel === 'noopener') {\n          fetch(href).then(response =\u003e response.blob()).then(blob =\u003e {\n            const reader = new FileReader();\n            reader.onloadend = function() {\n              const data = {\n                type: 'download',\n                payload: {\n                  fileName: download,\n                  base64: reader.result,\n                }\n              };\n              window.ReactNativeWebView.postMessage(JSON.stringify(data));\n            }\n            reader.readAsDataURL(blob);\n          });\n        } else {\n          dispatchEventOri.call(this, event)\n        }\n      }\n    })();\n  `;\n\n  function onMessage(event: WebViewMessageEvent) {\n    const data = JSON.parse(event.nativeEvent.data);\n    if (data.type === 'download') {\n      let {base64, fileName} = data.payload;\n      base64 = base64.split('base64,')[1];\n      const path = Platform.OS === 'ios' ? RNFS.DocumentDirectoryPath : RNFS.DownloadDirectoryPath;\n      const toFile = `${path}/${fileName}`;\n      RNFS.writeFile(toFile, base64, 'base64');\n    }\n  }\n\n  return (\n    \u003cSafeAreaView\u003e\n      \u003cStatusBar/\u003e\n      \u003cView style={{width: '100%', height: '100%'}}\u003e\n        \u003cWebView\n          source={{uri: sourceUri}}\n          originWhitelist={['*']}\n          allowFileAccessFromFileURLs={true}\n          allowUniversalAccessFromFileURLs={true}\n          allowFileAccess={true}\n          userAgent={userAgent}\n          onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}\n          injectedJavaScript={injectedJavaScript}\n          onMessage={onMessage}\n          ref={webviewRef}\n        /\u003e\n      \u003c/View\u003e\n    \u003c/SafeAreaView\u003e\n  );\n}\n\nexport default App;\n```\n\n2. Update `RNWebSDKExample/index.js` as follows.\n\n```diff\nimport {AppRegistry} from 'react-native';\n- import App from './App';\n+ import App from './src/App';\nimport {name as appName} from './app.json';\n \nAppRegistry.registerComponent(appName, () =\u003e App);\n```\n\n#### 2.5 Set APP permissions\n\n##### iOS\n\nUpdate `RNWebSDKExample/ios/RNWebSDK/Info.plist` as follows.\n```diff\n\u003cdict\u003e\n    // ...\n+   \u003ckey\u003eUIFileSharingEnabled\u003c/key\u003e\n+   \u003ctrue/\u003e\n+   \u003ckey\u003eLSSupportsOpeningDocumentsInPlace\u003c/key\u003e\n+   \u003ctrue/\u003e\n+   \u003ckey\u003eNSCameraUsageDescription\u003c/key\u003e\n+   \u003cstring\u003e$(PRODUCT_NAME) need access to your camera.\u003c/string\u003e\n    // ...\n\u003c/dict\u003e\n```\n\n##### Android\nUpdate `RNWebSDKExample/android/app/src/main/AndroidManifest.xml` as follows.\n```diff\n\u003cmanifest xmlns:android=\"http://schemas.android.com/apk/res/android\"\u003e\n    // ...\n    \u003cuses-permission android:name=\"android.permission.INTERNET\" /\u003e\n+   \u003cuses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\" /\u003e\n+   \u003cuses-permission android:name=\"android.permission.READ_EXTERNAL_STORAGE\" /\u003e\n    // ...\n\u003c/manifest\u003e\n```\n\n#### 2.6 Running the project\n\n##### Android\n\n1. Start the Metro service, navigate to `RNWebSDKExample`, and execute:\n\n```bash\nnpx react-native start\n```\n\n2. Start Android Emulator.\n3. Run the app, and in the new terminal, navigate to `RNWebSDKExample`and execute:\n\n```bash\nnpx react-native run-android\n```\n\nWait for some time and your application will be automatically installed and launched in the Android emulator.\n\n##### iOS\n\n1. Start the Metro service, navigate to `RNWebSDKExample` and execute:\n\n```bash\nnpx react-native start\n```\n\n2. Run the app, and in the new terminal, navigate to `RNWebSDKExample` and execute:\n\n```bash\nnpx react-native run-ios\n```\n\nWait for some time and your application will be automatically installed and launched in the Android emulator.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffoxitsoftware%2Ffoxitpdfsdkforweb-reactnative-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffoxitsoftware%2Ffoxitpdfsdkforweb-reactnative-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffoxitsoftware%2Ffoxitpdfsdkforweb-reactnative-example/lists"}