Skip to content

Commit

Permalink
intial version
Browse files Browse the repository at this point in the history
  • Loading branch information
naoufal committed Jun 25, 2015
1 parent 8ad7df1 commit a1203db
Show file tree
Hide file tree
Showing 9 changed files with 507 additions and 6 deletions.
5 changes: 5 additions & 0 deletions .codeclimate.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
exclude_paths:
- "TouchID.xcodeproj"
- "**/*.h"
- "**/*.m"
- "**/*.swift"
8 changes: 2 additions & 6 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,6 @@ DerivedData
*.ipa
*.xcuserstate

# CocoaPods
# npm
#
# We recommend against adding the Pods directory to your .gitignore. However
# you should judge for yourself, the pros and cons are mentioned at:
# http://guides.cocoapods.org/using/using-cocoapods.html#should-i-ignore-the-pods-directory-in-source-control
#
#Pods/
node_modules/
111 changes: 111 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
# react-native-safari-view

[![npm version](https://img.shields.io/npm/v/react-native-safari-view.svg?style=flat-square)](https://www.npmjs.com/package/react-native-safari-view)
[![npm downloads](https://img.shields.io/npm/dm/react-native-safari-view.svg?style=flat-square)](https://www.npmjs.com/package/react-native-safari-view)
[![Code Climate](https://img.shields.io/codeclimate/github/naoufal/react-native-safari-view.svg?style=flat-square)](https://codeclimate.com/github/naoufal/react-native-safari-view)

__`react-native-safari-view`__ is a [Safari View Controller](https://developer.apple.com/videos/wwdc/2015/?id=504) wrapper for [React Native](https://facebook.github.io/react-native/).

__Note: Safari View Controller is only available in [iOS 9](http://www.apple.com/ios/ios9-preview/), which is currently in beta.__

![react-native-safari-view](https://cloud.githubusercontent.com/assets/1627824/8345135/ed5f7fc4-1ab8-11e5-814a-a3e9df0ede06.gif)

## Documentation
- [Install](https://github.com/naoufal/react-native-safari-view#install)
- [Usage](https://github.com/naoufal/react-native-safari-view#usage)
- [Example](https://github.com/naoufal/react-native-safari-view#example)
- [Methods](https://github.com/naoufal/react-native-safari-view#methods)
- [License](https://github.com/naoufal/react-native-safari-view#license)

## Install
```shell
npm i --save react-native-safari-view
```

## Usage
### Linking the Library
In order to use Safari View, you must first link the library your project. There's excellent documentation on how to do this in the [React Native Docs](https://facebook.github.io/react-native/docs/linking-libraries.html#content).

### Displaying the Safari View
Once you've linked the library, you'll want to make it available to your app by requiring it:

```js
var SafariView = require('react-native-safari-view');
```

Displaying the Safari View is as simple as calling:
```js
SafariView.show({
url: 'https://github.com/naoufal'
});
```

## Example
Using Safari View in your app will usually look like this:
```js
var SafariView = require('react-native-safari-view');

var YourComponent = React.createClass({
_pressHandler() {
SafariView.isAvailable()
.then(SafariView.show({
url: 'https://github.com/naoufal'
}))
.catch(error => {
// Fallback WebView code for iOS 8 and earlier
});
},

render() {
return (
<View>
...
<Button onPress={this._pressHandler}>
Show Safari View
</Button>
</View>
);
}
});
```

## Methods

### show(safariOptions)
Displays a Safari View with the provided url.

__Arguments__
- `safariOptions` - An `Object` containing a `url` key and optionally a `readerMode` key.

__safariOptions__
- `url` - A `String` containing the url you want to load in the Safari View
- `readerMode` - A `Boolean` indicating to use Safari's Reader Mode if available

__Examples__
```js
SafariView.show({
url: 'http://facebook.github.io/react/blog/2015/03/26/introducing-react-native.html',
readerMode: true // optional
});
```

### isAvailable()
Checks if Safari View is available on the device.

__Example__
```js
SafariView.isAvailable()
.then(available => {
console.log('SafariView is available.');
})
.catch(error => {
console.log(error);
});
```

## License
Copyright (c) 2015, Naoufal Kadhom

Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
17 changes: 17 additions & 0 deletions SafariViewManager.android.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
/**
* Stub of SafariViewManager for Android.
*
* @providesModule SafariViewManager
* @flow
*/
'use strict';

var warning = require('warning');

var SafariViewManager = {
test: function() {
warning("Not yet implemented for Android.");
}
};

module.exports = SafariViewManager;
7 changes: 7 additions & 0 deletions SafariViewManager.h
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
#import "RCTBridgeModule.h"

@import SafariServices;

@interface SafariViewManager : NSObject <RCTBridgeModule, SFSafariViewControllerDelegate>

@end
40 changes: 40 additions & 0 deletions SafariViewManager.ios.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
/**
* @providesModule SafariViewManager
* @flow
*/
'use strict';

var NativeSafariViewManager = require('NativeModules').SafariViewManager;
var invariant = require('invariant');

/**
* High-level docs for the SafariViewManager iOS API can be written here.
*/

var SafariViewManager = {
show: function(options) {
return new Promise(function(resolve, reject) {
NativeSafariViewManager.show(options, function(error, success) {
if (error) {
return reject(error);
}

resolve(true);
});
});
},

isAvailable: function(options) {
return new Promise(function(resolve, reject) {
NativeSafariViewManager.isAvailable(function(error, success) {
if (error) {
return reject(error);
}

resolve(true);
});
});
},
};

module.exports = SafariViewManager;
43 changes: 43 additions & 0 deletions SafariViewManager.m
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
#import "SafariViewManager.h"
#import "RCTUtils.h"
#import "RCTLog.h"

@implementation SafariViewManager

RCT_EXPORT_MODULE()

RCT_EXPORT_METHOD(show:(NSDictionary *)args callback:(RCTResponseSenderBlock)callback)
{
// Error if no url is passed
if (!args[@"url"]) {
RCTLogError(@"[SafariView] You must specify a url.");
return;
}

// Initialize the Safari View
SFSafariViewController *safariView = [[SFSafariViewController alloc] initWithURL:[NSURL URLWithString:args[@"url"]] entersReaderIfAvailable:args[@"readerMode"]];
safariView.delegate = self;

// Display the Safari View
UIViewController *ctrl = [[[[UIApplication sharedApplication] delegate] window] rootViewController];
[ctrl presentViewController:safariView animated:YES completion:nil];
}

RCT_EXPORT_METHOD(isAvailable:(RCTResponseSenderBlock)callback)
{
if ([SFSafariViewController class]) {
// SafariView is available
return callback(@[[NSNull null], @true]);
} else {
return callback(@[RCTMakeError(@"SafariView is unavailable.", nil, nil)]);
}
}


-(void)safariViewControllerDidFinish:(nonnull SFSafariViewController *)controller
{
[controller dismissViewControllerAnimated:true completion:nil];
NSLog(@"SafariView dismissed.");
}

@end
Loading

0 comments on commit a1203db

Please sign in to comment.