GithubHelp home page GithubHelp logo

manicakes / react-native-icloudstore Goto Github PK

View Code? Open in Web Editor NEW
174.0 5.0 35.0 20 KB

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

License: MIT License

Ruby 5.50% Objective-C 91.25% JavaScript 3.25%
react-native icloud asyncstorage ios

react-native-icloudstore's Introduction

react-native-icloudstore ๐Ÿ“ฑโ˜๏ธ๐Ÿ“ฑ

npm version

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. ๐Ÿค“

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.