diff --git a/404.html b/404.html index f8b2347..12d57bb 100644 --- a/404.html +++ b/404.html @@ -7,13 +7,13 @@ - +
Skip to main content

Page Not Found

We could not find what you were looking for.

Please contact the owner of the site that linked you to the original URL and let them know their link is broken.

- + \ No newline at end of file diff --git a/assets/js/7402041a.7a3d8131.js b/assets/js/7402041a.7638dbdf.js similarity index 85% rename from assets/js/7402041a.7a3d8131.js rename to assets/js/7402041a.7638dbdf.js index df4131f..a4a786e 100644 --- a/assets/js/7402041a.7a3d8131.js +++ b/assets/js/7402041a.7638dbdf.js @@ -1 +1 @@ -"use strict";(self.webpackChunkreact_native_android_widget_docs=self.webpackChunkreact_native_android_widget_docs||[]).push([[9557],{3905:(e,t,n)=>{n.d(t,{Zo:()=>s,kt:()=>g});var r=n(7294);function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function d(e){for(var t=1;t=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}var p=r.createContext({}),l=function(e){var t=r.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):d(d({},t),e)),n},s=function(e){var t=l(e.components);return r.createElement(p.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},c=r.forwardRef((function(e,t){var n=e.components,i=e.mdxType,a=e.originalType,p=e.parentName,s=o(e,["components","mdxType","originalType","parentName"]),c=l(n),g=i,m=c["".concat(p,".").concat(g)]||c[g]||u[g]||a;return n?r.createElement(m,d(d({ref:t},s),{},{components:n})):r.createElement(m,d({ref:t},s))}));function g(e,t){var n=arguments,i=t&&t.mdxType;if("string"==typeof e||i){var a=n.length,d=new Array(a);d[0]=c;var o={};for(var p in t)hasOwnProperty.call(t,p)&&(o[p]=t[p]);o.originalType=e,o.mdxType="string"==typeof e?e:i,d[1]=o;for(var l=2;l{n.r(t),n.d(t,{assets:()=>p,contentTitle:()=>d,default:()=>u,frontMatter:()=>a,metadata:()=>o,toc:()=>l});var r=n(7462),i=(n(7294),n(3905));const a={sidebar_position:4,sidebar_label:"Update Widget"},d="Update Widget",o={unversionedId:"update-widget",id:"update-widget",title:"Update Widget",description:"There are two ways to update a widget once it is added on the home screen.",source:"@site/docs/update-widget.md",sourceDirName:".",slug:"/update-widget",permalink:"/react-native-android-widget/docs/update-widget",draft:!1,editUrl:"https://github.com/sAleksovski/react-native-android-widget/tree/master/docs/docs/update-widget.md",tags:[],version:"current",sidebarPosition:4,frontMatter:{sidebar_position:4,sidebar_label:"Update Widget"},sidebar:"default",previous:{title:"SvgWidget",permalink:"/react-native-android-widget/docs/primitives/svg-widget"},next:{title:"Handling Clicks",permalink:"/react-native-android-widget/docs/handling-clicks"}},p={},l=[{value:"updatePeriodMillis",id:"updateperiodmillis",level:2},{value:"requestWidgetUpdate",id:"requestwidgetupdate",level:2}],s={toc:l};function u(e){let{components:t,...n}=e;return(0,i.kt)("wrapper",(0,r.Z)({},s,n,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("h1",{id:"update-widget"},"Update Widget"),(0,i.kt)("p",null,"There are two ways to update a widget once it is added on the home screen."),(0,i.kt)("h2",{id:"updateperiodmillis"},"updatePeriodMillis"),(0,i.kt)("p",null,"Schedule updates using ",(0,i.kt)("inlineCode",{parentName:"p"},"android:updatePeriodMillis")," (or ",(0,i.kt)("inlineCode",{parentName:"p"},"updatePeriodMillis")," with Expo)"),(0,i.kt)("p",null,"When using this option, the ",(0,i.kt)("inlineCode",{parentName:"p"},"widgetTaskHandler")," function will be called with ",(0,i.kt)("inlineCode",{parentName:"p"},"widgetAction = 'WIDGET_UPDATE'"),", and you can use it to update the widget."),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js",metastring:'title="widget-task-handler.tsx"',title:'"widget-task-handler.tsx"'},"export async function widgetTaskHandler(props: WidgetTaskHandlerProps) {\n\n switch (props.widgetAction) {\n ...\n\n case 'WIDGET_UPDATE':\n props.renderWidget();\n break;\n\n ...\n }\n}\n")),(0,i.kt)("admonition",{title:"Note",type:"info"},(0,i.kt)("p",{parentName:"admonition"},"Updates requested with updatePeriodMillis will not be delivered more than once every 30 minutes.")),(0,i.kt)("p",null,"More details about ",(0,i.kt)("inlineCode",{parentName:"p"},"updatePeriodMillis")," on the ",(0,i.kt)("a",{parentName:"p",href:"https://developer.android.com/reference/android/appwidget/AppWidgetProviderInfo.html#updatePeriodMillis"},"official documentation"),"."),(0,i.kt)("h2",{id:"requestwidgetupdate"},"requestWidgetUpdate"),(0,i.kt)("p",null,"You can call ",(0,i.kt)("a",{parentName:"p",href:"/react-native-android-widget/docs/api/request-widget-update"},(0,i.kt)("inlineCode",{parentName:"a"},"requestWidgetUpdate"))," any time when your app is open, as a reuslt of some user action, and request a widget update."),(0,i.kt)("p",null,"Scheduling a widget update using ",(0,i.kt)("inlineCode",{parentName:"p"},"android:updatePeriodMillis")," is out of scope for this library."))}u.isMDXComponent=!0}}]); \ No newline at end of file +"use strict";(self.webpackChunkreact_native_android_widget_docs=self.webpackChunkreact_native_android_widget_docs||[]).push([[9557],{3905:(e,t,n)=>{n.d(t,{Zo:()=>s,kt:()=>g});var r=n(7294);function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function d(e){for(var t=1;t=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}var p=r.createContext({}),l=function(e){var t=r.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):d(d({},t),e)),n},s=function(e){var t=l(e.components);return r.createElement(p.Provider,{value:t},e.children)},c={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},u=r.forwardRef((function(e,t){var n=e.components,i=e.mdxType,a=e.originalType,p=e.parentName,s=o(e,["components","mdxType","originalType","parentName"]),u=l(n),g=i,m=u["".concat(p,".").concat(g)]||u[g]||c[g]||a;return n?r.createElement(m,d(d({ref:t},s),{},{components:n})):r.createElement(m,d({ref:t},s))}));function g(e,t){var n=arguments,i=t&&t.mdxType;if("string"==typeof e||i){var a=n.length,d=new Array(a);d[0]=u;var o={};for(var p in t)hasOwnProperty.call(t,p)&&(o[p]=t[p]);o.originalType=e,o.mdxType="string"==typeof e?e:i,d[1]=o;for(var l=2;l{n.r(t),n.d(t,{assets:()=>p,contentTitle:()=>d,default:()=>c,frontMatter:()=>a,metadata:()=>o,toc:()=>l});var r=n(7462),i=(n(7294),n(3905));const a={sidebar_position:4,sidebar_label:"Update Widget"},d="Update Widget",o={unversionedId:"update-widget",id:"update-widget",title:"Update Widget",description:"There are two ways to update a widget once it is added on the home screen.",source:"@site/docs/update-widget.md",sourceDirName:".",slug:"/update-widget",permalink:"/react-native-android-widget/docs/update-widget",draft:!1,editUrl:"https://github.com/sAleksovski/react-native-android-widget/tree/master/docs/docs/update-widget.md",tags:[],version:"current",sidebarPosition:4,frontMatter:{sidebar_position:4,sidebar_label:"Update Widget"},sidebar:"default",previous:{title:"SvgWidget",permalink:"/react-native-android-widget/docs/primitives/svg-widget"},next:{title:"Handling Clicks",permalink:"/react-native-android-widget/docs/handling-clicks"}},p={},l=[{value:"updatePeriodMillis",id:"updateperiodmillis",level:2},{value:"requestWidgetUpdate",id:"requestwidgetupdate",level:2}],s={toc:l};function c(e){let{components:t,...n}=e;return(0,i.kt)("wrapper",(0,r.Z)({},s,n,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("h1",{id:"update-widget"},"Update Widget"),(0,i.kt)("p",null,"There are two ways to update a widget once it is added on the home screen."),(0,i.kt)("h2",{id:"updateperiodmillis"},"updatePeriodMillis"),(0,i.kt)("p",null,"Schedule updates using ",(0,i.kt)("inlineCode",{parentName:"p"},"android:updatePeriodMillis")," (or ",(0,i.kt)("inlineCode",{parentName:"p"},"updatePeriodMillis")," with Expo)"),(0,i.kt)("p",null,"When using this option, the ",(0,i.kt)("inlineCode",{parentName:"p"},"widgetTaskHandler")," function will be called with ",(0,i.kt)("inlineCode",{parentName:"p"},"widgetAction = 'WIDGET_UPDATE'"),", and you can use it to update the widget."),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js",metastring:'title="widget-task-handler.tsx"',title:'"widget-task-handler.tsx"'},"export async function widgetTaskHandler(props: WidgetTaskHandlerProps) {\n\n switch (props.widgetAction) {\n ...\n\n case 'WIDGET_UPDATE':\n props.renderWidget();\n break;\n\n ...\n }\n}\n")),(0,i.kt)("admonition",{title:"Note",type:"info"},(0,i.kt)("p",{parentName:"admonition"},"Updates requested with updatePeriodMillis will not be delivered more than once every 30 minutes.")),(0,i.kt)("p",null,"More details about ",(0,i.kt)("inlineCode",{parentName:"p"},"updatePeriodMillis")," on the ",(0,i.kt)("a",{parentName:"p",href:"https://developer.android.com/reference/android/appwidget/AppWidgetProviderInfo.html#updatePeriodMillis"},"official documentation"),"."),(0,i.kt)("h2",{id:"requestwidgetupdate"},"requestWidgetUpdate"),(0,i.kt)("p",null,"You can call ",(0,i.kt)("a",{parentName:"p",href:"/react-native-android-widget/docs/api/request-widget-update"},(0,i.kt)("inlineCode",{parentName:"a"},"requestWidgetUpdate"))," any time when your app is open as a result of some user action, and request a widget update."))}c.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/runtime~main.cfe9877e.js b/assets/js/runtime~main.f4484ee0.js similarity index 99% rename from assets/js/runtime~main.cfe9877e.js rename to assets/js/runtime~main.f4484ee0.js index 75b2760..b23e3fa 100644 --- a/assets/js/runtime~main.cfe9877e.js +++ b/assets/js/runtime~main.f4484ee0.js @@ -1 +1 @@ -(()=>{"use strict";var e,a,f,b,d,c={},t={};function r(e){var a=t[e];if(void 0!==a)return a.exports;var f=t[e]={exports:{}};return c[e].call(f.exports,f,f.exports,r),f.exports}r.m=c,e=[],r.O=(a,f,b,d)=>{if(!f){var c=1/0;for(i=0;i=d)&&Object.keys(r.O).every((e=>r.O[e](f[o])))?f.splice(o--,1):(t=!1,d0&&e[i-1][2]>d;i--)e[i]=e[i-1];e[i]=[f,b,d]},r.n=e=>{var a=e&&e.__esModule?()=>e.default:()=>e;return r.d(a,{a:a}),a},f=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,r.t=function(e,b){if(1&b&&(e=this(e)),8&b)return e;if("object"==typeof e&&e){if(4&b&&e.__esModule)return e;if(16&b&&"function"==typeof e.then)return e}var d=Object.create(null);r.r(d);var c={};a=a||[null,f({}),f([]),f(f)];for(var t=2&b&&e;"object"==typeof t&&!~a.indexOf(t);t=f(t))Object.getOwnPropertyNames(t).forEach((a=>c[a]=()=>e[a]));return c.default=()=>e,r.d(d,c),d},r.d=(e,a)=>{for(var f in a)r.o(a,f)&&!r.o(e,f)&&Object.defineProperty(e,f,{enumerable:!0,get:a[f]})},r.f={},r.e=e=>Promise.all(Object.keys(r.f).reduce(((a,f)=>(r.f[f](e,a),a)),[])),r.u=e=>"assets/js/"+({53:"935f2afb",265:"94be2f97",322:"1bb5842c",924:"e73c34ba",1069:"cc1aedd7",1161:"4787fd9f",1188:"aa86ff20",1328:"8d25c1fb",1400:"24767a4f",1408:"5b19e069",1493:"407354e8",1744:"70097127",1785:"17aa6098",1946:"31e029c9",2097:"b0736eaa",2321:"c56934f7",2342:"76085ae1",2386:"d5b87c6b",2814:"74b23640",2934:"0124b8bf",3153:"ff470113",3159:"bcda6bdc",3667:"5d5554be",3814:"5d454204",3895:"17c5701b",4195:"c4f5d8e4",4483:"3666eb9e",5020:"0314676f",5073:"7ad22d07",5087:"1476a8a4",5187:"49b00a7f",5266:"11884ede",5672:"a66dadf2",5710:"4b7010bf",5937:"ff301dc0",6090:"2eb66e86",6117:"82b1394b",6342:"080db9a4",6516:"bcaac1db",6573:"399d2a39",6831:"281947f5",6971:"c377a04b",6998:"334fbae1",7071:"7135efbc",7291:"01e0afe4",7386:"ef61de09",7473:"181303e3",7655:"ead7330c",7679:"a3102611",7918:"17896441",7938:"3fa31a86",8558:"f600eb30",8645:"436fd1e4",8646:"9958a938",8888:"c10b2ba3",8998:"730f732a",9069:"7f5eb84b",9209:"95f41f41",9239:"3a45f1c7",9484:"1cfe139a",9514:"1be78505",9557:"7402041a",9817:"14eb3368",9829:"935b7169",9896:"7d14206d",9945:"adcb0710",9990:"f477c445"}[e]||e)+"."+{53:"4ac1672c",265:"443bdd8f",322:"62406c00",924:"63cab1af",1069:"a3c4fcf5",1161:"73d50786",1188:"85d93bff",1328:"024c7f76",1400:"b7c28857",1408:"0e7de974",1493:"79755485",1744:"889666fc",1785:"0a4f8252",1946:"2d016fba",2097:"2cff9d8f",2321:"faf1a9f9",2342:"476a4b79",2386:"3de748be",2814:"e6072dec",2934:"1d413b6c",3153:"04d4516f",3159:"562db46d",3667:"5dcec4c9",3814:"02dc3d4e",3895:"9aeb7ab4",4195:"12baaed4",4483:"0a1700d1",4972:"38a3e4ab",5020:"f6f8ac51",5073:"7b28f0e5",5087:"a0ba16bc",5187:"69ae74ca",5266:"2c50a5db",5672:"0f795ec7",5710:"5e24f586",5937:"13da1767",6090:"41fe1108",6117:"aea30ef9",6342:"14015309",6516:"a91a3d33",6573:"b5ef2174",6831:"72d83cf6",6971:"ed669e47",6998:"2749aa58",7071:"711dfd1e",7291:"195da2d6",7386:"15b27fe9",7473:"4a701bf9",7655:"a4cb7251",7679:"4e3beeae",7918:"fb29058d",7938:"0941861b",8558:"16cebdc2",8645:"cb23ea6e",8646:"8cb4cff7",8888:"a7397f99",8998:"e08eb934",9069:"f7ee3c77",9209:"0266f9d7",9239:"3551f181",9484:"4573c922",9514:"b9a16d8b",9557:"7a3d8131",9817:"6ba8c834",9829:"f00ef857",9896:"730b3071",9945:"1aa3f7c6",9990:"204df771"}[e]+".js",r.miniCssF=e=>{},r.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),r.o=(e,a)=>Object.prototype.hasOwnProperty.call(e,a),b={},d="react-native-android-widget-docs:",r.l=(e,a,f,c)=>{if(b[e])b[e].push(a);else{var t,o;if(void 0!==f)for(var n=document.getElementsByTagName("script"),i=0;i{t.onerror=t.onload=null,clearTimeout(s);var d=b[e];if(delete b[e],t.parentNode&&t.parentNode.removeChild(t),d&&d.forEach((e=>e(f))),a)return a(f)},s=setTimeout(l.bind(null,void 0,{type:"timeout",target:t}),12e4);t.onerror=l.bind(null,t.onerror),t.onload=l.bind(null,t.onload),o&&document.head.appendChild(t)}},r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.p="/react-native-android-widget/",r.gca=function(e){return e={17896441:"7918",70097127:"1744","935f2afb":"53","94be2f97":"265","1bb5842c":"322",e73c34ba:"924",cc1aedd7:"1069","4787fd9f":"1161",aa86ff20:"1188","8d25c1fb":"1328","24767a4f":"1400","5b19e069":"1408","407354e8":"1493","17aa6098":"1785","31e029c9":"1946",b0736eaa:"2097",c56934f7:"2321","76085ae1":"2342",d5b87c6b:"2386","74b23640":"2814","0124b8bf":"2934",ff470113:"3153",bcda6bdc:"3159","5d5554be":"3667","5d454204":"3814","17c5701b":"3895",c4f5d8e4:"4195","3666eb9e":"4483","0314676f":"5020","7ad22d07":"5073","1476a8a4":"5087","49b00a7f":"5187","11884ede":"5266",a66dadf2:"5672","4b7010bf":"5710",ff301dc0:"5937","2eb66e86":"6090","82b1394b":"6117","080db9a4":"6342",bcaac1db:"6516","399d2a39":"6573","281947f5":"6831",c377a04b:"6971","334fbae1":"6998","7135efbc":"7071","01e0afe4":"7291",ef61de09:"7386","181303e3":"7473",ead7330c:"7655",a3102611:"7679","3fa31a86":"7938",f600eb30:"8558","436fd1e4":"8645","9958a938":"8646",c10b2ba3:"8888","730f732a":"8998","7f5eb84b":"9069","95f41f41":"9209","3a45f1c7":"9239","1cfe139a":"9484","1be78505":"9514","7402041a":"9557","14eb3368":"9817","935b7169":"9829","7d14206d":"9896",adcb0710:"9945",f477c445:"9990"}[e]||e,r.p+r.u(e)},(()=>{var e={1303:0,532:0};r.f.j=(a,f)=>{var b=r.o(e,a)?e[a]:void 0;if(0!==b)if(b)f.push(b[2]);else if(/^(1303|532)$/.test(a))e[a]=0;else{var d=new Promise(((f,d)=>b=e[a]=[f,d]));f.push(b[2]=d);var c=r.p+r.u(a),t=new Error;r.l(c,(f=>{if(r.o(e,a)&&(0!==(b=e[a])&&(e[a]=void 0),b)){var d=f&&("load"===f.type?"missing":f.type),c=f&&f.target&&f.target.src;t.message="Loading chunk "+a+" failed.\n("+d+": "+c+")",t.name="ChunkLoadError",t.type=d,t.request=c,b[1](t)}}),"chunk-"+a,a)}},r.O.j=a=>0===e[a];var a=(a,f)=>{var b,d,c=f[0],t=f[1],o=f[2],n=0;if(c.some((a=>0!==e[a]))){for(b in t)r.o(t,b)&&(r.m[b]=t[b]);if(o)var i=o(r)}for(a&&a(f);n{"use strict";var e,a,f,b,d,c={},t={};function r(e){var a=t[e];if(void 0!==a)return a.exports;var f=t[e]={exports:{}};return c[e].call(f.exports,f,f.exports,r),f.exports}r.m=c,e=[],r.O=(a,f,b,d)=>{if(!f){var c=1/0;for(i=0;i=d)&&Object.keys(r.O).every((e=>r.O[e](f[o])))?f.splice(o--,1):(t=!1,d0&&e[i-1][2]>d;i--)e[i]=e[i-1];e[i]=[f,b,d]},r.n=e=>{var a=e&&e.__esModule?()=>e.default:()=>e;return r.d(a,{a:a}),a},f=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,r.t=function(e,b){if(1&b&&(e=this(e)),8&b)return e;if("object"==typeof e&&e){if(4&b&&e.__esModule)return e;if(16&b&&"function"==typeof e.then)return e}var d=Object.create(null);r.r(d);var c={};a=a||[null,f({}),f([]),f(f)];for(var t=2&b&&e;"object"==typeof t&&!~a.indexOf(t);t=f(t))Object.getOwnPropertyNames(t).forEach((a=>c[a]=()=>e[a]));return c.default=()=>e,r.d(d,c),d},r.d=(e,a)=>{for(var f in a)r.o(a,f)&&!r.o(e,f)&&Object.defineProperty(e,f,{enumerable:!0,get:a[f]})},r.f={},r.e=e=>Promise.all(Object.keys(r.f).reduce(((a,f)=>(r.f[f](e,a),a)),[])),r.u=e=>"assets/js/"+({53:"935f2afb",265:"94be2f97",322:"1bb5842c",924:"e73c34ba",1069:"cc1aedd7",1161:"4787fd9f",1188:"aa86ff20",1328:"8d25c1fb",1400:"24767a4f",1408:"5b19e069",1493:"407354e8",1744:"70097127",1785:"17aa6098",1946:"31e029c9",2097:"b0736eaa",2321:"c56934f7",2342:"76085ae1",2386:"d5b87c6b",2814:"74b23640",2934:"0124b8bf",3153:"ff470113",3159:"bcda6bdc",3667:"5d5554be",3814:"5d454204",3895:"17c5701b",4195:"c4f5d8e4",4483:"3666eb9e",5020:"0314676f",5073:"7ad22d07",5087:"1476a8a4",5187:"49b00a7f",5266:"11884ede",5672:"a66dadf2",5710:"4b7010bf",5937:"ff301dc0",6090:"2eb66e86",6117:"82b1394b",6342:"080db9a4",6516:"bcaac1db",6573:"399d2a39",6831:"281947f5",6971:"c377a04b",6998:"334fbae1",7071:"7135efbc",7291:"01e0afe4",7386:"ef61de09",7473:"181303e3",7655:"ead7330c",7679:"a3102611",7918:"17896441",7938:"3fa31a86",8558:"f600eb30",8645:"436fd1e4",8646:"9958a938",8888:"c10b2ba3",8998:"730f732a",9069:"7f5eb84b",9209:"95f41f41",9239:"3a45f1c7",9484:"1cfe139a",9514:"1be78505",9557:"7402041a",9817:"14eb3368",9829:"935b7169",9896:"7d14206d",9945:"adcb0710",9990:"f477c445"}[e]||e)+"."+{53:"4ac1672c",265:"443bdd8f",322:"62406c00",924:"63cab1af",1069:"a3c4fcf5",1161:"73d50786",1188:"85d93bff",1328:"024c7f76",1400:"b7c28857",1408:"0e7de974",1493:"79755485",1744:"889666fc",1785:"0a4f8252",1946:"2d016fba",2097:"2cff9d8f",2321:"faf1a9f9",2342:"476a4b79",2386:"3de748be",2814:"e6072dec",2934:"1d413b6c",3153:"04d4516f",3159:"562db46d",3667:"5dcec4c9",3814:"02dc3d4e",3895:"9aeb7ab4",4195:"12baaed4",4483:"0a1700d1",4972:"38a3e4ab",5020:"f6f8ac51",5073:"7b28f0e5",5087:"a0ba16bc",5187:"69ae74ca",5266:"2c50a5db",5672:"0f795ec7",5710:"5e24f586",5937:"13da1767",6090:"41fe1108",6117:"aea30ef9",6342:"14015309",6516:"a91a3d33",6573:"b5ef2174",6831:"72d83cf6",6971:"ed669e47",6998:"2749aa58",7071:"711dfd1e",7291:"195da2d6",7386:"15b27fe9",7473:"4a701bf9",7655:"a4cb7251",7679:"4e3beeae",7918:"fb29058d",7938:"0941861b",8558:"16cebdc2",8645:"cb23ea6e",8646:"8cb4cff7",8888:"a7397f99",8998:"e08eb934",9069:"f7ee3c77",9209:"0266f9d7",9239:"3551f181",9484:"4573c922",9514:"b9a16d8b",9557:"7638dbdf",9817:"6ba8c834",9829:"f00ef857",9896:"730b3071",9945:"1aa3f7c6",9990:"204df771"}[e]+".js",r.miniCssF=e=>{},r.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),r.o=(e,a)=>Object.prototype.hasOwnProperty.call(e,a),b={},d="react-native-android-widget-docs:",r.l=(e,a,f,c)=>{if(b[e])b[e].push(a);else{var t,o;if(void 0!==f)for(var n=document.getElementsByTagName("script"),i=0;i{t.onerror=t.onload=null,clearTimeout(s);var d=b[e];if(delete b[e],t.parentNode&&t.parentNode.removeChild(t),d&&d.forEach((e=>e(f))),a)return a(f)},s=setTimeout(l.bind(null,void 0,{type:"timeout",target:t}),12e4);t.onerror=l.bind(null,t.onerror),t.onload=l.bind(null,t.onload),o&&document.head.appendChild(t)}},r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.p="/react-native-android-widget/",r.gca=function(e){return e={17896441:"7918",70097127:"1744","935f2afb":"53","94be2f97":"265","1bb5842c":"322",e73c34ba:"924",cc1aedd7:"1069","4787fd9f":"1161",aa86ff20:"1188","8d25c1fb":"1328","24767a4f":"1400","5b19e069":"1408","407354e8":"1493","17aa6098":"1785","31e029c9":"1946",b0736eaa:"2097",c56934f7:"2321","76085ae1":"2342",d5b87c6b:"2386","74b23640":"2814","0124b8bf":"2934",ff470113:"3153",bcda6bdc:"3159","5d5554be":"3667","5d454204":"3814","17c5701b":"3895",c4f5d8e4:"4195","3666eb9e":"4483","0314676f":"5020","7ad22d07":"5073","1476a8a4":"5087","49b00a7f":"5187","11884ede":"5266",a66dadf2:"5672","4b7010bf":"5710",ff301dc0:"5937","2eb66e86":"6090","82b1394b":"6117","080db9a4":"6342",bcaac1db:"6516","399d2a39":"6573","281947f5":"6831",c377a04b:"6971","334fbae1":"6998","7135efbc":"7071","01e0afe4":"7291",ef61de09:"7386","181303e3":"7473",ead7330c:"7655",a3102611:"7679","3fa31a86":"7938",f600eb30:"8558","436fd1e4":"8645","9958a938":"8646",c10b2ba3:"8888","730f732a":"8998","7f5eb84b":"9069","95f41f41":"9209","3a45f1c7":"9239","1cfe139a":"9484","1be78505":"9514","7402041a":"9557","14eb3368":"9817","935b7169":"9829","7d14206d":"9896",adcb0710:"9945",f477c445:"9990"}[e]||e,r.p+r.u(e)},(()=>{var e={1303:0,532:0};r.f.j=(a,f)=>{var b=r.o(e,a)?e[a]:void 0;if(0!==b)if(b)f.push(b[2]);else if(/^(1303|532)$/.test(a))e[a]=0;else{var d=new Promise(((f,d)=>b=e[a]=[f,d]));f.push(b[2]=d);var c=r.p+r.u(a),t=new Error;r.l(c,(f=>{if(r.o(e,a)&&(0!==(b=e[a])&&(e[a]=void 0),b)){var d=f&&("load"===f.type?"missing":f.type),c=f&&f.target&&f.target.src;t.message="Loading chunk "+a+" failed.\n("+d+": "+c+")",t.name="ChunkLoadError",t.type=d,t.request=c,b[1](t)}}),"chunk-"+a,a)}},r.O.j=a=>0===e[a];var a=(a,f)=>{var b,d,c=f[0],t=f[1],o=f[2],n=0;if(c.some((a=>0!==e[a]))){for(b in t)r.o(t,b)&&(r.m[b]=t[b]);if(o)var i=o(r)}for(a&&a(f);n - +

React Native Android Widget

React Native Android Widget is an open source library for building android widgets using React Native - without touching the native side.

Get started building by installing React Native Android Widget or by following the Tutorial to learn the main concepts.

Getting Started​

Get started by installing the library.

npm install --save react-native-android-widget
Copyright © 2023 Stefan Aleksovski. Built with Docusaurus.
- + \ No newline at end of file diff --git a/docs/api/register-widget-configuration-screen.html b/docs/api/register-widget-configuration-screen.html index 33e8fd4..a2c77dd 100644 --- a/docs/api/register-widget-configuration-screen.html +++ b/docs/api/register-widget-configuration-screen.html @@ -7,7 +7,7 @@ - + @@ -16,7 +16,7 @@ If the widget was just added it will be removed from the home screen, otherwise just the conifuguration will be canceled and the widget will remain as is.

If the user changes some configuration and wants to add the widget, we will need to:

  • Call renderWidget to update the widget with the new configuration
  • Call setResult('ok') to indicate that the configuration is done and the screen can be closed

Multiple configurable widgets​

If we have multiple configurable widgets, they will share the same configuration screen, but we can check which widget is configured by the widgetInfo prop and show different UI depending on the widget.

Usage​

First, create a widget configuration component, containing:

WidgetConfigurationScreen.tsx
import React from 'react';
import type { WidgetConfigurationScreenProps } from 'react-native-android-widget';
import { ConfigurableWidget } from './ConfigurableWidget';

export function WidgetConfigurationScreen({
  widgetInfo,
  setResult,
  renderWidget,
}: WidgetConfigurationScreenProps) {
  // Here we can define the UI for configuring the widget
}

Register the widget configuration screen​

In the main index.js (or index.ts, index.tsx) file for our app, when we register the main component, register the widget configuration screen.

index.ts
import { AppRegistry } from 'react-native';
import {
  registerWidgetConfigurationScreen,
  registerWidgetTaskHandler,
} from 'react-native-android-widget';
import { name as appName } from './app.json';
import App from './App';
import { widgetTaskHandler } from './widget-task-handler';
import { WidgetConfigurationScreen } from './WidgetConfigurationScreen';

AppRegistry.registerComponent(appName, () => App);
registerWidgetTaskHandler(widgetTaskHandler);
registerWidgetConfigurationScreen(WidgetConfigurationScreen);

Register widget task handler (Expo)​

If we are using Expo, there is no index.js (or index.ts, index.tsx), but we can create it.

First, update package.json main field to point to index.ts (or .js) instead of node_modules/expo/AppEntry.js

package.json
{
  "name": "my-expo-app",
  "main": "index.ts",
  ...
}

Create the file, using node_modules/expo/AppEntry.js as a template. Then import widgetTaskHandler and register it.

index.ts
import { registerRootComponent } from 'expo';
import {
  registerWidgetConfigurationScreen,
  registerWidgetTaskHandler,
} from 'react-native-android-widget';

import App from './App';
import { widgetTaskHandler } from './widget-task-handler';
import { WidgetConfigurationScreen } from './WidgetConfigurationScreen';

// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
// It also ensures that whether you load the app in Expo Go or in a native build,
// the environment is set up appropriately
registerRootComponent(App);
registerWidgetTaskHandler(widgetTaskHandler);
registerWidgetConfigurationScreen(WidgetConfigurationScreen);

Types​

Check the types in the Public API documentation

The widget configuration screen has some properties, described with WidgetConfigurationScreenProps

Copyright © 2023 Stefan Aleksovski. Built with Docusaurus.
- + \ No newline at end of file diff --git a/docs/api/register-widget-task-handler.html b/docs/api/register-widget-task-handler.html index b22c191..3dab939 100644 --- a/docs/api/register-widget-task-handler.html +++ b/docs/api/register-widget-task-handler.html @@ -7,14 +7,14 @@ - +

registerWidgetTaskHandler

react-native-android-widget exports a registerWidgetTaskHandler function that can be used to register a task handler that can handle widget click events, widget resize events, widget added events...

Usage​

First, create a task handler function, containing:

widget-task-handler.tsx
import React from 'react';
import type { WidgetTaskHandlerProps } from 'react-native-android-widget';
import { HelloWidget } from './HelloWidget';

const nameToWidget = {
  // Hello will be the **name** with which we will reference our widget.
  Hello: HelloWidget,
};

export async function widgetTaskHandler(props: WidgetTaskHandlerProps) {
  const widgetInfo = props.widgetInfo;
  const Widget =
    nameToWidget[widgetInfo.widgetName as keyof typeof nameToWidget];

  switch (props.widgetAction) {
    case 'WIDGET_ADDED':
      props.renderWidget(<Widget />);
      break;

    case 'WIDGET_UPDATE':
      props.renderWidget(<Widget />);
      break;

    case 'WIDGET_RESIZED':
      props.renderWidget(<Widget />);
      break;

    case 'WIDGET_DELETED':
      // Handle widget deleted (remove widget data if you stored it somewhere)
      break;

    case 'WIDGET_CLICK':
      if (props.clickAction === 'play') {
        props.renderWidget(<Widget status="playing" />);
      } else {
        props.renderWidget(<Widget status="stopped" />);
      }
      break;

    default:
      break;
  }
}

We use nameToWidget to map from the name to the component defining the widget (useful if we have multiple widgets). There are other ways to achieve this.

This file is also where you can execute regular JS code, include asynchronous operations, such as fetching data from API:

widget-task-handler.tsx
// ...
case 'WIDGET_CLICK':
  if (props.clickAction === 'refresh') {
    const data = await fetch('https://example.com/api').then((response) => response.json());
    props.renderWidget(<Widget title={data.title} />);
  }
  break;

Register widget task handler​

In the main index.js (or index.ts, index.tsx) file for our app, when we register the main component, register the widget task handler.

index.ts
import { AppRegistry } from 'react-native';
import { registerWidgetTaskHandler } from 'react-native-android-widget';
import { name as appName } from './app.json';
import App from './App';
import { widgetTaskHandler } from './widget-task-handler';

AppRegistry.registerComponent(appName, () => App);
registerWidgetTaskHandler(widgetTaskHandler);

Register widget task handler (Expo)​

If we are using Expo, there is no index.js (or index.ts, index.tsx), but we can create it.

First, update package.json main field to point to index.ts (or .js) instead of node_modules/expo/AppEntry.js

package.json
{
  "name": "my-expo-app",
  "main": "index.ts",
  ...
}

Create the file, using node_modules/expo/AppEntry.js as a template. Then import widgetTaskHandler and register it.

index.ts
import { registerRootComponent } from 'expo';
import { registerWidgetTaskHandler } from 'react-native-android-widget';

import App from './App';
import { widgetTaskHandler } from './widget-task-handler';

// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
// It also ensures that whether you load the app in Expo Go or in a native build,
// the environment is set up appropriately
registerRootComponent(App);
registerWidgetTaskHandler(widgetTaskHandler);

Types​

Check the types in the Public API documentation

The widget task handler will be called with some properties, described with WidgetTaskHandlerProps

Copyright © 2023 Stefan Aleksovski. Built with Docusaurus.
- + \ No newline at end of file diff --git a/docs/api/request-widget-update.html b/docs/api/request-widget-update.html index 042ea07..dda59d8 100644 --- a/docs/api/request-widget-update.html +++ b/docs/api/request-widget-update.html @@ -7,13 +7,13 @@ - +

requestWidgetUpdate

react-native-android-widget exports a requestWidgetUpdate function that can be used to request a widget update while the application is open (or with some background task).

Since the user can add the same widget multiple times, with different sizes, requestWidgetUpdate will cycle all widgets and allow us to redraw them.

Usage​

Lets assume we have a CounterWidget widget that shows a single number, which it gets as a prop.

If the user has added a CounterWidget to the home screen, then when the CounterWidgetScreen is opened we can update the number shown on the widget on the home screen using requestWidgetUpdate.

If the user has added the CounterWidget multiple times, renderWidget will be called multiple times, once for each widget.

If the user has not added the CounterWidget on the Android home screen, the optional callback widgetNotFound will be called.

Example​

CounterScreen.tsx
import * as React from 'react';
import { Button, StyleSheet, View, Text } from 'react-native';
import { requestWidgetUpdate } from 'react-native-android-widget';

import { CounterWidget } from './CounterWidget';

export function CounterScreen() {
  const [count, setCount] = React.useState(0);

  React.useEffect(() => {
    requestWidgetUpdate({
      widgetName: 'Counter',
      renderWidget: () => <CounterWidget count={count} />,
      widgetNotFound: () => {
        // Called if no widget is present on the home screen
      }
    });
  }, [count]);

  return (
    <View style={styles.container}>
      <Text>{count}</Text>
      <Button title="Increment" onPress={() => setCount(count + 1)} />
      <Button title="Decrement" onPress={() => setCount(count - 1)} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Demo​

Check the full code in the Counter Screen

Types​

Check the types in the Public API documentation

The requestWidgetUpdate function should be called with the properties described with RequestWidgetUpdateProps

Copyright © 2023 Stefan Aleksovski. Built with Docusaurus.
- + \ No newline at end of file diff --git a/docs/api/widget-preview.html b/docs/api/widget-preview.html index f99e5f8..68334c9 100644 --- a/docs/api/widget-preview.html +++ b/docs/api/widget-preview.html @@ -7,13 +7,13 @@ - +

WidgetPreview

react-native-android-widget exports a WidgetPreview component that can be used to preview a widget in any screen in our React Native application.

Usage​

HelloWidgetPreviewScreen.tsx
import * as React from 'react';
import { StyleSheet, View } from 'react-native';
import { WidgetPreview } from 'react-native-android-widget';

import { HelloWidget } from './HelloWidget';

export function HelloWidgetPreviewScreen() {
  return (
    <View style={styles.container}>
      <WidgetPreview
        renderWidget={() => <HelloWidget />}
        width={320}
        height={200}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Types​

Check the types in the Public API documentation

Copyright © 2023 Stefan Aleksovski. Built with Docusaurus.
- + \ No newline at end of file diff --git a/docs/demo.html b/docs/demo.html index 6312373..c8ad61d 100644 --- a/docs/demo.html +++ b/docs/demo.html @@ -7,13 +7,13 @@ - +

Demo

You can download the demo app with the example widgets from the Releases Page

Fitness Widget Preview​

Fitness Widget Preview

List Widget Preview​

List Widget Preview

Resizable Music Widget Preview​

Resizable Music Widget Preview

Rotated Widget Preview​

Rotated Widget Preview

Shopify Widget Preview​

Shopify Widget Preview

Click Demo Widget Preview​

Click Demo Widget Preview

Counter Widget Preview​

Counter Widget Preview

Configurable Widget Preview​

Configurable Widget Preview

Debug Events Widget Preview​

Debug Events Widget Preview

Copyright © 2023 Stefan Aleksovski. Built with Docusaurus.
- + \ No newline at end of file diff --git a/docs/handling-clicks.html b/docs/handling-clicks.html index 54022e2..bbe1378 100644 --- a/docs/handling-clicks.html +++ b/docs/handling-clicks.html @@ -7,7 +7,7 @@ - + @@ -16,7 +16,7 @@ but will execute the action in the background.

Those are:

  • "OPEN_APP"

    This clickAction does not required clickActionData, and if set on a section of the widget it will open the application when clicked

  • "OPEN_URI"

    This clickAction requires a clickActionData that contains { uri: 'some-uri' }. The uri can be a web uri (https://google.com), or an app deep link (androidwidgetexample://deep-link)

    For the deep link to open a screen in the app deep linking must be set up using:

Demo​

All click action types are presend in the Click Demo widget in the demo app.

Copyright © 2023 Stefan Aleksovski. Built with Docusaurus.
- + \ No newline at end of file diff --git a/docs/limitations.html b/docs/limitations.html index 08d8701..67a8a30 100644 --- a/docs/limitations.html +++ b/docs/limitations.html @@ -7,7 +7,7 @@ - + @@ -15,7 +15,7 @@

Limitations

There are some limitations to this library.

We cannot render React Native views directly to the widget. What this library does is render the React Native views to an image, and then show that image in the widget. For it to look good, we need to know the exact size of the widget, so we can create an image that will fit the widget correctly.

On some Android launchers, the reported and actual size of the widget are not always the same.

Actual size

Actual size (365dp x 318dp)

Reported size

Reported size (365dp x 354dp)

I haven't found a reliable way to get the exact size, the current behavior is to crop the widget if the reported size is smaller.

Copyright © 2023 Stefan Aleksovski. Built with Docusaurus.
- + \ No newline at end of file diff --git a/docs/primitives/flex-widget.html b/docs/primitives/flex-widget.html index 8b8d2e2..833d638 100644 --- a/docs/primitives/flex-widget.html +++ b/docs/primitives/flex-widget.html @@ -7,13 +7,13 @@ - +

FlexWidget

Widget container that lays out child widgets using flexbox.

Usage​

import { FlexWidget } from 'react-native-android-widget';

export function MyWidget() {
  return (
    <FlexWidget
      style={{
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      ...
    </FlexWidget>
  );
}

Props​

Check the props in the Public API documentation

Copyright © 2023 Stefan Aleksovski. Built with Docusaurus.
- + \ No newline at end of file diff --git a/docs/primitives/icon-widget.html b/docs/primitives/icon-widget.html index fdefaf3..5c0f118 100644 --- a/docs/primitives/icon-widget.html +++ b/docs/primitives/icon-widget.html @@ -7,13 +7,13 @@ - +

IconWidget

Widget for displaying icons.

Usage​

import { FlexWidget, IconWidget } from 'react-native-android-widget';

export function MyWidget() {
  return (
    <FlexWidget>
      <IconWidget font="material" size={36} icon="play_arrow" />
    </FlexWidget>
  );
}

Fonts​

Icon widget supports custom fonts, but we must provide the font file.

Bare React Native​

To use a custom icon font in bare React Native app we must copy the font file(s) to android/app/src/main/assets/fonts. The font prop will match the file by name.

For example, android/app/src/main/assets/fonts/material.ttf

Expo​

To use a custom font in an Expo app, we can add them in the assets directory.

For example, assets/fonts/material.ttf

Then, when using the config plugin we must provide a list of all the custom fonts we need.

export default ({ config }: ConfigContext): ExpoConfig => ({
  ...config,
  name: 'My Expo App Name',
  plugins: [
    ['react-native-android-widget', {
      fonts: ['./assets/fonts/material.ttf'],
      widgets: [...],
    }]
  ],
});

Props​

Check the props in the Public API documentation

Copyright © 2023 Stefan Aleksovski. Built with Docusaurus.
- + \ No newline at end of file diff --git a/docs/primitives/image-widget.html b/docs/primitives/image-widget.html index 317b688..cd2ef35 100644 --- a/docs/primitives/image-widget.html +++ b/docs/primitives/image-widget.html @@ -7,13 +7,13 @@ - +

ImageWidget

Widget for displaying different types of images, including network images, data:/image images, and static resources.

Usage​

import { FlexWidget, ImageWidget } from 'react-native-android-widget';

export function MyWidget() {
  return (
    <FlexWidget>
      <ImageWidget
        image={require('../assets/image-file.jpg')}
        imageWidth={88}
        imageHeight={88}
      />
    </FlexWidget>
  );
}

Props​

Check the props in the Public API documentation

Copyright © 2023 Stefan Aleksovski. Built with Docusaurus.
- + \ No newline at end of file diff --git a/docs/primitives/index.html b/docs/primitives/index.html index 52e8567..94e1ce4 100644 --- a/docs/primitives/index.html +++ b/docs/primitives/index.html @@ -7,13 +7,13 @@ - +
Copyright © 2023 Stefan Aleksovski. Built with Docusaurus.
- + \ No newline at end of file diff --git a/docs/primitives/list-widget.html b/docs/primitives/list-widget.html index 94a00b6..a7fd797 100644 --- a/docs/primitives/list-widget.html +++ b/docs/primitives/list-widget.html @@ -7,14 +7,14 @@ - +

ListWidget

Widget container that shows a scrollable list that can contain multiple items.

Only the first-level children of the ListWidget can be "clicked". We can still set clickAction on the sub-widgets, but they will not respond to clicks.

List item height

Each list item must have a height of equal or less than the height of the ListWidget.

Usage​

import {
  ListWidget,
  FlexWidget,
  TextWidget,
} from 'react-native-android-widget';

export function MyWidget() {
  return (
    <ListWidget
      style={{
        height: 'match_parent',
        width: 'match_parent',
        backgroundColor: '#1F3529',
      }}
    >
      {Array.from({ length: 15 }).map((_, i) => (
        <FlexWidget
          key={i}
          style={{
            width: 'match_parent',
            alignItems: 'center',
            flexDirection: 'row',
            justifyContent: 'center',
            padding: 8,
          }}
          clickAction="OPEN_URI"
          clickActionData={{
            uri: `androidwidgetexample://list/list-demo/${i + 1}`,
          }}
        >
          <TextWidget text={`React Native Android Widget Release 0.${i + 1}`} />
        </FlexWidget>
      ))}
    </ListWidget>
  );
}

Props​

Check the props in the Public API documentation

Example​

You can see an example widget using ListWidget in the examples folder in the repo.

ListDemoWidget

List Widget Preview

Copyright © 2023 Stefan Aleksovski. Built with Docusaurus.
- + \ No newline at end of file diff --git a/docs/primitives/overlap-widget.html b/docs/primitives/overlap-widget.html index 989ca6d..df380be 100644 --- a/docs/primitives/overlap-widget.html +++ b/docs/primitives/overlap-widget.html @@ -7,13 +7,13 @@ - +

OverlapWidget

Widget container that lays out child widgets on on top of the other.

The child widgets can be positioned using margins.

Usage​

import { OverlapWidget, FlexWidget } from 'react-native-android-widget';

export function MyWidget() {
  return (
    <OverlapWidget>
      <FlexWidget style={{ marginTop: 10, marginLeft: 10 }}>...</FlexWidget>
      <FlexWidget style={{ marginTop: 20, marginLeft: 10 }}>...</FlexWidget>
    </OverlapWidget>
  );
}

Props​

Check the props in the Public API documentation

Copyright © 2023 Stefan Aleksovski. Built with Docusaurus.
- + \ No newline at end of file diff --git a/docs/primitives/svg-widget.html b/docs/primitives/svg-widget.html index 139dcef..c7831b9 100644 --- a/docs/primitives/svg-widget.html +++ b/docs/primitives/svg-widget.html @@ -7,14 +7,14 @@ - +

SvgWidget

Widget for displaying SVG. It supports importing an SVG file, or using an SVG string;

Usage​

import { FlexWidget, SvgWidget } from 'react-native-android-widget';

const svgString = `
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 300 300">
  ...
</svg>
`;

export function MyWidget() {
  return (
    <FlexWidget>
      <SvgWidget
        svg={require('../assets/SVG_Logo.svg')}
        style={{ height: 72, width: 72 }}
      />

      <SvgWidget
        svg={svgString}
        style={{ height: 72, width: 72 }}
      />
    </FlexWidget>
  );
}

Props​

Check the props in the Public API documentation

Copyright © 2023 Stefan Aleksovski. Built with Docusaurus.
- + \ No newline at end of file diff --git a/docs/primitives/text-widget.html b/docs/primitives/text-widget.html index 0173daf..ac8ffa1 100644 --- a/docs/primitives/text-widget.html +++ b/docs/primitives/text-widget.html @@ -7,13 +7,13 @@ - +

TextWidget

Widget for displaying text.

Usage​

import { FlexWidget, TextWidget } from 'react-native-android-widget';

export function MyWidget() {
  return (
    <FlexWidget>
      <TextWidget
        text="Hello"
        style={{
          fontSize: 32,
          fontFamily: 'Inter',
          color: '#000000',
        }}
      />
    </FlexWidget>
  );
}

Fonts​

Text widget supports custom fonts, but we must provide the font file.

Bare React Native​

To use a custom font in bare React Native app we must copy the font file(s) to android/app/src/main/assets/fonts. The fontFamily style prop will match the file by name.

For example, android/app/src/main/assets/fonts/Inter.ttf

Expo​

To use a custom font in an Expo app, we can add them in the assets directory.

For example, assets/fonts/Inter.ttf

Then, when using the config plugin we must provide a list of all the custom fonts we need.

export default ({ config }: ConfigContext): ExpoConfig => ({
  ...config,
  name: 'My Expo App Name',
  plugins: [
    ['react-native-android-widget', {
      fonts: ['./assets/fonts/Inter.ttf'],
      widgets: [...],
    }]
  ],
});

Example​

Check the example widget

Props​

Check the props in the Public API documentation

Copyright © 2023 Stefan Aleksovski. Built with Docusaurus.
- + \ No newline at end of file diff --git a/docs/public-api.html b/docs/public-api.html index a272530..28fc2c5 100644 --- a/docs/public-api.html +++ b/docs/public-api.html @@ -7,14 +7,14 @@ - +

react-native-android-widget

Interfaces​

Namespaces​

Functions​

WidgetPreview​

▸ WidgetPreview(«destructured»): Element

Parameters​

NameType
«destructured»WidgetPreviewProps

Returns​

Element

getWidgetInfo​

▸ getWidgetInfo(widgetName): Promise<WidgetInfo[]>

Returns a list of widgetName widgets added on the home screen

Parameters​

NameType
widgetNamestring

Returns​

Promise<WidgetInfo[]>

registerWidgetConfigurationScreen​

▸ registerWidgetConfigurationScreen(WidgetConfigurationScreenComponent): void

Register a task handler that will handle widget actions

Parameters​

NameType
WidgetConfigurationScreenComponentWidgetConfigurationScreen

Returns​

void

registerWidgetTaskHandler​

▸ registerWidgetTaskHandler(handler): void

Register a task handler that will handle widget actions

Parameters​

NameTypeDescription
handlerWidgetTaskHandlerWidgetTaskHandler

Returns​

void

requestWidgetUpdate​

▸ requestWidgetUpdate(param0): Promise<void>

Request widget update for a given widget name A callback will be called for each widget with that name that is added to the home screen

Parameters​

NameTypeDescription
param0RequestWidgetUpdatePropsRequestWidgetUpdateProps

Returns​

Promise<void>

FlexWidget​

▸ FlexWidget(«destructured»): any

Parameters​

NameType
«destructured»FlexWidgetProps

Returns​

any

IconWidget​

▸ IconWidget(_): null

Parameters​

NameType
_IconWidgetProps

Returns​

null

ImageWidget​

▸ ImageWidget(_): null

Parameters​

NameType
_ImageWidgetProps

Returns​

null

ListWidget​

▸ ListWidget(«destructured»): any

Parameters​

NameType
«destructured»ListWidgetProps

Returns​

any

OverlapWidget​

▸ OverlapWidget(«destructured»): any

Parameters​

NameType
«destructured»OverlapWidgetProps

Returns​

any

SvgWidget​

▸ SvgWidget(_): null

Parameters​

NameType
_SvgWidgetProps

Returns​

null

TextWidget​

▸ TextWidget(_): null

Parameters​

NameType
_TextWidgetProps

Returns​

null

Type Aliases​

WidgetConfigurationScreen​

Ƭ WidgetConfigurationScreen: (props: WidgetConfigurationScreenProps) => JSX.Element

Type declaration​

▸ (props): JSX.Element

Parameters​
NameType
propsWidgetConfigurationScreenProps
Returns​

JSX.Element

WidgetTaskHandler​

Ƭ WidgetTaskHandler: (props: WidgetTaskHandlerProps) => Promise<void>

Type declaration​

▸ (props): Promise<void>

Parameters​
NameType
propsWidgetTaskHandlerProps
Returns​

Promise<void>

ResourcePath​

Ƭ ResourcePath: `./${string}` | `../${string}`

ImageWidgetSource​

Ƭ ImageWidgetSource: ImageRequireSource | `http:${string}` | `https:${string}` | `data:image${string}`

OverlapWidgetStyle​

Ƭ OverlapWidgetStyle: CommonStyleProps

SvgWidgetStyle​

Ƭ SvgWidgetStyle: CommonStyleProps

HexColor​

Ƭ HexColor: `#${string}`

RgbaColor​

Ƭ RgbaColor: `rgba(${number}, ${number}, ${number}, ${number})`

ColorProp​

Ƭ ColorProp: HexColor | RgbaColor

Copyright © 2023 Stefan Aleksovski. Built with Docusaurus.
- + \ No newline at end of file diff --git a/docs/public-api/interfaces/BackgroundStyleProps.html b/docs/public-api/interfaces/BackgroundStyleProps.html index ebce50f..9a06d4c 100644 --- a/docs/public-api/interfaces/BackgroundStyleProps.html +++ b/docs/public-api/interfaces/BackgroundStyleProps.html @@ -7,13 +7,13 @@ - +
Copyright © 2023 Stefan Aleksovski. Built with Docusaurus.
- + \ No newline at end of file diff --git a/docs/public-api/interfaces/BorderStyleProps.html b/docs/public-api/interfaces/BorderStyleProps.html index afe49c6..726672e 100644 --- a/docs/public-api/interfaces/BorderStyleProps.html +++ b/docs/public-api/interfaces/BorderStyleProps.html @@ -7,13 +7,13 @@ - +

Interface: BorderStyleProps

Hierarchy​

Properties​

borderWidth​

• Optional borderWidth: number

borderTopWidth​

• Optional borderTopWidth: number

borderBottomWidth​

• Optional borderBottomWidth: number

borderLeftWidth​

• Optional borderLeftWidth: number

borderRightWidth​

• Optional borderRightWidth: number

borderColor​

• Optional borderColor: ColorProp

borderTopColor​

• Optional borderTopColor: ColorProp

borderBottomColor​

• Optional borderBottomColor: ColorProp

borderLeftColor​

• Optional borderLeftColor: ColorProp

borderRightColor​

• Optional borderRightColor: ColorProp

borderRadius​

• Optional borderRadius: number

borderTopLeftRadius​

• Optional borderTopLeftRadius: number

borderTopRightRadius​

• Optional borderTopRightRadius: number

borderBottomLeftRadius​

• Optional borderBottomLeftRadius: number

borderBottomRightRadius​

• Optional borderBottomRightRadius: number

borderStyle​

• Optional borderStyle: "solid" | "dotted" | "dashed"

Copyright © 2023 Stefan Aleksovski. Built with Docusaurus.
- + \ No newline at end of file diff --git a/docs/public-api/interfaces/ClickActionProps.html b/docs/public-api/interfaces/ClickActionProps.html index 9d7b19d..7b07575 100644 --- a/docs/public-api/interfaces/ClickActionProps.html +++ b/docs/public-api/interfaces/ClickActionProps.html @@ -7,7 +7,7 @@ - + @@ -17,7 +17,7 @@ the widget it will open the application when clicked
  • "OPEN_URI" - This clickAction requires a clickActionData that contains { uri: 'some-uri' }. The uri can be a web uri (https://google.com), or an app deep link (androidwidgetexample://deep-link) For the link to open a screen in the app deep linking must be set up

    • clickActionData​

    • Optional clickActionData: Record<string, unknown>

    Additional data that will be passed when the widget is clicked.

    If clickAction is OPEN_URI it must contain { uri: 'some-uri' }

    Copyright © 2023 Stefan Aleksovski. Built with Docusaurus.
    - + \ No newline at end of file diff --git a/docs/public-api/interfaces/CommonStyleProps.html b/docs/public-api/interfaces/CommonStyleProps.html index edaf474..cd8c1e1 100644 --- a/docs/public-api/interfaces/CommonStyleProps.html +++ b/docs/public-api/interfaces/CommonStyleProps.html @@ -7,13 +7,13 @@ - +

    Interface: CommonStyleProps

    Hierarchy​

    Properties​

    margin​

    • Optional margin: number

    Inherited from​

    MarginStyleProps.margin

    marginHorizontal​

    • Optional marginHorizontal: number

    Inherited from​

    MarginStyleProps.marginHorizontal

    marginVertical​

    • Optional marginVertical: number

    Inherited from​

    MarginStyleProps.marginVertical

    marginTop​

    • Optional marginTop: number

    Inherited from​

    MarginStyleProps.marginTop

    marginBottom​

    • Optional marginBottom: number

    Inherited from​

    MarginStyleProps.marginBottom

    marginLeft​

    • Optional marginLeft: number

    Inherited from​

    MarginStyleProps.marginLeft

    marginRight​

    • Optional marginRight: number

    Inherited from​

    MarginStyleProps.marginRight

    padding​

    • Optional padding: number

    Inherited from​

    PaddingStyleProps.padding

    paddingHorizontal​

    • Optional paddingHorizontal: number

    Inherited from​

    PaddingStyleProps.paddingHorizontal

    paddingVertical​

    • Optional paddingVertical: number

    Inherited from​

    PaddingStyleProps.paddingVertical

    paddingTop​

    • Optional paddingTop: number

    Inherited from​

    PaddingStyleProps.paddingTop

    paddingBottom​

    • Optional paddingBottom: number

    Inherited from​

    PaddingStyleProps.paddingBottom

    paddingLeft​

    • Optional paddingLeft: number

    Inherited from​

    PaddingStyleProps.paddingLeft

    paddingRight​

    • Optional paddingRight: number

    Inherited from​

    PaddingStyleProps.paddingRight

    height​

    • Optional height: number | "wrap_content" | "match_parent"

    Inherited from​

    SizeStyleProps.height

    width​

    • Optional width: number | "wrap_content" | "match_parent"

    Inherited from​

    SizeStyleProps.width

    backgroundColor​

    • Optional backgroundColor: ColorProp

    Inherited from​

    BackgroundStyleProps.backgroundColor

    backgroundGradient​

    • Optional backgroundGradient: Object

    Type declaration​

    NameType
    fromColorProp
    toColorProp
    orientation"TOP_BOTTOM" | "TR_BL" | "RIGHT_LEFT" | "BR_TL" | "BOTTOM_TOP" | "BL_TR" | "LEFT_RIGHT" | "TL_BR"

    Inherited from​

    BackgroundStyleProps.backgroundGradient

    borderWidth​

    • Optional borderWidth: number

    Inherited from​

    BorderStyleProps.borderWidth

    borderTopWidth​

    • Optional borderTopWidth: number

    Inherited from​

    BorderStyleProps.borderTopWidth

    borderBottomWidth​

    • Optional borderBottomWidth: number

    Inherited from​

    BorderStyleProps.borderBottomWidth

    borderLeftWidth​

    • Optional borderLeftWidth: number

    Inherited from​

    BorderStyleProps.borderLeftWidth

    borderRightWidth​

    • Optional borderRightWidth: number

    Inherited from​

    BorderStyleProps.borderRightWidth

    borderColor​

    • Optional borderColor: ColorProp

    Inherited from​

    BorderStyleProps.borderColor

    borderTopColor​

    • Optional borderTopColor: ColorProp

    Inherited from​

    BorderStyleProps.borderTopColor

    borderBottomColor​

    • Optional borderBottomColor: ColorProp

    Inherited from​

    BorderStyleProps.borderBottomColor

    borderLeftColor​

    • Optional borderLeftColor: ColorProp

    Inherited from​

    BorderStyleProps.borderLeftColor

    borderRightColor​

    • Optional borderRightColor: ColorProp

    Inherited from​

    BorderStyleProps.borderRightColor

    borderRadius​

    • Optional borderRadius: number

    Inherited from​

    BorderStyleProps.borderRadius

    borderTopLeftRadius​

    • Optional borderTopLeftRadius: number

    Inherited from​

    BorderStyleProps.borderTopLeftRadius

    borderTopRightRadius​

    • Optional borderTopRightRadius: number

    Inherited from​

    BorderStyleProps.borderTopRightRadius

    borderBottomLeftRadius​

    • Optional borderBottomLeftRadius: number

    Inherited from​

    BorderStyleProps.borderBottomLeftRadius

    borderBottomRightRadius​

    • Optional borderBottomRightRadius: number

    Inherited from​

    BorderStyleProps.borderBottomRightRadius

    borderStyle​

    • Optional borderStyle: "solid" | "dotted" | "dashed"

    Inherited from​

    BorderStyleProps.borderStyle

    rotation​

    • Optional rotation: number

    Inherited from​

    OtherStyleProps.rotation

    Copyright © 2023 Stefan Aleksovski. Built with Docusaurus.
    - + \ No newline at end of file diff --git a/docs/public-api/interfaces/FlexWidgetProps.html b/docs/public-api/interfaces/FlexWidgetProps.html index e23265b..e99b7ce 100644 --- a/docs/public-api/interfaces/FlexWidgetProps.html +++ b/docs/public-api/interfaces/FlexWidgetProps.html @@ -7,7 +7,7 @@ - + @@ -17,7 +17,7 @@ the widget it will open the application when clicked
  • "OPEN_URI" - This clickAction requires a clickActionData that contains { uri: 'some-uri' }. The uri can be a web uri (https://google.com), or an app deep link (androidwidgetexample://deep-link) For the link to open a screen in the app deep linking must be set up

    • Inherited from​

    ClickActionProps.clickAction

    clickActionData​

    • Optional clickActionData: Record<string, unknown>

    Additional data that will be passed when the widget is clicked.

    If clickAction is OPEN_URI it must contain { uri: 'some-uri' }

    Inherited from​

    ClickActionProps.clickActionData

    Copyright © 2023 Stefan Aleksovski. Built with Docusaurus.
    - + \ No newline at end of file diff --git a/docs/public-api/interfaces/FlexWidgetStyle.html b/docs/public-api/interfaces/FlexWidgetStyle.html index f4e8833..0b3cba5 100644 --- a/docs/public-api/interfaces/FlexWidgetStyle.html +++ b/docs/public-api/interfaces/FlexWidgetStyle.html @@ -7,13 +7,13 @@ - +

    Interface: FlexWidgetStyle

    Hierarchy​

    Properties​

    flex​

    • Optional flex: number

    Inherited from​

    FlexStyleProps.flex

    flexDirection​

    • Optional flexDirection: "row" | "column"

    Inherited from​

    FlexStyleProps.flexDirection

    alignItems​

    • Optional alignItems: "flex-start" | "flex-end" | "center"

    Inherited from​

    FlexStyleProps.alignItems

    justifyContent​

    • Optional justifyContent: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly"

    Inherited from​

    FlexStyleProps.justifyContent

    flexGap​

    • Optional flexGap: number

    Inherited from​

    FlexStyleProps.flexGap

    flexGapColor​

    • Optional flexGapColor: ColorProp

    Inherited from​

    FlexStyleProps.flexGapColor

    margin​

    • Optional margin: number

    Inherited from​

    CommonStyleProps.margin

    marginHorizontal​

    • Optional marginHorizontal: number

    Inherited from​

    CommonStyleProps.marginHorizontal

    marginVertical​

    • Optional marginVertical: number

    Inherited from​

    CommonStyleProps.marginVertical

    marginTop​

    • Optional marginTop: number

    Inherited from​

    CommonStyleProps.marginTop

    marginBottom​

    • Optional marginBottom: number

    Inherited from​

    CommonStyleProps.marginBottom

    marginLeft​

    • Optional marginLeft: number

    Inherited from​

    CommonStyleProps.marginLeft

    marginRight​

    • Optional marginRight: number

    Inherited from​

    CommonStyleProps.marginRight

    padding​

    • Optional padding: number

    Inherited from​

    CommonStyleProps.padding

    paddingHorizontal​

    • Optional paddingHorizontal: number

    Inherited from​

    CommonStyleProps.paddingHorizontal

    paddingVertical​

    • Optional paddingVertical: number

    Inherited from​

    CommonStyleProps.paddingVertical

    paddingTop​

    • Optional paddingTop: number

    Inherited from​

    CommonStyleProps.paddingTop

    paddingBottom​

    • Optional paddingBottom: number

    Inherited from​

    CommonStyleProps.paddingBottom

    paddingLeft​

    • Optional paddingLeft: number

    Inherited from​

    CommonStyleProps.paddingLeft

    paddingRight​

    • Optional paddingRight: number

    Inherited from​

    CommonStyleProps.paddingRight

    height​

    • Optional height: number | "wrap_content" | "match_parent"

    Inherited from​

    CommonStyleProps.height

    width​

    • Optional width: number | "wrap_content" | "match_parent"

    Inherited from​

    CommonStyleProps.width

    backgroundColor​

    • Optional backgroundColor: ColorProp

    Inherited from​

    CommonStyleProps.backgroundColor

    backgroundGradient​

    • Optional backgroundGradient: Object

    Type declaration​

    NameType
    fromColorProp
    toColorProp
    orientation"TOP_BOTTOM" | "TR_BL" | "RIGHT_LEFT" | "BR_TL" | "BOTTOM_TOP" | "BL_TR" | "LEFT_RIGHT" | "TL_BR"

    Inherited from​

    CommonStyleProps.backgroundGradient

    borderWidth​

    • Optional borderWidth: number

    Inherited from​

    CommonStyleProps.borderWidth

    borderTopWidth​

    • Optional borderTopWidth: number

    Inherited from​

    CommonStyleProps.borderTopWidth

    borderBottomWidth​

    • Optional borderBottomWidth: number

    Inherited from​

    CommonStyleProps.borderBottomWidth

    borderLeftWidth​

    • Optional borderLeftWidth: number

    Inherited from​

    CommonStyleProps.borderLeftWidth

    borderRightWidth​

    • Optional borderRightWidth: number

    Inherited from​

    CommonStyleProps.borderRightWidth

    borderColor​

    • Optional borderColor: ColorProp

    Inherited from​

    CommonStyleProps.borderColor

    borderTopColor​

    • Optional borderTopColor: ColorProp

    Inherited from​

    CommonStyleProps.borderTopColor

    borderBottomColor​

    • Optional borderBottomColor: ColorProp

    Inherited from​

    CommonStyleProps.borderBottomColor

    borderLeftColor​

    • Optional borderLeftColor: ColorProp

    Inherited from​

    CommonStyleProps.borderLeftColor

    borderRightColor​

    • Optional borderRightColor: ColorProp

    Inherited from​

    CommonStyleProps.borderRightColor

    borderRadius​

    • Optional borderRadius: number

    Inherited from​

    CommonStyleProps.borderRadius

    borderTopLeftRadius​

    • Optional borderTopLeftRadius: number

    Inherited from​

    CommonStyleProps.borderTopLeftRadius

    borderTopRightRadius​

    • Optional borderTopRightRadius: number

    Inherited from​

    CommonStyleProps.borderTopRightRadius

    borderBottomLeftRadius​

    • Optional borderBottomLeftRadius: number

    Inherited from​

    CommonStyleProps.borderBottomLeftRadius

    borderBottomRightRadius​

    • Optional borderBottomRightRadius: number

    Inherited from​

    CommonStyleProps.borderBottomRightRadius

    borderStyle​

    • Optional borderStyle: "solid" | "dotted" | "dashed"

    Inherited from​

    CommonStyleProps.borderStyle

    rotation​

    • Optional rotation: number

    Inherited from​

    CommonStyleProps.rotation

    Copyright © 2023 Stefan Aleksovski. Built with Docusaurus.
    - + \ No newline at end of file diff --git a/docs/public-api/interfaces/IconWidgetProps.html b/docs/public-api/interfaces/IconWidgetProps.html index 35897ab..c908a21 100644 --- a/docs/public-api/interfaces/IconWidgetProps.html +++ b/docs/public-api/interfaces/IconWidgetProps.html @@ -7,7 +7,7 @@ - + @@ -17,7 +17,7 @@ the widget it will open the application when clicked
  • "OPEN_URI" - This clickAction requires a clickActionData that contains { uri: 'some-uri' }. The uri can be a web uri (https://google.com), or an app deep link (androidwidgetexample://deep-link) For the link to open a screen in the app deep linking must be set up

    • Inherited from​

    ClickActionProps.clickAction

    clickActionData​

    • Optional clickActionData: Record<string, unknown>

    Additional data that will be passed when the widget is clicked.

    If clickAction is OPEN_URI it must contain { uri: 'some-uri' }

    Inherited from​

    ClickActionProps.clickActionData

    Copyright © 2023 Stefan Aleksovski. Built with Docusaurus.
    - + \ No newline at end of file diff --git a/docs/public-api/interfaces/IconWidgetStyle.html b/docs/public-api/interfaces/IconWidgetStyle.html index 07e4f03..bc8bcc2 100644 --- a/docs/public-api/interfaces/IconWidgetStyle.html +++ b/docs/public-api/interfaces/IconWidgetStyle.html @@ -7,13 +7,13 @@ - +

    Interface: IconWidgetStyle

    Hierarchy​

    Properties​

    color​

    • Optional color: ColorProp

    adjustsFontSizeToFit​

    • Optional adjustsFontSizeToFit: boolean

    margin​

    • Optional margin: number

    Inherited from​

    CommonStyleProps.margin

    marginHorizontal​

    • Optional marginHorizontal: number

    Inherited from​

    CommonStyleProps.marginHorizontal

    marginVertical​

    • Optional marginVertical: number

    Inherited from​

    CommonStyleProps.marginVertical

    marginTop​

    • Optional marginTop: number

    Inherited from​

    CommonStyleProps.marginTop

    marginBottom​

    • Optional marginBottom: number

    Inherited from​

    CommonStyleProps.marginBottom

    marginLeft​

    • Optional marginLeft: number

    Inherited from​

    CommonStyleProps.marginLeft

    marginRight​

    • Optional marginRight: number

    Inherited from​

    CommonStyleProps.marginRight

    padding​

    • Optional padding: number

    Inherited from​

    CommonStyleProps.padding

    paddingHorizontal​

    • Optional paddingHorizontal: number

    Inherited from​

    CommonStyleProps.paddingHorizontal

    paddingVertical​

    • Optional paddingVertical: number

    Inherited from​

    CommonStyleProps.paddingVertical

    paddingTop​

    • Optional paddingTop: number

    Inherited from​

    CommonStyleProps.paddingTop

    paddingBottom​

    • Optional paddingBottom: number

    Inherited from​

    CommonStyleProps.paddingBottom

    paddingLeft​

    • Optional paddingLeft: number

    Inherited from​

    CommonStyleProps.paddingLeft

    paddingRight​

    • Optional paddingRight: number

    Inherited from​

    CommonStyleProps.paddingRight

    height​

    • Optional height: number | "wrap_content" | "match_parent"

    Inherited from​

    CommonStyleProps.height

    width​

    • Optional width: number | "wrap_content" | "match_parent"

    Inherited from​

    CommonStyleProps.width

    backgroundColor​

    • Optional backgroundColor: ColorProp

    Inherited from​

    CommonStyleProps.backgroundColor

    backgroundGradient​

    • Optional backgroundGradient: Object

    Type declaration​

    NameType
    fromColorProp
    toColorProp
    orientation"TOP_BOTTOM" | "TR_BL" | "RIGHT_LEFT" | "BR_TL" | "BOTTOM_TOP" | "BL_TR" | "LEFT_RIGHT" | "TL_BR"

    Inherited from​

    CommonStyleProps.backgroundGradient

    borderWidth​

    • Optional borderWidth: number

    Inherited from​

    CommonStyleProps.borderWidth

    borderTopWidth​

    • Optional borderTopWidth: number

    Inherited from​

    CommonStyleProps.borderTopWidth

    borderBottomWidth​

    • Optional borderBottomWidth: number

    Inherited from​

    CommonStyleProps.borderBottomWidth

    borderLeftWidth​

    • Optional borderLeftWidth: number

    Inherited from​

    CommonStyleProps.borderLeftWidth

    borderRightWidth​

    • Optional borderRightWidth: number

    Inherited from​

    CommonStyleProps.borderRightWidth

    borderColor​

    • Optional borderColor: ColorProp

    Inherited from​

    CommonStyleProps.borderColor

    borderTopColor​

    • Optional borderTopColor: ColorProp

    Inherited from​

    CommonStyleProps.borderTopColor

    borderBottomColor​

    • Optional borderBottomColor: ColorProp

    Inherited from​

    CommonStyleProps.borderBottomColor

    borderLeftColor​

    • Optional borderLeftColor: ColorProp

    Inherited from​

    CommonStyleProps.borderLeftColor

    borderRightColor​

    • Optional borderRightColor: ColorProp

    Inherited from​

    CommonStyleProps.borderRightColor

    borderRadius​

    • Optional borderRadius: number

    Inherited from​

    CommonStyleProps.borderRadius

    borderTopLeftRadius​

    • Optional borderTopLeftRadius: number

    Inherited from​

    CommonStyleProps.borderTopLeftRadius

    borderTopRightRadius​

    • Optional borderTopRightRadius: number

    Inherited from​

    CommonStyleProps.borderTopRightRadius

    borderBottomLeftRadius​

    • Optional borderBottomLeftRadius: number

    Inherited from​

    CommonStyleProps.borderBottomLeftRadius

    borderBottomRightRadius​

    • Optional borderBottomRightRadius: number

    Inherited from​

    CommonStyleProps.borderBottomRightRadius

    borderStyle​

    • Optional borderStyle: "solid" | "dotted" | "dashed"

    Inherited from​

    CommonStyleProps.borderStyle

    rotation​

    • Optional rotation: number

    Inherited from​

    CommonStyleProps.rotation

    Copyright © 2023 Stefan Aleksovski. Built with Docusaurus.
    - + \ No newline at end of file diff --git a/docs/public-api/interfaces/ImageWidgetProps.html b/docs/public-api/interfaces/ImageWidgetProps.html index d1d2caf..8fa344a 100644 --- a/docs/public-api/interfaces/ImageWidgetProps.html +++ b/docs/public-api/interfaces/ImageWidgetProps.html @@ -7,7 +7,7 @@ - + @@ -18,7 +18,7 @@ the widget it will open the application when clicked
  • "OPEN_URI" - This clickAction requires a clickActionData that contains { uri: 'some-uri' }. The uri can be a web uri (https://google.com), or an app deep link (androidwidgetexample://deep-link) For the link to open a screen in the app deep linking must be set up

    • Inherited from​

    ClickActionProps.clickAction

    clickActionData​

    • Optional clickActionData: Record<string, unknown>

    Additional data that will be passed when the widget is clicked.

    If clickAction is OPEN_URI it must contain { uri: 'some-uri' }

    Inherited from​

    ClickActionProps.clickActionData

    Copyright © 2023 Stefan Aleksovski. Built with Docusaurus.
    - + \ No newline at end of file diff --git a/docs/public-api/interfaces/ListWidgetProps.html b/docs/public-api/interfaces/ListWidgetProps.html index 9faacd3..44b16c0 100644 --- a/docs/public-api/interfaces/ListWidgetProps.html +++ b/docs/public-api/interfaces/ListWidgetProps.html @@ -7,13 +7,13 @@ - +
    Copyright © 2023 Stefan Aleksovski. Built with Docusaurus.
    - + \ No newline at end of file diff --git a/docs/public-api/interfaces/ListWidgetStyle.html b/docs/public-api/interfaces/ListWidgetStyle.html index 35e17ea..f33b7b3 100644 --- a/docs/public-api/interfaces/ListWidgetStyle.html +++ b/docs/public-api/interfaces/ListWidgetStyle.html @@ -7,13 +7,13 @@ - +

    Interface: ListWidgetStyle

    Hierarchy​

    Properties​

    margin​

    • Optional margin: number

    Inherited from​

    MarginStyleProps.margin

    marginHorizontal​

    • Optional marginHorizontal: number

    Inherited from​

    MarginStyleProps.marginHorizontal

    marginVertical​

    • Optional marginVertical: number

    Inherited from​

    MarginStyleProps.marginVertical

    marginTop​

    • Optional marginTop: number

    Inherited from​

    MarginStyleProps.marginTop

    marginBottom​

    • Optional marginBottom: number

    Inherited from​

    MarginStyleProps.marginBottom

    marginLeft​

    • Optional marginLeft: number

    Inherited from​

    MarginStyleProps.marginLeft

    marginRight​

    • Optional marginRight: number

    Inherited from​

    MarginStyleProps.marginRight

    height​

    • Optional height: number | "wrap_content" | "match_parent"

    Inherited from​

    SizeStyleProps.height

    width​

    • Optional width: number | "wrap_content" | "match_parent"

    Inherited from​

    SizeStyleProps.width

    backgroundColor​

    • Optional backgroundColor: ColorProp

    Inherited from​

    BackgroundStyleProps.backgroundColor

    backgroundGradient​

    • Optional backgroundGradient: Object

    Type declaration​

    NameType
    fromColorProp
    toColorProp
    orientation"TOP_BOTTOM" | "TR_BL" | "RIGHT_LEFT" | "BR_TL" | "BOTTOM_TOP" | "BL_TR" | "LEFT_RIGHT" | "TL_BR"

    Inherited from​

    BackgroundStyleProps.backgroundGradient

    borderBottomColor​

    • Optional borderBottomColor: ColorProp

    Inherited from​

    Omit.borderBottomColor

    borderLeftColor​

    • Optional borderLeftColor: ColorProp

    Inherited from​

    Omit.borderLeftColor

    borderRightColor​

    • Optional borderRightColor: ColorProp

    Inherited from​

    Omit.borderRightColor

    borderStyle​

    • Optional borderStyle: "solid" | "dotted" | "dashed"

    Inherited from​

    Omit.borderStyle

    borderTopColor​

    • Optional borderTopColor: ColorProp

    Inherited from​

    Omit.borderTopColor

    borderBottomWidth​

    • Optional borderBottomWidth: number

    Inherited from​

    Omit.borderBottomWidth

    borderRightWidth​

    • Optional borderRightWidth: number

    Inherited from​

    Omit.borderRightWidth

    borderWidth​

    • Optional borderWidth: number

    Inherited from​

    Omit.borderWidth

    borderLeftWidth​

    • Optional borderLeftWidth: number

    Inherited from​

    Omit.borderLeftWidth

    borderTopWidth​

    • Optional borderTopWidth: number

    Inherited from​

    Omit.borderTopWidth

    borderColor​

    • Optional borderColor: ColorProp

    Inherited from​

    Omit.borderColor

    Copyright © 2023 Stefan Aleksovski. Built with Docusaurus.
    - + \ No newline at end of file diff --git a/docs/public-api/interfaces/MarginStyleProps.html b/docs/public-api/interfaces/MarginStyleProps.html index eb49405..11e3d7f 100644 --- a/docs/public-api/interfaces/MarginStyleProps.html +++ b/docs/public-api/interfaces/MarginStyleProps.html @@ -7,13 +7,13 @@ - +
    Copyright © 2023 Stefan Aleksovski. Built with Docusaurus.
    - + \ No newline at end of file diff --git a/docs/public-api/interfaces/OtherStyleProps.html b/docs/public-api/interfaces/OtherStyleProps.html index f270bb7..ddbdd81 100644 --- a/docs/public-api/interfaces/OtherStyleProps.html +++ b/docs/public-api/interfaces/OtherStyleProps.html @@ -7,13 +7,13 @@ - +
    Copyright © 2023 Stefan Aleksovski. Built with Docusaurus.
    - + \ No newline at end of file diff --git a/docs/public-api/interfaces/OverlapWidgetProps.html b/docs/public-api/interfaces/OverlapWidgetProps.html index 82dce0a..e383fbd 100644 --- a/docs/public-api/interfaces/OverlapWidgetProps.html +++ b/docs/public-api/interfaces/OverlapWidgetProps.html @@ -7,7 +7,7 @@ - + @@ -17,7 +17,7 @@ the widget it will open the application when clicked
  • "OPEN_URI" - This clickAction requires a clickActionData that contains { uri: 'some-uri' }. The uri can be a web uri (https://google.com), or an app deep link (androidwidgetexample://deep-link) For the link to open a screen in the app deep linking must be set up

    • Inherited from​

    ClickActionProps.clickAction

    clickActionData​

    • Optional clickActionData: Record<string, unknown>

    Additional data that will be passed when the widget is clicked.

    If clickAction is OPEN_URI it must contain { uri: 'some-uri' }

    Inherited from​

    ClickActionProps.clickActionData

    Copyright © 2023 Stefan Aleksovski. Built with Docusaurus.
    - + \ No newline at end of file diff --git a/docs/public-api/interfaces/PaddingStyleProps.html b/docs/public-api/interfaces/PaddingStyleProps.html index ad355a5..3844256 100644 --- a/docs/public-api/interfaces/PaddingStyleProps.html +++ b/docs/public-api/interfaces/PaddingStyleProps.html @@ -7,13 +7,13 @@ - +
    Copyright © 2023 Stefan Aleksovski. Built with Docusaurus.
    - + \ No newline at end of file diff --git a/docs/public-api/interfaces/RequestWidgetUpdateProps.html b/docs/public-api/interfaces/RequestWidgetUpdateProps.html index c972cb4..1ffc713 100644 --- a/docs/public-api/interfaces/RequestWidgetUpdateProps.html +++ b/docs/public-api/interfaces/RequestWidgetUpdateProps.html @@ -7,7 +7,7 @@ - + @@ -15,7 +15,7 @@

    Interface: RequestWidgetUpdateProps

    Properties​

    widgetName​

    • widgetName: string

    The name of the widget to update

    renderWidget​

    • renderWidget: (props: WidgetInfo) => Element | Promise<Element>

    Type declaration​

    ▸ (props): Element | Promise<Element>

    Callback function that will be called with WidgetInfo It should return the JSX of the updated widget

    Parameters​
    NameType
    propsWidgetInfo
    Returns​

    Element | Promise<Element>

    widgetNotFound​

    • Optional widgetNotFound: () => void

    Type declaration​

    ▸ (): void

    Callback function that will be called if no widgets are added on the home screen It can be used to clean up background tasks that update the widget periodically

    Returns​

    void

    Copyright © 2023 Stefan Aleksovski. Built with Docusaurus.
    - + \ No newline at end of file diff --git a/docs/public-api/interfaces/ScreenInfo.html b/docs/public-api/interfaces/ScreenInfo.html index 00b5013..46073e9 100644 --- a/docs/public-api/interfaces/ScreenInfo.html +++ b/docs/public-api/interfaces/ScreenInfo.html @@ -7,13 +7,13 @@ - +
    Copyright © 2023 Stefan Aleksovski. Built with Docusaurus.
    - + \ No newline at end of file diff --git a/docs/public-api/interfaces/SizeStyleProps.html b/docs/public-api/interfaces/SizeStyleProps.html index 44f39de..0972560 100644 --- a/docs/public-api/interfaces/SizeStyleProps.html +++ b/docs/public-api/interfaces/SizeStyleProps.html @@ -7,13 +7,13 @@ - +
    Copyright © 2023 Stefan Aleksovski. Built with Docusaurus.
    - + \ No newline at end of file diff --git a/docs/public-api/interfaces/SvgWidgetProps.html b/docs/public-api/interfaces/SvgWidgetProps.html index 510b817..c1b84fb 100644 --- a/docs/public-api/interfaces/SvgWidgetProps.html +++ b/docs/public-api/interfaces/SvgWidgetProps.html @@ -7,7 +7,7 @@ - + @@ -17,7 +17,7 @@ the widget it will open the application when clicked
  • "OPEN_URI" - This clickAction requires a clickActionData that contains { uri: 'some-uri' }. The uri can be a web uri (https://google.com), or an app deep link (androidwidgetexample://deep-link) For the link to open a screen in the app deep linking must be set up

    • Inherited from​

    ClickActionProps.clickAction

    clickActionData​

    • Optional clickActionData: Record<string, unknown>

    Additional data that will be passed when the widget is clicked.

    If clickAction is OPEN_URI it must contain { uri: 'some-uri' }

    Inherited from​

    ClickActionProps.clickActionData

    Copyright © 2023 Stefan Aleksovski. Built with Docusaurus.
    - + \ No newline at end of file diff --git a/docs/public-api/interfaces/TextWidgetProps.html b/docs/public-api/interfaces/TextWidgetProps.html index e71f842..e0f8ff4 100644 --- a/docs/public-api/interfaces/TextWidgetProps.html +++ b/docs/public-api/interfaces/TextWidgetProps.html @@ -7,7 +7,7 @@ - + @@ -17,7 +17,7 @@ the widget it will open the application when clicked
  • "OPEN_URI" - This clickAction requires a clickActionData that contains { uri: 'some-uri' }. The uri can be a web uri (https://google.com), or an app deep link (androidwidgetexample://deep-link) For the link to open a screen in the app deep linking must be set up

    • Inherited from​

    ClickActionProps.clickAction

    clickActionData​

    • Optional clickActionData: Record<string, unknown>

    Additional data that will be passed when the widget is clicked.

    If clickAction is OPEN_URI it must contain { uri: 'some-uri' }

    Inherited from​

    ClickActionProps.clickActionData

    Copyright © 2023 Stefan Aleksovski. Built with Docusaurus.
    - + \ No newline at end of file diff --git a/docs/public-api/interfaces/TextWidgetStyle.html b/docs/public-api/interfaces/TextWidgetStyle.html index 8c9c328..77ec3b1 100644 --- a/docs/public-api/interfaces/TextWidgetStyle.html +++ b/docs/public-api/interfaces/TextWidgetStyle.html @@ -7,7 +7,7 @@ - + @@ -15,7 +15,7 @@

    Interface: TextWidgetStyle

    Hierarchy​

    Properties​

    color​

    • Optional color: ColorProp

    fontSize​

    • Optional fontSize: number

    fontFamily​

    • Optional fontFamily: string

    fontStyle​

    • Optional fontStyle: "normal" | "italic"

    fontWeight​

    • Optional fontWeight: "bold" | "normal" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900"

    Specifies font weight. The values 'normal' and 'bold' are supported for most fonts. Not all fonts have a variant for each of the numeric values, in that case the closest one is chosen.

    adjustsFontSizeToFit​

    • Optional adjustsFontSizeToFit: boolean

    textAlign​

    • Optional textAlign: "center" | "right" | "left"

    letterSpacing​

    • Optional letterSpacing: number

    textShadowColor​

    • Optional textShadowColor: ColorProp

    textShadowRadius​

    • Optional textShadowRadius: number

    textShadowOffset​

    • Optional textShadowOffset: Object

    Type declaration​

    NameType
    heightnumber
    widthnumber

    margin​

    • Optional margin: number

    Inherited from​

    CommonStyleProps.margin

    marginHorizontal​

    • Optional marginHorizontal: number

    Inherited from​

    CommonStyleProps.marginHorizontal

    marginVertical​

    • Optional marginVertical: number

    Inherited from​

    CommonStyleProps.marginVertical

    marginTop​

    • Optional marginTop: number

    Inherited from​

    CommonStyleProps.marginTop

    marginBottom​

    • Optional marginBottom: number

    Inherited from​

    CommonStyleProps.marginBottom

    marginLeft​

    • Optional marginLeft: number

    Inherited from​

    CommonStyleProps.marginLeft

    marginRight​

    • Optional marginRight: number

    Inherited from​

    CommonStyleProps.marginRight

    padding​

    • Optional padding: number

    Inherited from​

    CommonStyleProps.padding

    paddingHorizontal​

    • Optional paddingHorizontal: number

    Inherited from​

    CommonStyleProps.paddingHorizontal

    paddingVertical​

    • Optional paddingVertical: number

    Inherited from​

    CommonStyleProps.paddingVertical

    paddingTop​

    • Optional paddingTop: number

    Inherited from​

    CommonStyleProps.paddingTop

    paddingBottom​

    • Optional paddingBottom: number

    Inherited from​

    CommonStyleProps.paddingBottom

    paddingLeft​

    • Optional paddingLeft: number

    Inherited from​

    CommonStyleProps.paddingLeft

    paddingRight​

    • Optional paddingRight: number

    Inherited from​

    CommonStyleProps.paddingRight

    height​

    • Optional height: number | "wrap_content" | "match_parent"

    Inherited from​

    CommonStyleProps.height

    width​

    • Optional width: number | "wrap_content" | "match_parent"

    Inherited from​

    CommonStyleProps.width

    backgroundColor​

    • Optional backgroundColor: ColorProp

    Inherited from​

    CommonStyleProps.backgroundColor

    backgroundGradient​

    • Optional backgroundGradient: Object

    Type declaration​

    NameType
    fromColorProp
    toColorProp
    orientation"TOP_BOTTOM" | "TR_BL" | "RIGHT_LEFT" | "BR_TL" | "BOTTOM_TOP" | "BL_TR" | "LEFT_RIGHT" | "TL_BR"

    Inherited from​

    CommonStyleProps.backgroundGradient

    borderWidth​

    • Optional borderWidth: number

    Inherited from​

    CommonStyleProps.borderWidth

    borderTopWidth​

    • Optional borderTopWidth: number

    Inherited from​

    CommonStyleProps.borderTopWidth

    borderBottomWidth​

    • Optional borderBottomWidth: number

    Inherited from​

    CommonStyleProps.borderBottomWidth

    borderLeftWidth​

    • Optional borderLeftWidth: number

    Inherited from​

    CommonStyleProps.borderLeftWidth

    borderRightWidth​

    • Optional borderRightWidth: number

    Inherited from​

    CommonStyleProps.borderRightWidth

    borderColor​

    • Optional borderColor: ColorProp

    Inherited from​

    CommonStyleProps.borderColor

    borderTopColor​

    • Optional borderTopColor: ColorProp

    Inherited from​

    CommonStyleProps.borderTopColor

    borderBottomColor​

    • Optional borderBottomColor: ColorProp

    Inherited from​

    CommonStyleProps.borderBottomColor

    borderLeftColor​

    • Optional borderLeftColor: ColorProp

    Inherited from​

    CommonStyleProps.borderLeftColor

    borderRightColor​

    • Optional borderRightColor: ColorProp

    Inherited from​

    CommonStyleProps.borderRightColor

    borderRadius​

    • Optional borderRadius: number

    Inherited from​

    CommonStyleProps.borderRadius

    borderTopLeftRadius​

    • Optional borderTopLeftRadius: number

    Inherited from​

    CommonStyleProps.borderTopLeftRadius

    borderTopRightRadius​

    • Optional borderTopRightRadius: number

    Inherited from​

    CommonStyleProps.borderTopRightRadius

    borderBottomLeftRadius​

    • Optional borderBottomLeftRadius: number

    Inherited from​

    CommonStyleProps.borderBottomLeftRadius

    borderBottomRightRadius​

    • Optional borderBottomRightRadius: number

    Inherited from​

    CommonStyleProps.borderBottomRightRadius

    borderStyle​

    • Optional borderStyle: "solid" | "dotted" | "dashed"

    Inherited from​

    CommonStyleProps.borderStyle

    rotation​

    • Optional rotation: number

    Inherited from​

    CommonStyleProps.rotation

    Copyright © 2023 Stefan Aleksovski. Built with Docusaurus.
    - + \ No newline at end of file diff --git a/docs/public-api/interfaces/Widget.html b/docs/public-api/interfaces/Widget.html index 51b2103..1b1839d 100644 --- a/docs/public-api/interfaces/Widget.html +++ b/docs/public-api/interfaces/Widget.html @@ -7,7 +7,7 @@ - + @@ -19,7 +19,7 @@ but will not open the configuration activity when added on home screen, and the configuration can be changed by holding the widget and selecting configure. The widget will not be configurable if widgetFeatures is not provided

    updatePeriodMillis​

    • Optional updatePeriodMillis: number

    How often the widget should be updated, in milliseconds.

    Default is 0 (no automatic updates)

    Minimum is 1.800.000 (30 minutes == 30 60 1000).

    Copyright © 2023 Stefan Aleksovski. Built with Docusaurus.
    - + \ No newline at end of file diff --git a/docs/public-api/interfaces/WidgetConfigurationScreenProps.html b/docs/public-api/interfaces/WidgetConfigurationScreenProps.html index 515595b..ee48d67 100644 --- a/docs/public-api/interfaces/WidgetConfigurationScreenProps.html +++ b/docs/public-api/interfaces/WidgetConfigurationScreenProps.html @@ -7,7 +7,7 @@ - + @@ -15,7 +15,7 @@

    Interface: WidgetConfigurationScreenProps

    Properties​

    widgetInfo​

    • widgetInfo: WidgetInfo

    Information about the widget being configured.

    renderWidget​

    • renderWidget: (widgetComponent: Element) => void

    Type declaration​

    ▸ (widgetComponent): void

    Function that can be called with the Widget JSX to render

    Parameters​
    NameType
    widgetComponentElement
    Returns​

    void

    setResult​

    • setResult: (result: "ok" | "cancel") => void

    Type declaration​

    ▸ (result): void

    This must be called after finishing with configuration. 'ok' means the widget is configured and can be added, 'cancel' means the configuration process is canceled and the widget will be removed if this is the first time configuring it

    Parameters​
    NameType
    result"ok" | "cancel"
    Returns​

    void

    Copyright © 2023 Stefan Aleksovski. Built with Docusaurus.
    - + \ No newline at end of file diff --git a/docs/public-api/interfaces/WidgetInfo.html b/docs/public-api/interfaces/WidgetInfo.html index 8fc0b3f..da127ce 100644 --- a/docs/public-api/interfaces/WidgetInfo.html +++ b/docs/public-api/interfaces/WidgetInfo.html @@ -7,13 +7,13 @@ - +
    Copyright © 2023 Stefan Aleksovski. Built with Docusaurus.
    - + \ No newline at end of file diff --git a/docs/public-api/interfaces/WidgetPreviewProps.html b/docs/public-api/interfaces/WidgetPreviewProps.html index 7404549..d00bb8a 100644 --- a/docs/public-api/interfaces/WidgetPreviewProps.html +++ b/docs/public-api/interfaces/WidgetPreviewProps.html @@ -7,13 +7,13 @@ - +

    Interface: WidgetPreviewProps

    Properties​

    renderWidget​

    • renderWidget: (props: { width: number ; height: number }) => Element

    Type declaration​

    ▸ (props): Element

    Callback function that will be called by WidgetPreview to generate the widget UI.

    Parameters​
    NameType
    propsObject
    props.widthnumber
    props.heightnumber
    Returns​

    Element

    height​

    • height: number

    The height of the widget

    width​

    • width: number

    The width of the widget

    onClick​

    • Optional onClick: (props: OnClick) => void

    Type declaration​

    ▸ (props): void

    Callback function that will be called when clicked on a clickable area of the widget.

    Parameters​
    NameType
    propsOnClick
    Returns​

    void

    showBorder​

    • Optional showBorder: boolean

    Whether to show a border around the widget. Usefull for widgets that do not use the whole space.

    highlightClickableAreas​

    • Optional highlightClickableAreas: boolean

    Whether to add a highlight to the clickable areas

    Copyright © 2023 Stefan Aleksovski. Built with Docusaurus.
    - + \ No newline at end of file diff --git a/docs/public-api/interfaces/WidgetTaskHandlerProps.html b/docs/public-api/interfaces/WidgetTaskHandlerProps.html index 8257d02..a1b0b65 100644 --- a/docs/public-api/interfaces/WidgetTaskHandlerProps.html +++ b/docs/public-api/interfaces/WidgetTaskHandlerProps.html @@ -7,13 +7,13 @@ - +

    Interface: WidgetTaskHandlerProps

    Properties​

    widgetInfo​

    • widgetInfo: WidgetInfo

    Information about the widget being handled.

    widgetAction​

    • widgetAction: "WIDGET_ADDED" | "WIDGET_UPDATE" | "WIDGET_RESIZED" | "WIDGET_DELETED" | "WIDGET_CLICK"

    What kind of action is being handled

    renderWidget​

    • renderWidget: (widgetComponent: Element) => void

    Type declaration​

    ▸ (widgetComponent): void

    Function that needs to be called with the Widget JSX to render

    Parameters​
    NameType
    widgetComponentElement
    Returns​

    void

    clickAction​

    • Optional clickAction: string

    Click action if widgetAction was WIDGET_CLICK

    clickActionData​

    • Optional clickActionData: Record<string, unknown>

    Additional click action data if widgetAction was WIDGET_CLICK

    Copyright © 2023 Stefan Aleksovski. Built with Docusaurus.
    - + \ No newline at end of file diff --git a/docs/public-api/interfaces/WithAndroidWidgetsParams.html b/docs/public-api/interfaces/WithAndroidWidgetsParams.html index bcdcfcb..bbf2235 100644 --- a/docs/public-api/interfaces/WithAndroidWidgetsParams.html +++ b/docs/public-api/interfaces/WithAndroidWidgetsParams.html @@ -7,13 +7,13 @@ - +
    Copyright © 2023 Stefan Aleksovski. Built with Docusaurus.
    - + \ No newline at end of file diff --git a/docs/public-api/namespaces/FlexWidget.html b/docs/public-api/namespaces/FlexWidget.html index 0d1e38c..69126f5 100644 --- a/docs/public-api/namespaces/FlexWidget.html +++ b/docs/public-api/namespaces/FlexWidget.html @@ -7,13 +7,13 @@ - +

    Namespace: FlexWidget

    Variables​

    __name__​

    • __name__: string

    Functions​

    convertProps​

    ▸ convertProps(props): FlexWidgetInternalProps

    Parameters​

    NameType
    propsFlexWidgetProps

    Returns​

    FlexWidgetInternalProps

    processChildren​

    ▸ processChildren(«destructured», children): any[]

    Parameters​

    NameType
    «destructured»FlexWidgetProps
    childrenany[]

    Returns​

    any[]

    Copyright © 2023 Stefan Aleksovski. Built with Docusaurus.
    - + \ No newline at end of file diff --git a/docs/public-api/namespaces/IconWidget.html b/docs/public-api/namespaces/IconWidget.html index 6b8f9e4..afb02af 100644 --- a/docs/public-api/namespaces/IconWidget.html +++ b/docs/public-api/namespaces/IconWidget.html @@ -7,13 +7,13 @@ - +

    Namespace: IconWidget

    Variables​

    __name__​

    • __name__: string

    Functions​

    convertProps​

    ▸ convertProps(props): IconWidgetInternalProps

    Parameters​

    NameType
    propsIconWidgetProps

    Returns​

    IconWidgetInternalProps

    Copyright © 2023 Stefan Aleksovski. Built with Docusaurus.
    - + \ No newline at end of file diff --git a/docs/public-api/namespaces/ImageWidget.html b/docs/public-api/namespaces/ImageWidget.html index 8dc4d4d..0daed34 100644 --- a/docs/public-api/namespaces/ImageWidget.html +++ b/docs/public-api/namespaces/ImageWidget.html @@ -7,13 +7,13 @@ - +

    Namespace: ImageWidget

    Variables​

    __name__​

    • __name__: string

    Functions​

    convertProps​

    ▸ convertProps(props): ImageWidgetInternalProps

    Parameters​

    NameType
    propsImageWidgetProps

    Returns​

    ImageWidgetInternalProps

    Copyright © 2023 Stefan Aleksovski. Built with Docusaurus.
    - + \ No newline at end of file diff --git a/docs/public-api/namespaces/ListWidget.html b/docs/public-api/namespaces/ListWidget.html index ecf1f6c..33a003e 100644 --- a/docs/public-api/namespaces/ListWidget.html +++ b/docs/public-api/namespaces/ListWidget.html @@ -7,13 +7,13 @@ - +

    Namespace: ListWidget

    Variables​

    __name__​

    • __name__: string

    Functions​

    convertProps​

    ▸ convertProps(props): ListWidgetInternalProps

    Parameters​

    NameType
    propsListWidgetProps

    Returns​

    ListWidgetInternalProps

    Copyright © 2023 Stefan Aleksovski. Built with Docusaurus.
    - + \ No newline at end of file diff --git a/docs/public-api/namespaces/OverlapWidget.html b/docs/public-api/namespaces/OverlapWidget.html index d146972..d90ad9e 100644 --- a/docs/public-api/namespaces/OverlapWidget.html +++ b/docs/public-api/namespaces/OverlapWidget.html @@ -7,13 +7,13 @@ - +

    Namespace: OverlapWidget

    Variables​

    __name__​

    • __name__: string

    Functions​

    convertProps​

    ▸ convertProps(props): CommonInternalProps

    Parameters​

    NameType
    propsOverlapWidgetProps

    Returns​

    CommonInternalProps

    Copyright © 2023 Stefan Aleksovski. Built with Docusaurus.
    - + \ No newline at end of file diff --git a/docs/public-api/namespaces/SvgWidget.html b/docs/public-api/namespaces/SvgWidget.html index 3edda62..df28b63 100644 --- a/docs/public-api/namespaces/SvgWidget.html +++ b/docs/public-api/namespaces/SvgWidget.html @@ -7,13 +7,13 @@ - +

    Namespace: SvgWidget

    Variables​

    __name__​

    • __name__: string

    Functions​

    convertProps​

    ▸ convertProps(props): SvgWidgetInternalProps

    Parameters​

    NameType
    propsSvgWidgetProps

    Returns​

    SvgWidgetInternalProps

    Copyright © 2023 Stefan Aleksovski. Built with Docusaurus.
    - + \ No newline at end of file diff --git a/docs/public-api/namespaces/TextWidget.html b/docs/public-api/namespaces/TextWidget.html index c92d38d..594ba39 100644 --- a/docs/public-api/namespaces/TextWidget.html +++ b/docs/public-api/namespaces/TextWidget.html @@ -7,13 +7,13 @@ - +

    Namespace: TextWidget

    Functions​

    convertProps​

    ▸ convertProps(props): TextWidgetInternalProps

    Parameters​

    NameType
    propsTextWidgetProps

    Returns​

    TextWidgetInternalProps

    Variables​

    __name__​

    • __name__: string

    Copyright © 2023 Stefan Aleksovski. Built with Docusaurus.
    - + \ No newline at end of file diff --git a/docs/tutorial/congratulations.html b/docs/tutorial/congratulations.html index 09496c8..4ea3e3f 100644 --- a/docs/tutorial/congratulations.html +++ b/docs/tutorial/congratulations.html @@ -7,13 +7,13 @@ - +

    Congratulations!

    You have just learned the basics of react-native-android-widget and created your first widget.

    react-native-android-widget has much more to offer!

    Anything unclear or buggy in this tutorial? Please report it!

    What's next?​

    Copyright © 2023 Stefan Aleksovski. Built with Docusaurus.
    - + \ No newline at end of file diff --git a/docs/tutorial/make-widget-configurable.html b/docs/tutorial/make-widget-configurable.html index 92d261f..b767a74 100644 --- a/docs/tutorial/make-widget-configurable.html +++ b/docs/tutorial/make-widget-configurable.html @@ -7,13 +7,13 @@ - +

    Make Widget configurable (Optional)

    In order to some of the widgets configurable, we need to create a widget configuration activity.

    Note

    WIDGET_ADDED event will be fired as soon as the widget is added on the home screen, regardless of whether it is configurable or not. We will need to have a fallback configuration.

    If the configuration is cancelled when adding the widget, WIDGET_DELETED will be fired.

    Add a widget configuration activity class​

    android/app/src/main/java/com/yourapppackage/WidgetConfigurationActivity.java
    package com.yourapppackage;

    import com.reactnativeandroidwidget.RNWidgetConfigurationActivity;

    public class WidgetConfigurationActivity extends RNWidgetConfigurationActivity {
    }

    Update the widget provider xml file for the widget​

    In the widget provider we created, add configure and widgetFeatures properties.

    android/app/src/main/res/xml/widgetprovider_hello.xml
    <?xml version="1.0" encoding="utf-8"?>
    <appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
        android:minWidth="320dp"
        android:minHeight="120dp"

        android:updatePeriodMillis="0"

        android:initialLayout="@layout/rn_widget"

        android:previewImage="@drawable/hello_preview"
        android:description="@string/widget_hello_description"

        android:resizeMode="none"


        android:configure="com.yourapppackage.WidgetConfigurationActivity"
        android:widgetFeatures="reconfigurable"


        android:widgetCategory="home_screen">
    </appwidget-provider>
    • android:configure should reference the configuration activity we created
    • android:widgetFeatures can be reconfigurable or reconfigurable|configuration_optional
      • reconfigurable means that the widget will be configurable and the configuration activity will open as soon as the widget is added to the home screen. Its configuration can also be changed later by long-pressing the widget.
      • reconfigurable|configuration_optional means that the widget configuration can only be changed by long-pressing the widget, and the configuration activity will not open when the widget is added

    Add widget configuration activity in AndroidManifest.xml​

    Finally, we need to add the widget configuration activity in AndroidManifest.xml

    In AndroidManifest.xml, add a activity

    android/app/src/main/AndroidManifest.xml
    <manifest ...>
      ...
      <application
          android:name=".MainApplication"
          ...>

          <activity
              android:name=".MainActivity"
              ...>
          </activity>

          <activity android:name=".WidgetConfigurationActivity"
              android:exported="true">
              <intent-filter>
                  <action android:name="android.appwidget.action.APPWIDGET_CONFIGURE"/>
              </intent-filter>
          </activity>
      </application>
    </manifest>

    For the activity

    • android:name myst be .WidgetConfigurationActivity (same as the Java class extending RNWidgetConfigurationActivity)

    Make Widget configurable in Expo using config plugin​

    If using Expo, the configuration is much simpler. We will only need to set the widgetFeatures property in the config plugin to reconfigurable or reconfigurable|configuration_optional.

    app.config.ts
    import type { ConfigContext, ExpoConfig } from 'expo/config';
    import type { WithAndroidWidgetsParams } from 'react-native-android-widget';

    const widgetConfig: WithAndroidWidgetsParams = {
      widgets: [
        {
          name: 'Hello',
          label: 'My Hello Widget',
          minWidth: '320dp',
          minHeight: '120dp',
          description: 'This is my first widget',
          previewImage: './assets/widget-preview/hello.png',
          updatePeriodMillis: 1800000,

          // This
          widgetFeatures: 'reconfigurable',
        },
      ],
    };

    export default ({ config }: ConfigContext): ExpoConfig => ({
      ...config,
      name: 'My Expo App Name',
      plugins: [['react-native-android-widget', widgetConfig]],
    });

    Create the Widget Configuration Screen​

    For the UI of the Widget Configuration Screen in both bare React Native and Expo, see the registerWidgetConfigurationScreen

    Copyright © 2023 Stefan Aleksovski. Built with Docusaurus.
    - + \ No newline at end of file diff --git a/docs/tutorial/register-task-handler.html b/docs/tutorial/register-task-handler.html index fcb6358..80680d6 100644 --- a/docs/tutorial/register-task-handler.html +++ b/docs/tutorial/register-task-handler.html @@ -7,14 +7,14 @@ - +

    Register task handler

    We designed and previewed our widget. Now we need to register a task handler that will handle the logic of adding/updating a widget to the home screen, as well as handle widget clicks.

    Create task handler function​

    First, create a task handler function, containing:

    widget-task-handler.tsx
    import React from 'react';
    import type { WidgetTaskHandlerProps } from 'react-native-android-widget';
    import { HelloWidget } from './HelloWidget';

    const nameToWidget = {
      // Hello will be the **name** with which we will reference our widget.
      Hello: HelloWidget,
    };

    export async function widgetTaskHandler(props: WidgetTaskHandlerProps) {
      const widgetInfo = props.widgetInfo;
      const Widget =
        nameToWidget[widgetInfo.widgetName as keyof typeof nameToWidget];

      switch (props.widgetAction) {
        case 'WIDGET_ADDED':
          props.renderWidget(<Widget />);
          break;

        case 'WIDGET_UPDATE':
          // Not needed for now
          break;

        case 'WIDGET_RESIZED':
          // Not needed for now
          break;

        case 'WIDGET_DELETED':
          // Not needed for now
          break;

        case 'WIDGET_CLICK':
          // Not needed for now
          break;

        default:
          break;
      }
    }

    We use nameToWidget to map from the name to the component defining the widget (useful if we have multiple widgets). There are other ways to achieve this.

    Register widget task handler​

    In the main index.js (or index.ts, index.tsx) file for our app, when we register the main component, register the widget task handler.

    index.ts
    import { AppRegistry } from 'react-native';
    import { registerWidgetTaskHandler } from 'react-native-android-widget';
    import { name as appName } from './app.json';
    import App from './App';
    import { widgetTaskHandler } from './widget-task-handler';

    AppRegistry.registerComponent(appName, () => App);
    registerWidgetTaskHandler(widgetTaskHandler);

    Register widget task handler (Expo)​

    If we are using Expo, there is no index.js (or index.ts, index.tsx), but we can create it.

    First, update package.json main field to point to index.ts (or .js) instead of node_modules/expo/AppEntry.js

    package.json
    {
      "name": "my-expo-app",
      "main": "index.ts",
      ...
    }

    Create the file, using node_modules/expo/AppEntry.js as a template. Then import widgetTaskHandler and register it.

    index.ts
    import { registerRootComponent } from 'expo';
    import { registerWidgetTaskHandler } from 'react-native-android-widget';

    import App from './App';
    import { widgetTaskHandler } from './widget-task-handler';

    // registerRootComponent calls AppRegistry.registerComponent('main', () => App);
    // It also ensures that whether you load the app in Expo Go or in a native build,
    // the environment is set up appropriately
    registerRootComponent(App);
    registerWidgetTaskHandler(widgetTaskHandler);

    Next steps​

    We designed our widget, saw the preview, and registered a handler that will handle adding it to the home screen.

    We still need to tell the application that there is a widget called Hello.

    Continue with:

    Copyright © 2023 Stefan Aleksovski. Built with Docusaurus.
    - + \ No newline at end of file diff --git a/docs/tutorial/register-widget-expo.html b/docs/tutorial/register-widget-expo.html index 0d8dd25..a9c047c 100644 --- a/docs/tutorial/register-widget-expo.html +++ b/docs/tutorial/register-widget-expo.html @@ -7,13 +7,13 @@ - +

    Register widget in Expo

    If we are using Expo for our app, we might not have access to the native android directory, so we cannot create/update the required files.

    Expo provides Config Plugins that can be used to configure the native android project.

    react-native-android-widget exports a config plugin.

    Create widget preview image​

    When the android launcher shows the widget select popup, we can show a screenshot of our widget to give the user an idea what the widget looks like.

    Take a screenshot of the widget, and place it inside assets/widget-preview/hello.png

    assets/widget-preview/hello.png

    Hello Widget Preview

    Add custom fonts used in widgets​

    If we need custom fonts for our widgets, we can add them in the assets directory

    For example, assets/fonts/Inter.ttf

    Use config plugin in app.(json|config.js|config.ts)​

    In this example we are using app.config.ts but the changes are similar for all configuration types.

    app.config.ts
    import type { ConfigContext, ExpoConfig } from 'expo/config';
    import type { WithAndroidWidgetsParams } from 'react-native-android-widget';

    const widgetConfig: WithAndroidWidgetsParams = {
      // Paths to all custom fonts used in all widgets
      fonts: ['./assets/fonts/Inter.ttf'],
      widgets: [
        {
          name: 'Hello', // This name will be the **name** with which we will reference our widget.
          label: 'My Hello Widget', // Label shown in the widget picker
          minWidth: '320dp',
          minHeight: '120dp',
          description: 'This is my first widget', // Description shown in the widget picker
          previewImage: './assets/widget-preview/hello.png', // Path to widget preview image

          // How often, in milliseconds, that this AppWidget wants to be updated.
          // The task handler will be called with widgetAction = 'UPDATE_WIDGET'.
          // Default is 0 (no automatic updates)
          // Minimum is 1800000 (30 minutes == 30 * 60 * 1000).
          updatePeriodMillis: 1800000,
        },
      ],
    };

    export default ({ config }: ConfigContext): ExpoConfig => ({
      ...config,
      name: 'My Expo App Name',
      plugins: [['react-native-android-widget', widgetConfig]],
    });

    Build Dev Client​

    Build an Expo Dev Client that will include react-native-android-widget and the new widget

    Copyright © 2023 Stefan Aleksovski. Built with Docusaurus.
    - + \ No newline at end of file diff --git a/docs/tutorial/register-widget.html b/docs/tutorial/register-widget.html index 09af9d2..e7489c4 100644 --- a/docs/tutorial/register-widget.html +++ b/docs/tutorial/register-widget.html @@ -7,13 +7,13 @@ - +

    Register widget

    In order to register our widget so that it can be selected from the launchers widget picker, we need to tell the android app some information about the widget.

    Add a widget provider class​

    Create a new package widget in the native android app. Inside it create a class Hello.java

    android/app/src/main/java/com/yourapppackage/widget/Hello.java
    package com.yourapppackage.widget;

    import com.reactnativeandroidwidget.RNWidgetProvider;

    public class Hello extends RNWidgetProvider {
    }

    The class name will be used to reference our widget.

    Create widget preview image​

    When the android launcher shows the widget select popup, we can show a screenshot of our widget to give the user an idea what the widget looks like.

    Take a screenshot of the widget, and place it inside android/app/src/main/res/drawable/hello_preview.png

    android/app/src/main/res/drawable/hello_preview.png

    Hello Widget Preview

    Add widget description string (Optional)​

    When the android launcher shows the widget select popup, under the name of the widget it can show an optional description about the widget. If we want to show a description for our widget, we need to add a description string in strings.xml

    android/app/src/main/res/values/strings.xml
    <?xml version="1.0" encoding="utf-8"?>
    <resources>
        <string name="app_name">My App Name</string>
        <string name="widget_hello_description" translatable="false">This is my first widget</string>
    </resources>

    Add a widget provider xml file​

    Create a new xml file in the resources directory containing the details about the widget.

    android/app/src/main/res/xml/widgetprovider_hello.xml
    <?xml version="1.0" encoding="utf-8"?>
    <appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
        android:minWidth="320dp"
        android:minHeight="120dp"

        android:updatePeriodMillis="0"

        android:initialLayout="@layout/rn_widget"

        android:previewImage="@drawable/hello_preview"
        android:description="@string/widget_hello_description"

        android:resizeMode="none"

        android:widgetCategory="home_screen">
    </appwidget-provider>
    • android:updatePeriodMillis How often, in milliseconds, that this AppWidget wants to be updated. The task handler will be called with widgetAction = 'UPDATE_WIDGET'. See the official docs here
    • android:previewImage should reference the preview image we added previously
    • android:description can be added or not, depending on if we added a description in the previous step

    Add services in AndroidManifest.xml​

    In order to use the ListWidget we need to add a RNWidgetCollectionService service.

    Under the application section in the manifest, add a new RNWidgetCollectionService service. This service will be shared between all widgets, so it needs to be added only once.

    android/app/src/main/AndroidManifest.xml
    <manifest ...>
      ...
      <application
          android:name=".MainApplication"
          ...>

          <activity
              android:name=".MainActivity"
              ...>
          </activity>

          <service
              android:name="com.reactnativeandroidwidget.RNWidgetCollectionService"
              android:permission="android.permission.BIND_REMOTEVIEWS" />
      </application>
    </manifest>

    Add widget receiver in AndroidManifest.xml​

    Finally, we need to add a receiver for our widget, that will receive system events (like widget added, widget resized...)

    In AndroidManifest.xml, add a receiver for the widget

    android/app/src/main/AndroidManifest.xml
    <manifest ...>
      ...
      <application
          android:name=".MainApplication"
          ...>

          <activity
              android:name=".MainActivity"
              ...>
          </activity>

          <service
              android:name="com.reactnativeandroidwidget.RNWidgetCollectionService"
              ... />

          <receiver
              android:name=".widget.Hello"
              android:exported="false"
              android:label="My Hello Widget">
              <intent-filter>
                  <action android:name="android.appwidget.action.APPWIDGET_UPDATE" />
                  <action android:name="com.yourapppackage.WIDGET_CLICK" />
              </intent-filter>
              <meta-data
                  android:name="android.appwidget.provider"
                  android:resource="@xml/widgetprovider_hello" />
          </receiver>
      </application>
    </manifest>

    For the receiver

    • android:name myst be .widget.WidgetName (same as the Java class extending RNWidgetProvider)
    • android:label will be shown in the widget picker

    Add custom fonts used in widgets​

    If we used a custom font in our widget, we must copy the font file(s) to android/app/src/main/assets/fonts. The fontFamily style prop will match the file by name.

    For example, android/app/src/main/assets/fonts/Inter.ttf

    Copyright © 2023 Stefan Aleksovski. Built with Docusaurus.
    - + \ No newline at end of file diff --git a/docs/tutorial/try-it-our.html b/docs/tutorial/try-it-our.html index f21575e..f5ed0a6 100644 --- a/docs/tutorial/try-it-our.html +++ b/docs/tutorial/try-it-our.html @@ -7,13 +7,13 @@ - +

    Try it out

    After rebuilding our app (or creating a Dev Client for Expo), we can start it and add our first widget to the Home Screen.

    If everything was successful, you should see it in the widget picker, and be able to drop it on the home screen.

    Copyright © 2023 Stefan Aleksovski. Built with Docusaurus.
    - + \ No newline at end of file diff --git a/docs/tutorial/widget-design.html b/docs/tutorial/widget-design.html index 604d85c..0a634dc 100644 --- a/docs/tutorial/widget-design.html +++ b/docs/tutorial/widget-design.html @@ -7,13 +7,13 @@ - +

    Widget Design

    This library provides a few primitives that we can use to create widgets.

    You can read more about them and their props in their respective pages.

    Hooks

    Widgets must not use any hooks. They must be functions that return some of the primitives.

    We can create custom components, but at the end they must use only the primitives, not View, Text, or any other React Native component.

    We can also use conditions, for/map, standard jsx. They cannot be async.

    We'll start with a Basic widget that says "Hello".

    HelloWidget.tsx
    import React from 'react';
    import { FlexWidget, TextWidget } from 'react-native-android-widget';

    export function HelloWidget() {
      return (
        <FlexWidget
          style={{
            height: 'match_parent',
            width: 'match_parent',
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: '#ffffff',
            borderRadius: 16,
          }}
        >
          <TextWidget
            text="Hello"
            style={{
              fontSize: 32,
              fontFamily: 'Inter',
              color: '#000000',
            }}
          />
        </FlexWidget>
      );
    }
    Copyright © 2023 Stefan Aleksovski. Built with Docusaurus.
    - + \ No newline at end of file diff --git a/docs/tutorial/widget-preview.html b/docs/tutorial/widget-preview.html index ba339c5..2e3c972 100644 --- a/docs/tutorial/widget-preview.html +++ b/docs/tutorial/widget-preview.html @@ -7,13 +7,13 @@ - +

    Widget Preview

    Designing a widget can be cumbersome if you have to add the widget to a homescreen everytime you make a change.

    react-native-android-widget exports a WidgetPreview component that can be used to preview a widget in any screen in our React Native application.

    HelloWidgetPreviewScreen.tsx
    import * as React from 'react';
    import { StyleSheet, View } from 'react-native';
    import { WidgetPreview } from 'react-native-android-widget';

    import { HelloWidget } from './HelloWidget';

    export function HelloWidgetPreviewScreen() {
      return (
        <View style={styles.container}>
          <WidgetPreview
            renderWidget={() => <HelloWidget />}
            width={320}
            height={200}
          />
        </View>
      );
    }

    const styles = StyleSheet.create({
      container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
      },
    });

    Widget Preview

    Copyright © 2023 Stefan Aleksovski. Built with Docusaurus.
    - + \ No newline at end of file diff --git a/docs/update-widget.html b/docs/update-widget.html index b2a369c..c2433e3 100644 --- a/docs/update-widget.html +++ b/docs/update-widget.html @@ -7,13 +7,13 @@ - +
    -

    Update Widget

    There are two ways to update a widget once it is added on the home screen.

    updatePeriodMillis​

    Schedule updates using android:updatePeriodMillis (or updatePeriodMillis with Expo)

    When using this option, the widgetTaskHandler function will be called with widgetAction = 'WIDGET_UPDATE', and you can use it to update the widget.

    widget-task-handler.tsx
    export async function widgetTaskHandler(props: WidgetTaskHandlerProps) {

      switch (props.widgetAction) {
        ...

        case 'WIDGET_UPDATE':
          props.renderWidget(<Widget />);
          break;

        ...
      }
    }
    Note

    Updates requested with updatePeriodMillis will not be delivered more than once every 30 minutes.

    More details about updatePeriodMillis on the official documentation.

    requestWidgetUpdate​

    You can call requestWidgetUpdate any time when your app is open, as a reuslt of some user action, and request a widget update.

    Scheduling a widget update using android:updatePeriodMillis is out of scope for this library.

    Copyright © 2023 Stefan Aleksovski. Built with Docusaurus.
    - +

    Update Widget

    There are two ways to update a widget once it is added on the home screen.

    updatePeriodMillis​

    Schedule updates using android:updatePeriodMillis (or updatePeriodMillis with Expo)

    When using this option, the widgetTaskHandler function will be called with widgetAction = 'WIDGET_UPDATE', and you can use it to update the widget.

    widget-task-handler.tsx
    export async function widgetTaskHandler(props: WidgetTaskHandlerProps) {

      switch (props.widgetAction) {
        ...

        case 'WIDGET_UPDATE':
          props.renderWidget(<Widget />);
          break;

        ...
      }
    }
    Note

    Updates requested with updatePeriodMillis will not be delivered more than once every 30 minutes.

    More details about updatePeriodMillis on the official documentation.

    requestWidgetUpdate​

    You can call requestWidgetUpdate any time when your app is open as a result of some user action, and request a widget update.

    Copyright © 2023 Stefan Aleksovski. Built with Docusaurus.
    + \ No newline at end of file diff --git a/index.html b/index.html index 7167c2b..b7499bc 100644 --- a/index.html +++ b/index.html @@ -7,13 +7,13 @@ - +

    React Native Android Widget

    Build Android Widgets with React Native

    Check out the Tutorial
    mobile_prototyping

    Easy to Use

    Designed to be easily installed and used. Supports the React Native new architecture.

    Focus on What Matters

    Lets you focus on the design, using familiar concepts from React Native. Leave the heavy lifting for interaction with the Android widget to the library.

    androidExpo

    Expo Support

    Support for expo using custom config plugin.

    Copyright © 2023 Stefan Aleksovski. Built with Docusaurus.
    - + \ No newline at end of file