Skip to content

Commit 35d29fc

Browse files
author
jsdario
committed
Adds screenshots
1 parent 5d866ab commit 35d29fc

File tree

7 files changed

+15
-1
lines changed

7 files changed

+15
-1
lines changed

README.md

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,14 +18,21 @@ react-native link react-native-background-timer # to avoid the main thread
1818
react-native run-android
1919
```
2020

21+
### Demo
22+
23+
<img src="screenshots/listed.png" width="240" />
24+
<img src="screenshots/enabled.png" width="240" />
25+
<img src="screenshots/triggering.png" width="240" />
26+
<img src="screenshots/app.png" width="240" />
27+
2128
To build your own Android Widget, use this project to bootstrap the widget and hack upon or replicate the strategy to make it work.
2229

2330
## How it works
2431
It consists in several Android and React Native concepts. Please read with eskepticism, other formulas may be simpler.
2532
* Your React Native app, bundles all the JS, even the one
2633
corresponding to your widget and services. It is the main [Activity](https://developer.android.com/reference/android/app/Activity.html) of the Android realm.
2734
* A [WidgetProvider](https://developer.android.com/reference/android/appwidget/AppWidgetProvider.html) 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.
28-
* An [Headless JS task](https://facebook.github.io/react-native/docs/headless-js-android.html) is the React Native approach to an Android Service. This part will process the intents (events) coming from your WidgetProvider.
35+
* A [Headless JS task](https://facebook.github.io/react-native/docs/headless-js-android.html) is the React Native approach to an Android Service. This part will process the intents (events) coming from your WidgetProvider.
2936
* A custom [Native Module](https://facebook.github.io/react-native/docs/native-modules-android.html) is used to bridge the JS realm with the AppWidgetProvider.
3037

3138
If you take a look at the AndroidManifest.xml you can see how the Android relevant parts are declared to the system:
@@ -73,3 +80,10 @@ We haven't done this, but we belive that from this point has to be much easier,
7380
having the strategy laid down, we'd need to create [Native UI Components](https://facebook.github.io/react-native/docs/native-components-android.html)
7481
calling methods from the `RemoteView` class and context instead of the `View` class.
7582
It is not trivial to us, though.
83+
84+
85+
<a href="https://getyeti.co" target="_blank">
86+
<img alt="works with yeti" src="screenshots/works-with-yeti.png" width="100" />
87+
</a>
88+
89+
> This proof of concept is applied at [Yeti Smart Home](https://getyeti.co) and is used in production. Some of the art is also produced at Netbeast. Follow us in Github or [Twitter](https://twitter.com/netbeast_co).

screenshots/app.png

37.3 KB
Loading

screenshots/enabled.png

1.72 MB
Loading

screenshots/initializing.png

1.7 MB
Loading

screenshots/listed.png

79.2 KB
Loading

screenshots/triggering.png

1.69 MB
Loading

screenshots/works-with-yeti.png

20.7 KB
Loading

0 commit comments

Comments
 (0)