React nativie - Realtime - support

Whenever I use a real-time subscription in my react-native app, I get the below error, Can someone please help? WebSDK - V11.0.0 useEffect(() => { const unsubscribe = client.subscribe([ databases.${DB_CONSTANTS.DATABASE_ID} .collections.${DB_CONSTANTS.POST_LIKE_COLLECTION_ID} .documents], response => { console.log(response); })

return () => {
  unsubscribe()
}

}, []) Image

What is the error? You get any other error in the device logs?

getting TypeError - can't read the property getItem of undefined

Mmm the error is comming from here https://github.com/appwrite/sdk-for-web/blob/master/src/client.ts#L268 And this is because ReactNative doesn't supports LocalStorage

Let me see if there some workaround it.

oh, Thank you

When you running

console.log(window)

In your ReactNative app what are the results?

it is an [Object]

unable to print as string due to TypeError: cyclical structure in JSON object

Good. You can try to mimic the local storage class.

Install this package https://www.npmjs.com/package/local-storage-fallback

Add something like this at the start of your app.

import storage from 'local-storage-fallback'

if (!('localStorage' in window)) {
  window.localStorage = storage;
}

That should add all the required functions for the window object to be able to handle requests to is localStorage property.

Try and lmn

sure, Thank you so much

Thank you @Binyamin no more we are getting the error.

👍

WARN Appwrite is using localStorage for session management. Increase your security by adding a custom domain as your API endpoint. - I think this will be fixed once we add custom domain

Yes, and it's not fail-proof as you don't really have localStorage.

Is it in dev mode or in compiled? As your origin is going to change in the production mode.

yes, it is in dev mode

I think it would be good to check if your react native app will persist your localstorage. For that, you can:

• Compile your application to production and test to see if the login flow (for example) persist to work after "Launching -> Login -> closing the App -> Relaunching" If it worked in that use-case then you OK
• If it didn't persist, then you can have a more complex solution using any package that persist data, And create a custom wrapper, like so:

if (!('localStorage' in window)) {
    window.localStorage = {
        getItem: (key) => {
            // TODO: return the key value
        },
        setItem: (key, value) => {
            // TODO: persist the key value
        }
    };
}

okay, I will check that

I tried before without this package the auth session is being persisted

So it seems like you're good to go