index.ios.js

'use strict';

import React, { Component } from 'react'
import {
  AlertIOS,
  AppRegistry,
  processColor,
  StatusBar,
  StyleSheet,
  Text,
  TouchableHighlight,
  View
} from 'react-native';

import SafariView from 'react-native-safari-view';

class SafariViewExample extends Component {
  componentDidMount() {
    this.showSubscription= () => {
      console.log("SafariView onShow")
      StatusBar.setBarStyle("light-content");
    };
    this.dismissSubscription = () => {
      console.log("SafariView onDismiss");
      StatusBar.setBarStyle("default");
    };
    SafariView.addEventListener("onShow", this.showSubscription);
    SafariView.addEventListener("onDismiss", this.dismissSubscription);
  }

  componentWillUnmount() {
    SafariView.removeEventListener("onShow", this.showSubscription);
    SafariView.removeEventListener("onDismiss", this.dismissSubscription);
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          react-native-safari-view
        </Text>
        <Text style={styles.instructions}>
          github.com/naoufal/react-native-safari-view
        </Text>
        <TouchableHighlight
          style={styles.btn}
          onPress={this._clickHandler}
          underlayColor="#0380BE"
          activeOpacity={1}
        >
          <Text style={{
            color: '#fff',
            fontWeight: '600'
          }}>
            Show Safari View
          </Text>
        </TouchableHighlight>
      </View>
    );
  }

  _clickHandler() {
    SafariView.show({
      url: 'http://twitter.com/naoufal',
      readerMode: true,
      tintColor: "rgb(0, 0, 0)",
      fromBottom: true
    });
  }

  _isAvailable() {
    SafariView.isAvailable()
      .then(success => {
        AlertIOS.alert('SFSafariView available.');
      })
      .catch(error => {
        AlertIOS.alert('SFSafariView not available.');
      });
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF'
  },
  welcome: {
    margin: 10,
    fontSize: 20,
    fontWeight: '600',
    textAlign: 'center'
  },
  instructions: {
    marginBottom: 5,
    color: '#333333',
    fontSize: 13,
    textAlign: 'center'
  },
  btn: {
    borderRadius: 3,
    marginTop: 200,
    paddingTop: 15,
    paddingBottom: 15,
    paddingLeft: 15,
    paddingRight: 15,
    backgroundColor: '#0391D7'
  }
});

AppRegistry.registerComponent('SafariViewExample', () => SafariViewExample);