React Native Android Widget Proof Of Concept

🤖 Using React Native and having Android widgets is possible.

Create buttons in Java / Android XML to triggers intents
Process these intents from the Javascript side with all the tools and flexibility from react-native.

It is a bit complicated, and we developed it with little knowledge of Android in the beginnings, so I apologize if it feels bad designed. 🚧 Please help us improve the strategy / code layout with Pull Requests.

Try

git clone https://github.com/jsdario/react-native-android-widget-poc
cd react-native-android-widget-poc
npm install # or yarn install
react-native link react-native-background-timer # to avoid the main thread
react-native run-android

Demo

To build your own Android Widget, use this project to bootstrap the widget and hack upon or replicate the strategy to make it work.

How it works

It consists in several Android and React Native concepts. Please read with eskepticism, other formulas may be simpler.

Your React Native app, bundles all the JS, even the one corresponding to your widget and services. It is the main Activity of the Android realm.
A WidgetProvider is meant to render the view onto your Android desktop and also to listen for the events (button presses) that will be sent to your app. It is then, a Broadcast receiver that can process in Java different intents, before it reaches the JS side.
A Headless JS task is the React Native approach to an Android Service. This part will process the intents (events) coming from your WidgetProvider.
A custom Native Module is used to bridge the JS realm with the AppWidgetProvider.

If you take a look at the AndroidManifest.xml you can see how the Android relevant parts are declared to the system:

<manifest 
    xmlns:android="http://schemas.android.com/apk/res/android" package="com.androidwidgetpoc" android:versionCode="1" android:versionName="1.0">
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
+   <uses-permission android:name="android.permission.WAKE_LOCK" />
    <uses-sdk android:minSdkVersion="16" android:targetSdkVersion="22" />
    <application android:name=".MainApplication" android:allowBackup="true" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:theme="@style/AppTheme">
        <activity android:name=".MainActivity" android:label="@string/app_name" android:configChanges="keyboard|keyboardHidden|orientation|screenSize" android:windowSoftInputMode="adjustResize">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
+        <receiver android:name="WidgetProvider">
+            <intent-filter>
+                <action android:name="android.appwidget.action.APPWIDGET_UPDATE" />
+            </intent-filter>
+            <intent-filter>
+                <action android:name="com.androidwidgetpoc.CHARM_1" />
+                <action android:name="com.androidwidgetpoc.CHARM_2" />
+                <action android:name="com.androidwidgetpoc.CHARM_3" />
+            </intent-filter>
+            <meta-data android:name="android.appwidget.provider" android:resource="@xml/widgetprovider" />
+        </receiver>
+        <service android:name=".BackgroundTask" android:enabled="true" android:label="BackgroundAdd" />
    </application>
</manifest>

A step by step guide on how we got here:

We prepared a Headless JS widgetTask.js to run in the as the declared service of BackgroundTask.java. We started using Android Studio heavily from this point.
We created a Native Module to layout and print a Widget, so BackgroundTaskBridge.java and BackgroundTaskBridgePackage.java were born, along with the layout folder.
The WidgetProvider became necessary as a proxy between the intents generated by the Widget layout (rendered thanks to the BackgroundTaskBridge) and the actual calls to the widgetTask service.
Refined and serialised the messages between all the interfaces.

The hardest part? The whole JS bundle has to be running in a context for the widgetTask to run valid code. In this proof of concept app it's real quick and simple, but it can lead to huge inconsistencies if you need to pull some data from a remote or read from AsyncStorage. Be patient. Use redux or other state management to ensure the conditions you want to be running on.

Can I create widgets views using React Native instead of Java?

We haven't done this, but we belive that from this point has to be much easier, having the strategy laid down, we'd need to create Native UI Components calling methods from the RemoteView class and context instead of the View class. It is not trivial to us, though.

This proof of concept is applied at Yeti Smart Home and is used in production. Some of the art is also produced at Netbeast. Follow us in Github or Twitter.

Comments

Why two texts are showing in widget?

Hello,

I ran the applicaiton, it seems to be working fine. Sometimes I'm seeing two icons as "First and Second' and sometimes I'm seeing Placeholder Text. Why like that?

Also if I make any live changes in the app, will the widget reflects accordingly?

opened by creativemind1 3
{"type":"InternalError","message":"react-packager has encountered an internal error, please check your terminal error output for details"}
@jsdario: Hi, I wanted to try the code, but at the beginning it gave problems with lodash, I had to install from npm. Then from the following error: {"type": "InternalError", "message": "react-packager has encountered an internal error, please check your terminal error output for details"}

Info:

"dependencies": { "lodash": "^4.17.5", "react": "16.0.0-beta.5", "react-native": "0.49.3", "react-native-background-timer": "^1.3.0" }, "devDependencies": { "babel-jest": "21.2.0", "babel-preset-react-native": "4.0.0", "jest": "21.2.1", "react-test-renderer": "16.0.0-beta.5" },

Android 7.0. How can I solve?
opened by Angelk90 3

Error: Cannot find module 'lodash/object/assign'

Hi, When Execute react-native link react-native-background-timer there is the following error:

Error: Cannot find module 'lodash/object/assign'
    at Function.Module._resolveFilename (module.js:538:15)
    at Function.Module._load (module.js:468:25)
    at Module.require (module.js:587:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (.\react-native-android-widget-poc\node_modules\xmlbuilder\lib\index.js:5:12)
    at Object.<anonymous> (.\react-native-android-widget-poc\node_modules\xmlbuilder\lib\index.js:14:4)
    at Module._compile (module.js:643:30)
    at Module._extensions..js (module.js:654:10)
    at Object.require.extensions.(anonymous function) [as .js] (.\react-native-android-widget-poc\node_modules\babel-register\lib\node.js:152:7)
    at Module.load (module.js:556:32)

How to resolve it? thanks

opened by mojtabamarashee 2

Super duper cool! Will be trying this out

Thank you for creating this! I will for sure be trying this out!! Just posting to say thanks and ask if there is any updates needed or will it work out of the box?

opened by Noitidart 2
Running the BackgroundService of Widget every minute

Hello,

I have done some changes with your superb widget. I only got stuck at updating the widget even though my phone is not using the App or in off condition.

How do I update BackgroundTask or similar service every minute or so? Can you hint out at something and I will implement at my end. I don't want to take your much time.

Thanks

opened by creativemind1 1