A drop in replacement for React Native's AsyncStorage API that wraps the iCloud Ubiquitous Key-Value Store.
A drop in replacement for React Native's AsyncStorage API that wraps the iCloud Ubiquitous Key-Value Store.
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 }));
}
}
...
npm install --save react-native-icloudstore
react-native link react-native-icloudstore
You need rnpm
(npm install -g rnpm
)
rnpm link react-native-icloudstore
Add the following line to your build targets in your Podfile
pod 'RNICloudStore', :path => '../node_modules/react-native-icloudstore'
Then run pod install
In XCode, in the project navigator:
node_modules/react-native-icloudstore
.xcodeproj
fileIn XCode, in the project navigator, select your project.
libicloudstorage.a
from the deviceinfo project to your project's Build Phases ➜ Link Binary With Libraries
.xcodeproj
file you added before in the project navigator and go the Build Settings tab. Make sure All is toggled on (instead of Basic).$(SRCROOT)/../react-native/React
and $(SRCROOT)/../../React
Run your project (Cmd+R)
Android isn't supported - importing will simply return AsyncStorage
so your app should continue to work.
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. 🤓