{"_id":"@agorarte/rte-controller-react-native","_rev":"2-80b67f40d1f33f29aedc3bb5b50fbcc2","name":"@agorarte/rte-controller-react-native","dist-tags":{"latest":"0.4.0-alpha.2"},"versions":{"0.4.0-alpha.2":{"name":"@agorarte/rte-controller-react-native","version":"0.4.0-alpha.2","main":"lib/index.js","description":"RTE UI controller is a module to be used in the UI resource itself to facilitate the integration with RTE world.","license":"MIT","private":false,"keywords":["rte-controller-react-native"],"author":{"name":"xiaqin@agora.io"},"dependencies":{"react-native-flex-layout":"^0.1.5","rte-controller-base":"0.4.0-alpha.1"},"scripts":{"build:debug":"webpack --config ./webpack/webpack.debug.js","build":"webpack --config ./webpack/webpack.prod.js","package":"chmod +x package.sh && ./package.sh"},"publishConfig":{"access":"public"},"devDependencies":{"@babel/core":"^7.18.13","@babel/plugin-proposal-class-properties":"^7.18.6","@babel/plugin-proposal-decorators":"^7.18.10","@babel/preset-env":"^7.18.10","@babel/preset-react":"^7.18.6","@babel/runtime":"^7.18.9","@types/jest":"^28.1.8","@types/lodash":"^4.14.184","@types/react":"^17.0.48","@types/react-native":"^0.67.12","@types/react-test-renderer":"^17.0.2","@typescript-eslint/eslint-plugin":"^5.35.1","@typescript-eslint/parser":"^5.35.1","babel-core":"^6.26.3","babel-jest":"^29.0.0","babel-loader":"^8.2.5","babel-plugin-module-resolver":"^4.1.0","chokidar-cli":"^3.0.0","clean-webpack-plugin":"^4.0.0","eslint":"^8.22.0","http-server":"^14.1.1","jest":"^29.0.0","metro-react-native-babel-preset":"^0.72.1","react":"17.0.2","react-native":"^0.68.3","react-test-renderer":"17.0.2","thread-loader":"^3.0.4","ts-loader":"^9.3.1","typescript":"^4.8.2","webpack":"5.73.0","webpack-cli":"^4.10.0","webpackbar":"^5.0.2"},"peerDependencies":{"react":"*","react-native":"*"},"resolutions":{"@types/react":"^17"},"types":"./lib/index.d.ts","gitHead":"8aa8fa8055d3cb53d071640fdf6931253b6a7d50","_id":"@agorarte/rte-controller-react-native@0.4.0-alpha.2","_nodeVersion":"18.9.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-D5sE6rmYdYiflble7oH444kPoT9AIL3B2t5qTTmWdb1GprTaJaT5w2cG9roWB6o9p6n6EWlS54LjllE87qn3Fg==","shasum":"6397ae18f87e4541a4a5633e791f7f5bc00987ea","tarball":"https://registry.npmjs.org/@agorarte/rte-controller-react-native/-/rte-controller-react-native-0.4.0-alpha.2.tgz","fileCount":12,"unpackedSize":227478,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDokXARenO6H6/4MFCoV73IeWZ13SfKks6DjBqMvf9yOAiEAiUjMrZUp9Uez8H4/ey2Y0YWza2lzQWu+XcM5hc8khcg="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLnq7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq1GRAAnmrdgq40em24B5+PrBpKx4qdRBj8+a2gk1wg93WqCDaTgshR\r\ndrPaTmtlHTNIFdwfHayKFjocEkpyUk1Fa8dQrezy2kixPT8T4dnshSALD2h9\r\nisWU1l6nL3uTGLrJFe2VxXwOHH/IKC4s6FGYECN8fMu0KQ/UbY4hECFANSZK\r\npNzqT2/ZmXc4S0o7Eq+doVop4GVlvffXxsHON8Xhbbl4OgFrR9Mx2OBdn58v\r\nnBSxZ1mLTeNAo4h27Vf35YBa3BgbyMPkGFrO4ARyH1njqlpbZlwPRoDeq9L8\r\nBDXhKEKcRhwhtvm9iSoi1n3cQsKrQe1Xzvnvx3K7V1dObXRbjcMm0EfZ9DNk\r\nDAahiXWDWwyqPoLLOrT3G/fvCVx8KLiFIzDVAvdsbiopY6Qm+ak7Ce9+je0I\r\nBgDS/9sI3Fx/WWoj7deGAwK1I57jSKcFl5w6rZcfiuZAMSc7TGdBBvDhP+bt\r\nsNvG3iZjwY+/l+lDEzb19R/+CJrQnrJEd2jpwhJNAOFlMxCek+QZ/znvYrGV\r\nP8WQHKkgn9BBZtAIlYJW5rav0osrmpI6Lyg5xnrXwDJEfBQtcl/0EcnMrQl8\r\nKiabKuq/eKxnjGlglTGLDUTp3egOMIWAMZ5lb44ECb9Hpssn83bXRETAq0yG\r\nhfQiD+Rv3bSUIkFFQN5fIiY8VrytXWDSL04=\r\n=6V5I\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"halajohn","email":"wei.hu.tw@gmail.com"},"directories":{},"maintainers":[{"name":"halajohn","email":"wei.hu.tw@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rte-controller-react-native_0.4.0-alpha.2_1663990459192_0.0666742653394623"},"_hasShrinkwrap":false}},"time":{"created":"2022-09-24T03:34:19.114Z","0.4.0-alpha.2":"2022-09-24T03:34:19.393Z","modified":"2022-09-25T13:15:28.076Z"},"maintainers":[{"email":"sunxilin@agora.io","name":"liziyuanzzz"},{"email":"renjingui@agora.io","name":"conqueror123"},{"email":"wei.hu.tw@gmail.com","name":"halajohn"}],"description":"RTE UI controller is a module to be used in the UI resource itself to facilitate the integration with RTE world.","keywords":["rte-controller-react-native"],"author":{"name":"xiaqin@agora.io"},"license":"MIT","readme":"# rte-controller-react-native\n\nRTE UI controller is a module to be used in the UI resource itself to facilitate the integration with RTE world.\n\n## How to Use?\n\n### Install\n\n```bash\ncd path/to/your project\nnpm i rte-controller-react-native --save-dev\n```\n\n### Use\n\n#### Create RteContext instance\n\n```typescript\nimport { createDefaultRteContext } from \"rte-controller-base\";\n\n// We need to init RteContext before rendering any widget.\nconst rteContext = await createDefaultRteContext({\n  uri: \"http://192.168.0.104:8001/\",\n  graph_id: \"0\",\n  extension_group: \"default_ui_gateway_extension_ts_group\",\n  extension: \"default_ui_gateway_extension_ts\",\n});\n```\n\n#### Use with RTE layout template\n\n```react\nimport { RteLayoutComp } from \"rte-controller-react-native\";\n\nreturn (\n  <RteLayoutComp rteContext={rteContext} />\n);\n```\n\n#### Use with your own layouts\n\n```React\nimport {\n  RteLayoutRenderOptions,\n  ExtensionContainer,\n} from \"rte-controller-react-native\";\n\nreturn (\n  <View\n    style={{\n      width: \"200px\",\n    }}\n  >\n    <ExtensionContainer\n      extension=\"default_ui_extension_ts\"\n      rteContext={rteContext}\n      options={options}\n    />\n  </View>\n);\n```\n\nYou can use `widgetProps` in `ExtensionContainer` to define any props, which will be passed to the widget component directly.\n\n#### Customize the timing of receiving message\n\nBy default, rte-controller will start to receive message when all the widgets are mounted.\n\nYou can customize with `setWidgetMountedListener()` in `RteContext`. For example:\n\n```typescript\nimport {\n  RteContext,\n  RteUiWidgetInfo,\n} from '@agorarte/rte-controller';\n\nrteContext.setWidgetMountedListener(\n  (\n    rteContext: RteContext,\n    widget: RteUiWidgetInfo,\n    error?: Error,\n  ): void => {\n    console.log(\n      `The widget is ready, ${JSON.stringify(widget)}, error: ${error}`,\n    );\n\n    // Calling 'readyToReceiveExtensionMessage()' to open the message channel between the App and RTE Extension, and will receive events from RTE Extension if any.\n    setTimeout(() => {\n      rteContext.readyToReceiveExtensionMessage();\n    }, 5000);\n  },\n);\n```\n\n> Keep in mind that you have to call `readyToReceiveExtensionMessage()` yourself when the App is ready to receive messages from RTE Extension.\n\n#### Subscribe events\n\nYou can subscribe event from RTE Extension like the UI Widget with `subscribeEvent()` in `RteContext`. For example:\n\n```typescript\nrteContext.subscribeEvent({\n  extension: 'default_ui_extension_ts',\n  handler: (msg: RteUiWidgetMsg) => {\n    console.log(\n      `Receive message from default_ui_extension_ts: ${JSON.stringify(\n        msg,\n      )}`,\n    );\n  },\n});\n```\n\nThe `extension` and `type` are used to filter the events, you have to specify at least one. And of course, you can specify both of them.\n\nAnd you can use `unsubscribeEvent()` to cancel the subscription.\n","readmeFilename":"readme.md"}