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.
Related
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 just upgrade my react native app to 0.62.0, and now my app keeps getting this warning sign
ReactNativeFiberHostComponent: Calling `getNode()` on the ref of an Animated component
is no longer necessary. You can now directly use the ref instead.
This method will be removed in a future release.
I'm not sure why this issue is showing up? Can someone please explain?
I also see Stack
ref.getNode |
createAnimatedComponent.js:129:20
SafeView#_updateMeasurements | index.js:192:14
SafeView#componentDidUpdate | index.js:154:9
Update
I believe this might be coming from SafeAreaView from react-navigation
I also came to this warning after upgraded ro RN 0.62.1, and I didn't use getNode() at all, turns out it came from a depedencies that I use, called react-native-snap-carousel because they build it with FlatList and possibly using the getNode() as well.
And now there's an open issue about this in their GitHub repo that we can follow, here's the link to the issue
Update
this also came from package react-native-safe-area-view, possibly your app is using this package and now they have released new version to fix getNode() deprecation, see this PR
so instead of fixing the file directly yourself, you just need to update the package, simply run: npm i react-native-safe-area-view
Hope that's help :)
To quick fix this go to node_modules/react-native-safe-area-view => index.js
at line 192 change
this.view.getNode().measureInWindow((winX, winY, winWidth, winHeight)
to
this.view.measureInWindow((winX, winY, winWidth, winHeight)
If you are using react-native-snap-carousel you can fix it by modifying your node module locally.
first go to
./node_modules/react-native-snap-carousel/src/Carousel.js
change
const AnimatedFlatList = FlatList ? Animated.createAnimatedComponent(FlatList) : null;
const AnimatedScrollView = Animated.Animated.createAnimatedComponent(ScrollView);
into
const AnimatedFlatList = FlatList ? Animated.FlatList : null;
const AnimatedScrollView = Animated.ScrollView;
and finally, change your _getWrappedRef function to
_getWrappedRef () {
return this._carouselRef
}
This will stop the warning until we have an update on that package.
As seen in the blog post announcing the release of RN62, getNode() is now deprecated. You can just use ref without calling getNode(). See this commit.
the issue will happen when you use createAnimatedComponent for components while its already exist in animated library for example if we use it to FlatList this warning will be showing
for fix it just call componenty directly
for more detail enter link description here
change
return this._carouselRef && this._carouselRef.getNode && this._carouselRef.getNode();
to
return this._carouselRef;
*Removing getNode() will fix it.
i find that error in my project.
Fix: copy "getNode()" and find all in your project, delete it.
Delete warning getNode()
I want to use systemjs inside react-native.
When I use following code in the browser systemjs register itself with global/window.
fetch('https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.18.17/system.src.js')
.then(response => response.text())
.then(txt => {
eval(txt);
})
.catch(ex => {
console.log(ex);
});
I executed same code in expo AwesomeProject on the homescreen component and the above code does not throw any exceptions, but when I try to render all the globally registered objects I don't see SystemJs/System.
First question I have - Is it even possible to register systemjs and use it with react-native?
If the answer to first question is yes, then is it the correct way to eval(Systemjs)?
If not is there any other method I can use to access system js?
I have seen couple of projects on github like react-native-eval and react auto updater, but that is not what I want.
Anyone can give me some insight?
I will answer my own question.
Yes it is possible to load systemjs in React native.
Simple eval will evaluate the systemjs code, but you might get some errors. I am not an expert in the internals of systemjs but it seems it tries to run in some context, either a browser or in some cases a node server.
I received an error in following code.
var vmModule = 'vm';
var vm = require(vmModule);
I had to tweak my code a little bit and supply a fake require function and I was able to load systemjs.
The problem here is that I need call MercadoPago in mi Application using React-Native, but i can not find the way,
I found this wrapper for use in React-Native,
https://github.com/shovelapps/react-native-mercadopago
but when I am trying to call it I have an error in startCheckOut method,
I am using in this way the Wrapper
import RNMercadopago from 'react-native-mercadopago';
and I am calling the method in a click event using this line:
RNMercadopago.startCheckout(publicKey, prefId, null, false, (payment) => { this._success(payment)}, (error) => { this._failure(error) });
but I am getting the bellow error,
undefined is not an object (evaluating 'RNMercadopago.startCheckout)
all this code is in the index.ios.js
best regards
you may use react-native-mercadopago-checkout. It allows you to implement MercadoPago checkout in two diferent ways (both of them are documented).
It's a new implementation that is working in a production app. Even, if you find a bug, you could open an Issue and be sure that it will be resolved!