manicakes / react-native-icloudstore

A drop in replacement for React Native's AsyncStorage API that wraps the iCloud Ubiquitous Key-Value Store.

react-native-icloudstore 📱☁️📱

A drop in replacement for React Native's AsyncStorage API that wraps the iCloud Ubiquitous Key-Value Store.

Usage

In your target's "capabilities" tab in Xcode, make sure that iCloud is switched on as well as make sure that the "Key-value storage" option is checked.

react-native-icloudstore mimicks the same promise-based API as AsyncStorage. In addition to all of the AsyncStorage methods, there is one additional feature: a native event (iCloudStoreDidChangeRemotely) that lets you know when your store changed due to a remote change (i.e. from another device on the same iCloud account). See the example below for a very basic way to make use of that in your React Native application. For apps that use redux, you may want to call an appropriate action creator upon receiving the event.

import { NativeEventEmitter } from 'react-native';
import iCloudStorage from 'react-native-icloudstore';

...

  componentWillMount() {
    this.eventEmitter = new NativeEventEmitter(iCloudStorage);
    this.eventEmitter.addListener('iCloudStoreDidChangeRemotely', this.loadData);
  }

  componentWillUnmount() {
    this.eventEmitter.remove();
  }

  loadData = (userInfo) => {
    const changedKeys = userInfo.changedKeys;
    if (changedKeys != null && changedKeys.includes('MY_STORAGE_KEY')) {
      iCloudStorage.getItem('MY_STORAGE_KEY').then(result => this.setState({ storage: result }));
    }
  }
  
...
  

Install

npm install --save react-native-icloudstore

Automatically link

With React Native 0.27+

react-native link react-native-icloudstore

With older versions of React Native

You need rnpm (npm install -g rnpm)

rnpm link react-native-icloudstore

Manually link

iOS (via Cocoa Pods)

Add the following line to your build targets in your Podfile

pod 'RNICloudStore', :path => '../node_modules/react-native-icloudstore'

Then run pod install

iOS (without Cocoa Pods)

In XCode, in the project navigator:

• Right click Libraries
• Add Files to [your project's name]
• Go to node_modules/react-native-icloudstore
• Add the .xcodeproj file

In XCode, in the project navigator, select your project.

• Add the libicloudstorage.a from the deviceinfo project to your project's Build Phases ➜ Link Binary With Libraries
• Click .xcodeproj file you added before in the project navigator and go the Build Settings tab. Make sure All is toggled on (instead of Basic).
• Look for Header Search Paths and make sure it contains both $(SRCROOT)/../react-native/React and $(SRCROOT)/../../React
• Mark both as recursive (should be OK by default).

Run your project (Cmd+R)

Android

Android isn't supported - importing will simply return AsyncStorage so your app should continue to work.

Feedback

Questions? Comments? Feel free to email me.

If you have an issue, please create an issue under the "Issues" tab above. Or, feel free to issue a pull request. 🤓

react-native-icloudstore's Issues

Error thrown when `.setItem` is run inside project

My project is built with the Ignite CLI (Bowser) and my intention is to fully support iCloud sync which should be easy if I can swap out the React Native Community Async Storage project with this one. But it seems that the JavaScript and native code are out of sync. When running .setItem it throws the following error:

RNICloudStorage.setItem was called with 3 arguments but expects 2 arguments. If you haven't changed this method yourself, this usually means that your versions of the native code and JavaScript code are out of sync. Updating both should make this error go away.

I've tried completely uninstalling all packages, removed automatic linking and replaced with manual and nothing seems to fix the error. I'm only passing two arguments as you can see bellow in my code:

export const saveString = async (key: string, value: string): Promise<boolean> => {
  try {
    await AsyncStorage.setItem(key, value)
    return true
  } catch {
    return false
  }
}

Any suggestions?

error in rn4.0

duplicate interface definition for class rctbridge

foobar

blah blah blah

Handle error cases

While you use this package, how can we catch the errors that may occur due to storage limitations?
Eg: when the iCloud storage is full

React Native Debugger: warning shown on the console

I'm getting this warning:

Module iCloudStorage requires main queue setup since it overrides constantsToExport but doesn't implement `requiresMainQueueSetup. In a future release React Native will default to initializing all native modules on a background thread unless explicitly opted-out of.

react-native: 0.49.3
react-native-icloudstore: 0.9.0

Document iCloud setup needs

The docs should mention that you need to enable this in Xcode

To use this you need to sign your app with an apple developer account and set the com.apple.developer.ubiquity-kvstore-identifier entitlement in your app’s Entitlements. You can find your app’s entitlements in Xcode, by going to Project Settings -> Capabilities. Enable the iCloud capability and check Key-value storage. You might need to enable iCloud for your App ID too, by going to Certificates, Identifiers & Profiles on developer.apple.com/account.

Just Doesn't Seem to Be Working

The concept of the library is exactly what i'm looking for.

I've enabled iCloud and key-value storage through XCode but can't help but feel like i'm still missing a piece. Tried also turning on iCloud Documents and CloudKit and still when I try to setItem the data doesn't get set.

   const key = "test"
   const content = "...some pretty big string...."
    await iCloudStorage.setItem(key, content)

    const d = await iCloudStorage.getItem(key)

    console.log(d)

d always seems to be undefined. Was hoping someone may know what's going on.
If i figure it out, i'll resolve and add the solution.

Thanks in advance

What if user is not logged in to iCloud? Will it throw error when getItem?

So, i see that there is the function of getItem, but what if user is not logged in to iCloud? Will it throw error when calling getItem?

Add unit tests

Project status and future

Hi @manicakes , the current react-native 0.71.1 produces Invariant Violation, about AsyncStorage not anymore on react-native https://reactnative.dev/docs/asyncstorage

Have you any plans on merging #17 ?

Thanks!

Make navigation root view

No TypeScript definitions

Please add typescript definitions to exported files

Module iCloudStorage requires main queue setup since it overrides `constantsToExport` but doesn't implement `requiresMainQueueSetup`. In a future release React Native will default to initializing all native modules on a background thread unless explicitly opted-out of.

warning:

Module iCloudStorage requires main queue setup since it overrides `constantsToExport` but doesn't implement `requiresMainQueueSetup`. In a future release React Native will default to initializing all native modules on a background thread unless explicitly opted-out of.