The keyPrefix reduxPersist: is already in use - react-native

Pressing Cmd + I on ios simulator, I receive an error :
"The keyPrefix reduxPersist: is already in use. Multiple clients cannot share the same keyPrefix. Provide a different keyPrefix in the offlineConfig object."
Im using appSyncClient and not using redux. Error refers to new AWSAppSyncClient

The problem was that when I create new AWSAppSyncClient, I have set "disableOffline" property to false, after I changed it, everything works as expected.

This issue occurs when multiple appsync clients are being created with same keyPrefix, lets say in a scenario while creating react app, if multiple rerenders are happening and client is created inside render function of class component, then client will be created multiple times and it will thow this error. Moving creating appsync client outside the react component solved this error for me.

Related

isLoading property not available in the Auth0ContextInterface class

Why is the isLoading property missing from useAuth0?
I have a react-native project using Auth0 for authentication that was originally created using Expo CLI, but have had to eject Expo due to pipeline and native dependency concerns.
Now when attempting to access the isLoading property that is supposed to be available through useAuth0() I get an error saying:
Property 'isLoading' does not exist on type 'Auth0ContextInterface'
I'm stumped at this point, and I haven't been able to find anyone else who's had this issue.
I have looked over node_modules/react-native-auth0/src/hooks/auth0-context.js and .../auth0-provider.js and can see the isLoading property initialized there. But when I look at the Auth0ContextInterface class, which is located in a declaration file in node_modules/#types/react-native-auth0/index.d.ts., isLoading is not declared there.
I attempted to add it to the interface, but it always returns false even though it should be initialized to true. So it doesn't appear to have any connection to the auth0-context.js or the auth0-provider.js files.

Vue: Showing that the function does not exist when I have defined it the relevant store

I am currently working on a simple app to store workout routines in Nuxt 3 and Appwrite. The link to the source code is here.
After logging in and adding in some workouts in the app's UI, whenever I try to call the deleteWorkout function, I get an error in the console saying that the function is not defined, whereas I have clearly defined in the workoutStore. I can't seem to figure out the reason for the same.
The same can be seen in the given screenshot.
Console on clicking the delete button
PS:
Most probably the error should be originating from either /pages/workouts.vue, /components/WorkoutDetails.vue or /stores/workout.js.
I am using Appwrite to manage the back-end of the web app, and the instructions to setup the same can be found in the README.md. (Though I don't think the error I am facing is related to the same.)
In your code the problem is, you declear your deleteWorkout() function outside of the actions block in workout.js file.
Make sure all your functions in the workout store are inside the actions block. Then it will be accessable from the vue component

Persistent React-Native error that goes away with Remote Debugging enabled

I'm building a React-Native app and whenever I run it on my Android emulator, I get this error:
Objects are not valid as a React child (found: object with keys
{$$typeof, type, key, ref, props, _owner, _store}). If you meant to
render a collection of children, use an array instead.
throwOnInvalidObjectType
D:\rn\manager\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:7436:6
Because this error means nothing to me, I decide to enable "Debug JS Remotely" in Chrome to see if I can get an error I understand. But with Debug Remotely enabled, the error goes away.
If I build the project and install the app on a real device, the errors come back.
But I feel like I'm stuck in a catch-22 because if I try to debug, I get no errors, and if I turn off debugging, I get errors.
Is there anyway to get around this?
Thanks!
The error mentions you use an object in your render() method where you shouldn't. Since you did not post any code, here is what you could do:
Keep removing elements from your render() method until you no longer get the error. Once it is gone, start placing code back until you hit the error again. The code causing the error will be or return an object, possibly a typo causing an object to be returned instead of a string for instance.
TL;DR: Stopped using firebase and used react-native-firebase instead
The problem for me wasn't the render method in any of my components or classes. I realized after trying the answer above, I basically removed all my files, and was left with one file. I changed the render method to display text inside one view, but I still got the error.
Then I started removing the modules I was importing inside that file one by one and found that it was the firebase module uninstalled firebase and installed react-native-firebase.

React: Calling JS function after bridge has been destroyed --- How to find which function

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.

Is there a oficial plugin or SDK to use MercadoPago in React-Native for iOS?

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!