Add animated, modalPresentationStyle and modalTransitionStyle options for iOS

Author: jdnichollsc

README.md

@@ -94,6 +94,9 @@ Property       | Description
 `preferredBarTintColor` (String)     | The color to tint the background of the navigation bar and the toolbar. [`white`/`#FFFFFF`]
 `preferredControlTintColor` (String) | The color to tint the control buttons on the navigation bar and the toolbar. [`gray`/`#808080`]
 `readerMode` (Boolean)               | A value that specifies whether Safari should enter Reader mode, if it is available. [`true`/`false`]
+`animated` (Boolean)                 | Animate the presentation. [`true`/`false`]
+`modalPresentationStyle` (String)    | The presentation style for modally presented view controllers. [`none`/`fullScreen`/`pageSheet`/`formSheet`/`currentContext`/`custom`/`overFullScreen`/`overCurrentContext`/`popover`]
+`modalTransitionStyle` (String)      | The transition style to use when presenting the view controller. [`coverVertical`/`flipHorizontal`/`crossDissolve`/`partialCurl`]
 
 ### Android Options
 Property       | Description

example/.eslintrc.js

@@ -1,4 +1,17 @@
 module.exports = {
   root: true,
   extends: '@react-native-community',
+  rules: {
+    "comma-dangle": ["error", {
+      "arrays": "never",
+      "objects": "never",
+      "imports": "never",
+      "exports": "never",
+      "functions": "never"
+    }],
+    "prettier/prettier": ["error", {
+      "endOfLine": "auto",
+      "singleQuote": true
+    }]
+  }
 };

example/App.js

@@ -6,7 +6,7 @@
  * @flow
  */
 
-import React, { Component } from 'react'
+import React, { Component } from 'react';
 import {
   Platform,
   StyleSheet,
@@ -17,40 +17,43 @@ import {
   TextInput,
   StatusBar,
   Linking
-} from 'react-native'
-import InAppBrowser from 'react-native-inappbrowser-reborn'
+} from 'react-native';
+import InAppBrowser from 'react-native-inappbrowser-reborn';
 
 const instructions = Platform.select({
   ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
   android:
     'Double tap R on your keyboard to reload,\n' +
     'Shake or press menu button for dev menu'
-})
+});
 
 export default class App extends Component {
-  constructor (props) {
-    super(props)
+  constructor(props) {
+    super(props);
 
     this.state = {
       url: 'https://www.google.com'
-    }
+    };
   }
 
-  sleep (timeout) {
-    return new Promise(resolve => setTimeout(resolve, timeout))
+  sleep(timeout) {
+    return new Promise(resolve => setTimeout(resolve, timeout));
   }
 
-  async openLink () {
-    const { url } = this.state
+  async openLink() {
+    const { url } = this.state;
     try {
       if (await InAppBrowser.isAvailable()) {
-        StatusBar.setBarStyle('light-content')
+        StatusBar.setBarStyle('light-content');
         const result = await InAppBrowser.open(url, {
           // iOS Properties
           dismissButtonStyle: 'cancel',
           preferredBarTintColor: '#453AA4',
           preferredControlTintColor: 'white',
           readerMode: false,
+          animated: true,
+          modalPresentationStyle: 'fullScreen',
+          modalTransitionStyle: 'partialCurl',
           // Android Properties
           showTitle: true,
           toolbarColor: '#6200EE',
@@ -69,58 +72,67 @@ export default class App extends Component {
           headers: {
             'my-custom-header': 'my custom header value'
           }
-        })
-        await this.sleep(800)
-        Alert.alert('Response', JSON.stringify(result))
-      } else Linking.openURL(url)
+        });
+        await this.sleep(800);
+        Alert.alert('Response', JSON.stringify(result));
+      } else {
+        Linking.openURL(url);
+      }
     } catch (error) {
-      Alert.alert(error.message)
+      Alert.alert(error.message);
     }
   }
 
-  getDeepLink (path = '') {
-    const scheme = 'my-demo'
-    const prefix = Platform.OS === 'android' ? `${scheme}://demo/` : `${scheme}://`
-    return prefix + path
+  getDeepLink(path = '') {
+    const scheme = 'my-demo';
+    const prefix =
+      Platform.OS === 'android' ? `${scheme}://demo/` : `${scheme}://`;
+    return prefix + path;
   }
 
-  async tryDeepLinking () {
-    const redirectToURL = `https://proyecto26.github.io/react-native-inappbrowser/`
-    const redirectUrl = this.getDeepLink('home')
-    const url = `${redirectToURL}?redirect_url=${encodeURIComponent(redirectUrl)}`
+  async tryDeepLinking() {
+    const redirectToURL =
+      'https://proyecto26.github.io/react-native-inappbrowser/';
+    const redirectUrl = encodeURIComponent(this.getDeepLink('home'));
+    const url = `${redirectToURL}?redirect_url=${redirectUrl}`;
     try {
       if (await InAppBrowser.isAvailable()) {
-        const result = await InAppBrowser.openAuth(url, redirectUrl)
-        await this.sleep(800)
-        Alert.alert('Response', JSON.stringify(result))
+        const result = await InAppBrowser.openAuth(url, redirectUrl);
+        await this.sleep(800);
+        Alert.alert('Response', JSON.stringify(result));
       } else {
-        Alert.alert('InAppBrowser is not supported :/')
+        Alert.alert('InAppBrowser is not supported :/');
       }
     } catch (error) {
-      Alert.alert('Something’s wrong with the app :(')
+      Alert.alert('Something’s wrong with the app :(');
     }
   }
 
-  render () {
+  render() {
     return (
       <View style={styles.container}>
-        <StatusBar barStyle='dark-content' />
-        <Text style={styles.welcome}>{'Welcome InAppBrowser\nfor React Native!'}</Text>
+        <StatusBar barStyle="dark-content" />
+        <Text style={styles.welcome}>
+          {'Welcome InAppBrowser\nfor React Native!'}
+        </Text>
         <Text style={styles.instructions}>Type the url</Text>
         <TextInput
           style={styles.urlInput}
-          onChangeText={(text) => this.setState({ url: text })}
+          onChangeText={text => this.setState({ url: text })}
           value={this.state.url}
         />
         <View style={styles.openButton}>
-          <Button title='Open link' onPress={() => this.openLink()} />
+          <Button title="Open link" onPress={() => this.openLink()} />
         </View>
         <View style={styles.openButton}>
-          <Button title='Try deep linking' onPress={() => this.tryDeepLinking()} />
+          <Button
+            title="Try deep linking"
+            onPress={() => this.tryDeepLinking()}
+          />
         </View>
         <Text style={styles.instructions}>{instructions}</Text>
       </View>
-    )
+    );
   }
 }
 
@@ -152,4 +164,4 @@ const styles = StyleSheet.create({
     paddingTop: Platform.OS === 'ios' ? 0 : 20,
     paddingBottom: Platform.OS === 'ios' ? 0 : 20
   }
-})
+});

example/ios/Podfile.lock

@@ -107,7 +107,7 @@ DEPENDENCIES:
   - React-RCTText (from `../node_modules/react-native/Libraries/Text`)
   - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`)
   - React-RCTWebSocket (from `../node_modules/react-native/Libraries/WebSocket`)
-  - RNInAppBrowser (from `/Users/jdnichollsc/dev/react-native/inappbrowser/example/node_modules/react-native-inappbrowser-reborn`)
+  - RNInAppBrowser (from `../node_modules/react-native-inappbrowser-reborn`)
   - yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
@@ -158,7 +158,7 @@ EXTERNAL SOURCES:
   React-RCTWebSocket:
     :path: "../node_modules/react-native/Libraries/WebSocket"
   RNInAppBrowser:
-    :path: "/Users/jdnichollsc/dev/react-native/inappbrowser/example/node_modules/react-native-inappbrowser-reborn"
+    :path: "../node_modules/react-native-inappbrowser-reborn"
   yoga:
     :path: "../node_modules/react-native/ReactCommon/yoga"