React Native Android widgets bridged to JS, a proof of concept

Overview

React Native Android Widget Proof Of Concept

Using React Native and having Android widgets is possible.

  1. Create buttons in Java / Android XML to triggers intents
  2. 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:

  1. 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.
  2. We created a Native Module to layout and print a Widget, so BackgroundTaskBridge.java and BackgroundTaskBridgePackage.java were born, along with the layout folder.
  3. 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.
  4. 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.

works with yeti

 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?

    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'

    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

    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

    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
Owner
Netbeast
The Smart Home Company
Netbeast
A UI library for react native, provides 20+ pure JS(ES6) components, focusing on content display and action control.

Teaset ???? 銝剜摰湔獢 A UI library for react native, provides 20+ pure JS(ES6) components, focusing on content display and action control. Installation

null 2.9k Jan 9, 2023
An "awesome" type curated list of how to use React Native and Meteor together

Awesome React Native Meteor An "awesome" type curated list of how to use React Native and Meteor together. Based on Awesome React Native which was bas

Meteor Factory 153 Oct 23, 2022
Component library for React Native

first-born Getting Started These instructions will get you a copy of the project up and running on your local machine for development and testing purp

99x 272 Dec 9, 2022
An utility style framework for React Native

An utility React Native style framework for rapidly building custom user interfaces. Documentation For full documentation, please check https://osmics

OsmiCSX 222 Dec 26, 2022
A framework to test a React Native app during runtime

react-native-diagnose A react runtime diagnose component Rationale Testing native applications is complicated There are features that can only be test

Netbeast 24 Feb 14, 2022
Cross-Platform React Native UI Toolkit

Cross Platform React Native UI Toolkit Get Started Installation Follow these instructions to install React Native Elements! Usage Start using the comp

React Native Elements 23.1k Dec 31, 2022
Customizable set of components for React Native applications

Shoutem UI Shoutem UI is a set of styleable components that enables you to build beautiful React Native applications for iOS and Android. All of our c

Shoutem 4.8k Jan 5, 2023
react-native stateless functional UI components to get you up and running quickly

panza Panza is a collection of ui-components for react-native modelled after iOS. This library is currently undergoing a rewrite and will be updated s

null 258 Dec 16, 2022
Highly customizable and theming components for React Native

@blankapp/ui English | 蝞雿銝剜 Table of Contents Introduction Features Quick Start Prerequisites Installation Run the new app Discussion License Created

Blankapp 106 Nov 10, 2022
UI & API Components Library for React Native

React Native Common Cross Platform React Native UI Toolkit & API Get Started Installation $ yarn add react-native-common or $ npm install react-native

Reza Ghorbani 63 Feb 14, 2022
React Native Components and APIs for the Web

React Native for Web "React Native for Web" makes it possible to run React Native components and APIs on the web using React DOM. Documentation The do

Nicolas Gallagher 20.4k Jan 3, 2023
A framework for building native Windows apps with React.

React Native for Windows Build native Windows apps with React. See the official React Native website for an introduction to React Native. React Native

Microsoft 15.2k Jan 5, 2023
iOS Today Widget in React Native

React Native Today Widget Experimental library investigating limits of implementation iOS App Extensions using React Native. Sample result from Comple

Matj K穩鱉 374 Dec 30, 2022
A simple Facebook Chat Head like bubble for react native

react-native-floating-bubble A simple Facebook Chat Head like bubble for react native. Special thanks to bubble-for-android because this is just react

null 158 Dec 16, 2022
React-Native library for the WidgetKit framework. Integrate a Widget into your App

react-native-widgetkit React-Native Library for the iOS ?? WidgetKit framework Table of Contents ?? Introduction ???? Installation ?? Usage ??????

Fasky 120 Dec 21, 2022
React Native Android widgets bridged to JS, a proof of concept

React Native Android Widget Proof Of Concept ?? Using React Native and having Android widgets is possible. Create buttons in Java / Android XML to tri

Netbeast 203 Dec 1, 2022
React Native Android widgets bridged to JS, a proof of concept

React Native Android Widget Proof Of Concept ?? Using React Native and having Android widgets is possible. Create buttons in Java / Android XML to tri

Netbeast 203 Dec 1, 2022
React-fade: Proof of Concept react fade in/out that just works without any effort

react-fade Proof of Concept react fade in/out that just works without any effort. Inspired by react native layout animations. How it works FadeIn noth

Park June Chul 3 Nov 7, 2022
A simple proof-of-concept probabilistic spreadsheet in React with Material-UI.

A simple proof-of-concept probabilistic spreadsheet in React with Material-UI.

David Singleton 12 Dec 22, 2022
FakeNuke is a simple proof-of-concept social network using React and Firestore.

FaceNuke ?? A proof-of-concept social networking platform written in React! Introduction This project was developed using React and Firebase (also imp

Liam Townsley 1 Apr 23, 2022