matejkriz / react-native-today-widget Goto Github PK
View Code? Open in Web Editor NEWiOS Today Widget in React Native
License: Other
iOS Today Widget in React Native
License: Other
I can't seem to run the today widget on a device. I've tried creating my own today widget as well, and it seems to crash with an 'Unable to load' screen. This is likely because of too much memory usage. Does anyone have any insight into this?
According to the documentation and demo code, the widget cannot be implemented
I've been receiving this error when I try to use react-native link
command after installing.
rnpm-install ERR! ERRPACKAGEJSON No package found. Are you sure this is a React Native project?
Package name not found in {app-folder}/android/app/src/debug/AndroidManifest.xml
react-native-cl version: 2.0.1
react-native version: 0.47.2
npm version - 5.3.0
yarn version - 0.28.4
In the case that this is indeed a bug and not a misconfiguration of my part, how should I do the manual instalation of the extension in the lib? I've tried to do it using the scripts contained in the bin folder, but so far I could not get it right.
Just checking out this project, pretty cool how it works!
One question I have, I'd like to "refresh" the widget when it's shown i.e. to hit an endpoint and display updated information. Is there any way to detect when the widget is displayed?
The goal is to provide an easy way for moving the widget from node_modules
somewhere else to be under version control.
The reason for this is to be able to modify native project of the widget (e.g. to be able to add some native dependency for the widget).
I just finished installing the react-native-today-widget as instruction, but couldn't build the project due to the error: library not found for -lRCTImage
[email protected]
SDKs:
iOS SDK:
Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
Android SDK:
API Levels: 23, 24, 25, 26, 27, 28
Build Tools: 23.0.1, 27.0.3, 28.0.3
System Images: android-24 | Google Play Intel x86 Atom
IDEs:
Android Studio: 3.4 AI-183.6156.11.34.5522156
Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
npmPackages:
react: 16.8.3 => 16.8.3
react-native: 0.59.9 => 0.59.9
npmGlobalPackages:
react-native-cli: 2.0.1
Update: It seems like all the libRCT.... libraries can cause this error. Because i tried deleting the library one by one until i got no error announced, i just keft : JavaScriptCore.framework and NotificationCenter.framework it still raised 3 errors:
Undefined symbols for architecture x86_64:
"OBJC_CLASS$_RCTRootView", referenced from:
objc-class-ref in TodayViewController.o
"OBJC_CLASS$_RCTBundleURLProvider", referenced from:
objc-class-ref in TodayViewController.o
"_RCTRegisterModule", referenced from:
+[Linking load] in Linking.o
+[DisplayMode load] in DisplayMode.o
ld: symbol(s) not found for architecture x86_64
clang: error: linker command failed with exit code 1 (use -v to see invocation)
while attempting to run my app, it reached the following build error:
The following build commands failed: ValidateEmbeddedBinary build/Build/Products/Debug-iphonesimulator/WidgetTest.app/PlugIns/TodayWidgetExtension.appex (1 failure)
and above it listed this:
`error: Embedded binary's bundle identifier is not prefixed with the parent app's bundle identifier.
Embedded Binary Bundle Identifier: .TodayWidgetExtension
Parent App Bundle Identifier: org.reactjs.native.example.WidgetTest`
i installed all the dependencies and multiple tests yielded the same error.
am i doing anything wrong? i copy-pasted the widget code from the example and it still doesnt work.
I was just following the steps in /Example/Basic
and nothing else. I added react-native-today-widget
and run react-native link
. Then TodayWidget.js
and index.widget.js
. At last, I run react-native run-ios
, and then it said failed to build ios project
.
Just steps above.
I'm using [email protected]
.
Results of react-native info
:
info
React Native Environment Info:
System:
OS: macOS 10.14.5
CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
Memory: 145.09 MB / 8.00 GB
Shell: 5.3 - /bin/zsh
Binaries:
Node: 10.16.0 - /usr/local/bin/node
Yarn: 1.6.0 - ~/.yarn/bin/yarn
npm: 6.9.0 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
IDEs:
Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
npmPackages:
react: 16.8.3 => 16.8.3
react-native: 0.59.9 => 0.59.9
npmGlobalPackages:
create-react-native-app: 1.0.0
react-native-cli: 2.0.1
Followed steps https://github.com/matejkriz/react-native-today-widget#manual-linking and stuck in build
/node_modules/react-native-today-widget/ios/TodayWidgetExtension/Linking.h:9:9: 'React/RCTBridgeModule.h' file not found
/node_modules/react-native-today-widget/ios/TodayWidgetExtension/DisplayMode.h:9:9: 'React/RCTBridgeModule.h' file not found
Any solution about it?
react: 16.9.0
react-native: 0.61.5
react-native-today-widget: 1.0.0
From crash report:
ASSERTION FAILURE in /Library/Caches/com.apple.xbs/Sources/IDEXcode3ProjectSupport/IDEXcode3ProjectSupport-12122/Xcode3Core/LegacyProjects/Frameworks/DevToolsCore/DevToolsCore/ProjectModel/DataModel/Containers/PBXContainerItemProxy.m:260
Details: Tried to access the containerPortal of an orphaned container item proxy (Global ID='57DB434C1ED1A1E3002AE0EB', Remote Info='(null)'). A common cause of this is corrupt project files which illegally reuse the same target dependency instance for multiple targets.
Object: <PBXContainerItemProxy: 0x7fa955b29af0>
Method: -_containerPortal
Thread: <NSThread: 0x7fa94d417590>{number = 1, name = main}
The goal is to make Display Name (CFBundleName
) and Bundle ID (CFBundleIdentifier
) configurable.
Currently, the Bundle ID is set by the main app with .TodayWidgetExtension
suffix using postinstall script. Display name has to be set using XCode manually.
Where is the best place for this configuration? For me, it looks like app.json
file will be fine. Or split it to something like widget.json
?
Hi,
For those who have some issues to create a Today Widget and link it to use React Native in the widget, here is the missing parts.
export NODE_BINARY=node
../node_modules/react-native/scripts/react-native-xcode.sh
target 'MainApp' do
... pods with React...
target 'TodayWidget' do
inherit! :search_paths
end
end
Tada!
The main app on iOS could have multiple widgets available.
It can be reproduced.
react-native: 0.59.3
xcode: 10.2
Swiping between widgets and the desktop I find that every 1/4 times the widget displays "Unable to load"
Wait on home screen 3-4 seconds and swipe to widget screen, repeat several times
Please add result of react-native info
command and react-native-today-widget
version used
react-native-today-widget 1.0.0
Environment:
OS: macOS High Sierra 10.13.4
Node: 9.8.0
Yarn: 1.3.2
npm: 5.6.0
Watchman: 4.9.0
Xcode: Xcode 9.4.1 Build version 9F2000
Android Studio: 2.3 AI-162.4069837
Packages: (wanted => installed)
react: 16.3.1 => 16.3.1
react-native: 0.55.4 => 0.55.4
This is a real shame at the moment as when this does work it's awesome, seriously great work making this library!
Edit: I can only replicate this on an actual device, it always works on the simulator.
@matejkriz : Hi, congratulations on your project.
Your example works only on Ios, right?
We have developed a listview widget for android, where every row of the listview is clickable and takes a certain action.
We wanted to know in terms of performance, do you have problems, slowdowns or anything else?
Hello;
I'm trying to install the react-native-today-widget in version 0.6.4 because of the react-native version of my project (0.44.3), I'm having this problem when I try to install the package:
yarn add [email protected]
yarn add v0.24.5
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 📃 Building fresh packages...
[1/1] ⡀ react-native-today-widget: setting ".TodayWidgetExtension" as CFBundleIdentifier for
/../ios/TodayWidgetEx
[-/1] ⡀ waiting...
[-/1] ⡀ waiting...
[-/1] ⡀ waiting...
error /Users/algartelecom/Documents/Josiane/testTodayWidget/node_modules/react-native-today-widget: Command failed.
Exit code: 1
Command: sh
Arguments: -c ./bin/setBundleId.sh
Directory: /Users/algartelecom/Documents/Josiane/testTodayWidget/node_modules/react-native-today-widget
Output:
./bin/setBundleId.sh: line 3: realpath: command not found
usage: dirname path
sed: 1: "s/^\s*"name": "(.*?)",$ ...": RE error: repetition-operator operand invalid
Reading CFBundleIdentifier from: /../../../ios//Info.plist
2018-01-08 16:46:09.080 defaults[13479:375454]
The domain/default pair of (/../../../ios//Info.plist, CFBundleIdentifier) does not exist
setting ".TodayWidgetExtension" as CFBundleIdentifier for /../ios/TodayWidgetExtension/Info.plist
2018-01-08 16:46:09.219 defaults[13489:375499] Could not write domain /../ios/TodayWidgetExtension/Info.plist; exiting
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
Assuming I can not update the version of my project, what can I do to fix this?
Project Version: react-native 0.44.3
Version of react-native-today-widget: 0.6.4
Thanks!
A JavaScript implementation of Developer Menu could be useful in other projects (especially in other iOS App Extensions) where the native menu is not available.
Would be cool to get a example on passing data from the app to widget.
I have implemented this widget by following this example Building a React-Native Today Widget in iOS
I want to link a view to component in widget(icon) etc. When click that item it should open app and goto that screen.
But I don't know how to do it.
This code is working fine and showing images in widget except of opening app.
This is the code of my index.widget.js file
import React from 'react'
import {AppRegistry, Platform, Text, View, Image, TouchableOpacity, Linking} from 'react-native'
openMe = async (pm) => {
console.warn(pm)
Linking.openURL('appName://Camera/0')
}
const TodayWidget = () => (
<View style={{ flex: 1, flexDirection:'row', justifyContent: 'center',alignItems:'center'}}>
<View style={{flex:1, justifyContent:'center',alignItems:'center'}}>
<TouchableOpacity onPress={() => this.openMe('first')}>
<Image source={require('./app/Images/camera.png')} resizeMode='contain' style={{width:50,height:50}} />
</TouchableOpacity>
</View>
<View style={{flex:1, justifyContent:'center',alignItems:'center'}}>
<TouchableOpacity onPress={() => this.openMe('second')}>
<Image source={require('./app/Images/camera.png')} resizeMode='contain' style={{width:50,height:50}}/>
</TouchableOpacity>
</View>
</View>
)
if (Platform.OS === 'ios') {
AppRegistry.registerComponent('AITodayWidget', () => TodayWidget)
}
Please follow this example Building a React-Native Today Widget in iOS
OS: macOS High Sierra 10.13.6
Node: 9.6.1
Yarn: 0.15.1
npm: 6.4.1
Watchman: 4.9.0
Xcode: Xcode 10.0 Build version 10A255
Android Studio: 3.1 AI-173.4907809
Packages: (wanted => installed)
react: 16.2.0 => 16.2.0
react-native: ^0.52.0 => 0.52.3
I followed instruction and built project successfully. I also checked the 3D touch on my device, it worked well, i added it to the widgets on real device but it was "Unable to load" even it was just a widget with Hello React Native text view
When i run the react-native log-ios:
un 25 15:20:47 thanhtans-MacBook-Pro com.apple.CoreSimulator.SimDevice.A03980F8-1C89-418A-BCAB-361E840F6EDB[87375] (com.apple.WebKit.WebContent) : Unknown key for Boolean: EnableTransactions
Jun 25 15:20:47 thanhtans-MacBook-Pro com.apple.CoreSimulator.SimDevice.A03980F8-1C89-418A-BCAB-361E840F6EDB[87375] (com.apple.WebKit.WebContent) : Unknown key for Boolean: EnablePressuredExit
Jun 25 15:20:47 thanhtans-MacBook-Pro com.apple.CoreSimulator.SimDevice.A03980F8-1C89-418A-BCAB-361E840F6EDB[87375] (com.apple.backboard.display.archive) : Unknown key for Boolean: EnableTransactions
Jun 25 15:20:47 thanhtans-MacBook-Pro com.apple.CoreSimulator.SimDevice.A03980F8-1C89-418A-BCAB-361E840F6EDB[87375] (com.apple.backboard.display.archive) : Unknown key for Boolean: EnablePressuredExit
Jun 25 15:20:47 thanhtans-MacBook-Pro com.apple.CoreSimulator.SimDevice.A03980F8-1C89-418A-BCAB-361E840F6EDB[87375] (com.apple.imfoundation.IMRemoteURLConnectionAgent) : Unknown key for Boolean: EnableTransactions
Jun 25 15:20:47 thanhtans-MacBook-Pro com.apple.CoreSimulator.SimDevice.A03980F8-1C89-418A-BCAB-361E840F6EDB[87375] (com.apple.imfoundation.IMRemoteURLConnectionAgent) : Unknown key for integer: _DirtyJetsamMemoryLimit
Jun 25 15:20:47 thanhtans-MacBook-Pro com.apple.CoreSimulator.SimDevice.A03980F8-1C89-418A-BCAB-361E840F6EDB[87375] (com.apple.imfoundation.IMRemoteURLConnectionAgent) : Unknown key for Boolean: EnablePressuredExit
Jun 25 15:20:47 thanhtans-MacBook-Pro com.apple.CoreSimulator.SimDevice.A03980F8-1C89-418A-BCAB-361E840F6EDB[87375] (com.apple.uifoundation-bundle-helper) : Unknown key for Boolean: EnableTransactions
Jun 25 15:20:47 thanhtans-MacBook-Pro com.apple.CoreSimulator.SimDevice.A03980F8-1C89-418A-BCAB-361E840F6EDB[87375] (com.apple.uifoundation-bundle-helper) : Unknown key for Boolean: EnablePressuredExit
Jun 25 15:20:47 thanhtans-MacBook-Pro com.apple.CoreSimulator.SimDevice.A03980F8-1C89-418A-BCAB-361E840F6EDB[87375] (org.reactjs.native.example.BaseControlls.TodayWidgetExtension[87486]) : assertion failed: 18F132: launchd_sim + 63721 [4911879E-54AD-341A-9EEA-BD6E6DDD9DD6]: 0x16
Is there a showcase of any apps using this? Wondering whether it's worth trying to struggle with the memory limitation to make this work with RN
Hello!
I'm trying to share data as you do in "Complex example". But with https://github.com/kevinresol/react-native-default-preference
Have you been able to use UserDefaults
to share data?
In main app:
await DefaultPreference.setName("NAME_OF_YOUR_GROUP")
await DefaultPreference.set("key1", "value1")
In widget:
await DefaultPreference.setName("NAME_OF_YOUR_GROUP")
const k = await DefaultPreference.get("key1")
k is undefined
. Should be value1
$ yarn add react-native-today-widget
yarn add v0.24.5
[1/5] 🔍 Resolving packages...
[2/5] 🚚 Fetching packages...
[3/5] 🔗 Linking dependencies...
[4/5] 📃 Building fresh packages...
[-/8] ⠈ waiting...
[-/8] ⠈ waiting...
[8/8] ⠈ react-native-today-widget: setting ".TodayWidgetExtension" as CFBundleIdentifier for /../ios/TodayW
[-/8] ⠈ waiting...
error /Users/jcursi/Sites/joncursi/redbirdNative/node_modules/react-native-today-widget: Command failed.
Exit code: 1
Command: sh
Arguments: -c ./bin/setBundleId.sh
Directory: /Users/jcursi/Sites/joncursi/redbirdNative/node_modules/react-native-today-widget
Output:
./bin/setBundleId.sh: line 3: realpath: command not found
usage: dirname path
sed: 1: "s/^\s*"name": "(.*?)",$ ...": RE error: repetition-operator operand invalid
Reading CFBundleIdentifier from: /../../../ios//Info.plist
2017-07-10 16:34:36.024 defaults[29636:174124]
The domain/default pair of (/../../../ios//Info.plist, CFBundleIdentifier) does not exist
setting ".TodayWidgetExtension" as CFBundleIdentifier for /../ios/TodayWidgetExtension/Info.plist
2017-07-10 16:34:36.184 defaults[29645:174193] Could not write domain /../ios/TodayWidgetExtension/Info.plist; exiting
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
Please describe expected and actual behavior.
today widget unable to load
Please add result of react-native info
command and react-native-today-widget
version used
v1.0.0
I am trying to render a verrrry simple today widget but all I get is "Unable to Load". The code uses one View and one Text, and I am running on a simulator in release mode:
const TodayWidget = () => (
<View>
<Text>
Hello Today Widget!
</Text>
</View>
);
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.