Having a time with notifications again after upgrading to the new version of RN (again)...
This function never gets called. It doesn't matter if I have requestPermissions:true or not
PushNotification.configure({
onRegister: (tokenResponse) => {
console.log("AppNotifications::onRegister", tokenResponse);
}
...
if requestPermissions:false, I call after logging in:
PushNotification.requestPermissions( (response) => {
console.log('NotificatoinsState::requestPermissions', response);
});
...which also does absolutely nothing.
Couple things that always get asked in all these threads:
Xcode capabiltity for Push Notifications is added
Developer.apple.com has the right certs and they are not expired
I'm running this on a device, not the simulator...
I've tried to have the PushNotification.config in both a state as well as completely outside of the React component lifecycle, both are the exact same
Not sure what configuration I'm missing here, but any help would be super.
Opened this ticket as well in case this gets figured out in one spot or the other:
https://github.com/zo0r/react-native-push-notification/issues/1052
On a deadline, so I'll keep trying stuff and if I find the answer, I'll put it here too..
Nevermind. I forgot to update the AppDelegate.m file...
https://github.com/react-native-community/react-native-push-notification-ios
Works fine now.
Related
I have completed an app that builds on both Android and iOS. It works as expected when I build the app from the CLI or when I build it via XCode / Android Studio. However, on TestFlight, it gets errors that simply do NOT exist when I build it locally. These errors only appear on TestFlight, and thus I have little to no idea on how to go finding them down or even resolving them. Does anyone have better expertise in this area?
I'm not sure how common an issue this is-- I've never heard of it before to be honest, but the components that were not working were components that utilized ({props}) in a component. For example, any component wthat utilized the following declarations did NOT work
function Example({props}){
// stuff
}
// OR //
const Example = ({props}) => {
// stuff
}
all of the values inside of props were unreadable. I fixed this by simply moving EVERYTHING into a recoil state instead and that mitigated any errors. For example...
navigation.navigate("path",{prop1: value})
// AND //
return (<Example prop={value} prop={value})
would not work unless the prop was a single value-- a string, an int, a bool, these would work. Objects and Arrays did NOT properly carry over.
Hope this helps someone in the future.
Im following the tutorial here...
https://vue-tutorial.meteor.com/simple-todos/
But I get an error even just when installing the default vue meteor app.
meteor: {
$subscribe: {
'experiments': [],
},
experiments () {
return Experiments.find({}).fetch();
},
},
gives me an error
TypeError: Cannot read properties of undefined (reading 'find')"
If I console log Experiments, its there and I get the Meteor collection object. Any idea why this might be occuring??
import Experiments from '../../api/collections/Experiments'
console.log(Experiments)
Gives me
So its obviously an available object.
Just the find({}).fetch() method on it doesnt seem to be available??
UPDATE:
THE ANSWER BELOW WORKED (kind of)
experiments() {
let experimentsData = Experiments.find({}).fetch();
if (this.$subReady.experiments) {
console.log(experimentsData);
return experimentsData;
}
},
This now returns the experiments in the console log. So they are available. However rendering them to the template doesnt.
<h2>Experiments</h2>
<div v-for="exp in experiments" :key="exp.id">
{{exp.name}}
</div>
Any idea why??
Does it have to be put into a vue data object? Computed??
I thought the meteor:{} object acted kinda like computed, but it appears not??
How do I get the data onto the screen??
The answer is actually not correct.
I am experiencing the same issue from an out of the box meteor vue app created with: meteor create vanillaVueMeteor --vue
The error occurs if you define ANY function in the meteor: section of the default export (and bizarrely the first function defined is always being called regardless of whether it is actually referenced anywhere). This is obviously a bug either in the meteor vue creator or some combination of the default versions of meteor and vue libraries.
Additionally with respect to providing data to your template: you should not call fetch, just pass the result of the find which then means you won't need to wait for the subs to be ready because reactivity will update the view when the data is available. Obviously the underlying issue is preventing this all from working correctly.
UPDATE:
It seems to be an issue with 2.7.x Downgrading to the latest 2.6 worked for me:
meteor npm remove vue
meteor npm i vue#2.6 --save
It looks like you need to just use this.$subReady in your 'experiments` function to handle the timing of how the data comes in over DDP in Meteor.
I use something like this in all my subscriptions.
When the subscription starts up, the data won't be delivered from the publication the very 1st time, so that is what causes your undefined error that you are getting.
I love the Vue + Meteor combo. You can also come join the community Slack or Forum if you have questions, there are a bunch of us to help you there.
Happy Coding!
Bob
experiments () {
let experimentsData = Experiments.find({}).fetch();
if(this.$subReady.experiments){
return experimentsData;
}
},
This should resolve your issue in the UI. The HTML data will load and run before all the data from Meteor is ready, so you just use something like this:
<h2>Experiments</h2>
<div v-if="subReady.experiments" v-for="exp in experiments" :key="exp.id">
{{exp.name}}
</div>
This question has been asked several times here(here the most relevant,Another example), but no solution has been proposed in any of them. So I have 2 questions to you guys:
Any idea why it wouldn't work in a large project? I mean, there are any know issues with fast refresh related to the size of the project or the packages he includes that will make fast refresh stop working? There is any way to fix it?
Is there a convenient way to edit an internal page in the app without using a fast refresh (without running the page independently, since it depends on all the logic of the app)?
This bug really makes the development really difficult for me, and I find it hard to believe that professional developers have not found a way around this problem, Please help!
I'm using expo-cli(v3.26.2 - Expo SDK 38 that using react-native v0.62)
TLDR;
using default export with no name ALWAYS resulted in a full reload of the app without hot reload!
Details
So after a lot of months of pain, I accidentally found a strangely enough effect:
I usually write my react components in this syntax:
export default ({ ...props }) => {
...
};
and for some reason, changing a module that exports that way ALWAYS resulted in a full reload of the app without hot reload!
after months of pain, accidentally i found out that changing the export to:
const Test = ({ ...props }) => {
...
};
export default Test;
completely fixed the issue and now hot reload works perfectly fine!
I did not saw this effect mentioned in a single place on the internet!
From react-refresh-webpack-plugin troubleshoot section
Un-named/non-pascal-case-named components
See this tweet for drawbacks of not giving component proper names.
They are impossible to support because we have no ways to statically
determine they are React-related. This issue also exist for other
React developer tools, like the hooks ESLint plugin. Internal
components in HOCs also have to conform to this rule.
// Wont work
export default () => <div />;
export default function () {
return <div />;
}
export default function divContainer() {
return <div />;
}
There is an other way to obtain this weird behavior.
When you export a simple function:
//if we export this function in the entry file of the app,
//it will break the hot reload feature without any warnings.
export function someName() {
};
from the entry file of your app (with typescript template expo init nameApp the file is App.tsx)
It will exactly produce a full reload of the app rather than a hot reload.
This is vicious because on ios simulator it full reloads the app without the modification whereas in android it full reloads the app WITH the modification. So you'll take some time to realize that this is not a hot reload in android but a full reload.
IDK why ios don't display the modification like android does..
But when you think at the problem, we shouldn't export multiple things from the entry point of an app. This sounds weird isn't it ?
TLDR;
During development, I had your problem with the infinity "Refreshing..." message. As well as incomprehensible errors like "unknow resolve module 2" and "bundle error..."
Details
the solution turned out to be unexpected, I changed "require()" to "import" in the main index.js file
before
const module = require('some-module')
after
import module from 'some-module';
I am having an issue related to react-native-asyncstorage from here:
https://facebook.github.io/react-native/docs/asyncstorage.html
When I run react-native run-ios, the following error appears:
I am using react-native 0.52.0 and this problem may be due to the dependency of react-native-asyncstorage:
react-native-asyncstorage#1.0.0 requires a peer of
react-native#^0.47.2 but none is installed. You must install peer
dependencies yourself.
The odd thing is it works fine for Android, but not for both iOS nor iOS emulator.
Can someone help?
EDIT
I would like to add some points that maybe useful:
I use Expo for development,
I have commented every AsyncStorage in my code, but the problem still persist,
As asked in the comment, here is the snipped code of my AsyncStorage code
-
import { AsyncStorage } from 'react-native';
export async function SetItem(strKey, objValue) {
try {
if (typeof(objValue) === 'string') {
await AsyncStorage.setItem(strKey, objValue);
}
else {
await AsyncStorage.setItem(strKey, JSON.stringify(objValue));
}
}
catch(error){
console.log(error);
}
}
Like said in the documentation: NOTE: This is not supported by all native implementations, you're probably running in an error because of this.
It may also be Reactotron you're using (according to the stack trace) that causes this. Try disabling it at first?
Are you having a custom implementation of AsyncStorage (like: https://www.npmjs.com/package/react-native-asyncstorage)? If so, take it off unless there's a specific reason to use it (please elaborate in the question)
But in general, you could for instance use React Native Simple Store and it's update method.
Or then you could write your own function with lodash.merge.
If problem persists even with commenting out all the AsyncStorage code, removing possible custom dependencies and taking off Reactotron, and you can't find a way to write multiMerge by yourself, update your question and ping me on this answer.
I'm working on an update for our app. I've added a HeadlessTask and I've started seeing this warning in the console:
React: Calling JS function after bridge has been destroyed
How can I get the name of the function being executed?
From the error message I assume you're in java (react-native Android):
When you reload on react-native, what happens behind the scenes is that the react context is getting destroyed, and a new one is being created.
That error get's thrown whenever a react-native Native Module is trying to do work, by using the old react context (the one that was valid before the reload).
The last time I saw that error it also included an explanation as to which module tried to do work by using the old context. Typically it's the RCTDeviceEventEmitter module trying to send a message to javascript.
You'll have to open logcat on Android studio and read the full error message.
p.s: If you're using react-native-navigation in your project, (after you discover which module is the trouble maker by using the logcat), make sure to search on their issues as they are heavily using the native side of react-native android, and I've seen lot's of similar issues so far.
Never found a good solution to this until recently, so thought I'd put this here in case it helps someone else. I finally got around this error by doing the following:
public class RNMyNativeModule extends ReactContextBaseModule {
private ReactApplicationContext currentContext;
public RNMyNativeModule(ReactApplicationContext reactContext) {
super(reactContext);
currentContext = reactContext;
}
public void myEmitFn(String emitMe) {
currentContext
.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
.emit("RNMyNativeModuleEvent", emitMe);
}
}
Basically, in your module constructor, make sure you capture the currentContext in it's own variable, and just use that whenever you need it. Otherwise it gets overwritten and destroyed whenever a live reload happens, and getReactApplicationContext() is not actually giving you the current context.