Update to react-native 0.25+ and add BackButton

AddressBar.js

@@ -1,10 +1,13 @@
 'use strict';
 
-import React from 'react-native';
-var {
-    TextInput,
-    View,
-    } = React;
+import React, {
+  PropTypes,
+} from 'react';
+
+import ReactNative, {
+  TextInput,
+  View,
+} from 'react-native';
 
 import BaseComponent from './BaseComponent'
 import Utils from './Utils'
@@ -65,6 +68,7 @@ class AddressBar extends BaseComponent {
                     onSubmitEditing={this.onSubmitEditing}
                     onChange={this.handleTextInputChange}
                     clearButtonMode="while-editing"
+                    autoCorrect={false}
                     style={[styles.addressBarTextInput, this.props.foregroundColor && {color:this.props.foregroundColor}]}
                 />
             </View>
@@ -73,10 +77,10 @@ class AddressBar extends BaseComponent {
 }
 
 AddressBar.propTypes = {
-    url: React.PropTypes.string,
-    onLoad: React.PropTypes.func,
-    onReload: React.PropTypes.func,
-    foregroundColor: React.PropTypes.string
+    url: PropTypes.string,
+    onLoad: PropTypes.func,
+    onReload: PropTypes.func,
+    foregroundColor: PropTypes.string
 };
 
 AddressBar.defaultProps = {
@@ -86,4 +90,3 @@ AddressBar.defaultProps = {
 };
 
 module.exports = AddressBar;
-

BackButton.js

@@ -0,0 +1,74 @@
+'use strict';
+
+import React, {
+  PropTypes,
+} from 'react';
+
+import ReactNative, {
+  Image,
+} from 'react-native';
+
+import BaseComponent from './BaseComponent'
+import styles from './styles'
+import Button from './Button';
+
+class BackButton extends BaseComponent {
+
+    constructor(props) {
+      super(props);
+
+      this.state = {
+        visible: props.visible,
+      };
+
+      this._bind(
+        'onBackPress'
+      );
+    }
+
+    componentWillReceiveProps(nextProps) {
+      this.setState({
+        visible: nextProps.visible
+      });
+    }
+
+    buttonStyle() {
+      return [styles.backButton, this.props.foregroundColor && {tintColor:this.props.foregroundColor}];
+    }
+
+    onBackPress() {
+      const { onPress } = this.props;
+
+      onPress && onPress();
+    }
+
+    render() {
+      const { visible } = this.props;
+
+      if (!visible) {
+        return false;
+      }
+
+      return (
+        <Button
+          onPress={ this.onBackPress.bind(this) }>
+          <Image
+              style={this.buttonStyle()}
+              source={require('./assets/images/arrow-left.png')}
+          />
+        </Button>
+      );
+    }
+}
+
+BackButton.propTypes = {
+  visible: PropTypes.bool,
+  onPress: PropTypes.func,
+  foregroundColor: PropTypes.string
+};
+
+BackButton.defaultProps = {
+  visible: true,
+};
+
+module.exports = BackButton;

BaseComponent.js

@@ -1,9 +1,11 @@
 'use strict';
 
-import React from 'react-native';
+import React, {
+  Component
+} from 'react';
 
-export default class BaseComponent extends React.Component {
+export default class BaseComponent extends Component {
     _bind(...methods) {
         methods.forEach( (method) => this[method] = this[method].bind(this) );
     }
-}
+}

Button.js

@@ -1,17 +1,19 @@
 'use strict';
 
-var React = require('react-native');
-var {
-    View,
-    TouchableOpacity,
-    StyleSheet,
-    PropTypes,
-    ActivityIndicatorIOS,
-    ProgressBarAndroid,
-    TouchableNativeFeedback,
-    Platform,
-    Component
-    } = React;
+import React, {
+  Component,
+  PropTypes,
+} from 'react';
+
+import {
+  View,
+  TouchableOpacity,
+  StyleSheet,
+  Platform,
+  ActivityIndicatorIOS,
+  ProgressBarAndroid,
+  TouchableNativeFeedback,
+} from 'react-native';
 
 const IS_ANDROID = Platform.OS === 'android';
 
@@ -118,4 +120,4 @@ var styles = StyleSheet.create({
     }
 });
 
-module.exports = Button;
+module.exports = Button;

SampleApp/app.js

@@ -1,9 +1,7 @@
 'use strict';
 
-import React, {
-    Component,
-    View
-} from 'react-native';
+import React, {Component} from 'react';
+import {View} from 'react-native';
 
 import Webbrowser from 'react-native-webbrowser'
 

StatusBar.js

@@ -1,10 +1,13 @@
 'use strict';
 
-import React from 'react-native';
-var {
-    TextInput,
-    View,
-    } = React;
+import React, {
+  PropTypes,
+} from 'react';
+
+import ReactNative, {
+  TextInput,
+  View,
+} from 'react-native';
 
 import BaseComponent from './BaseComponent'
 import styles from './styles'
@@ -42,13 +45,12 @@ class StatusBar extends BaseComponent {
 }
 
 StatusBar.propTypes = {
-    status: React.PropTypes.string,
-    foregroundColor: React.PropTypes.string
+    status: PropTypes.string,
+    foregroundColor: PropTypes.string
 };
 
 StatusBar.defaultProps = {
     status: '',
 };
 
 module.exports = StatusBar;
-

Toolbar.js

@@ -1,10 +1,13 @@
 'use strict';
 
-import React from 'react-native';
-var {
-    View,
-    Image
-    } = React;
+import React, {
+  PropTypes,
+} from 'react';
+
+import {
+  View,
+  Image,
+} from 'react-native';
 
 import BaseComponent from './BaseComponent'
 import Button from './Button'
@@ -85,14 +88,14 @@ class Toolbar extends BaseComponent {
 }
 
 Toolbar.propTypes = {
-    backButtonEnabled: React.PropTypes.bool,
-    forwardButtonEnabled: React.PropTypes.bool,
-    homeButtonEnabled: React.PropTypes.bool,
-    hideHomeButton: React.PropTypes.bool,
-    onBack: React.PropTypes.func,
-    onHome: React.PropTypes.func,
-    onForward: React.PropTypes.func,
-    foregroundColor: React.PropTypes.string
+    backButtonEnabled: PropTypes.bool,
+    forwardButtonEnabled: PropTypes.bool,
+    homeButtonEnabled: PropTypes.bool,
+    hideHomeButton: PropTypes.bool,
+    onBack: PropTypes.func,
+    onHome: PropTypes.func,
+    onForward: PropTypes.func,
+    foregroundColor: PropTypes.string
 };
 
 Toolbar.defaultProps = {
@@ -105,4 +108,4 @@ Toolbar.defaultProps = {
     onForward: ()=> {}
 };
 
-module.exports = Toolbar;
+module.exports = Toolbar;

index.js

@@ -1,18 +1,21 @@
 'use strict';
 
-import React from 'react-native';
-var {
-    View,
-    WebView,
-    PropTypes
-    } = React;
+import React, {
+  PropTypes,
+} from 'react';
+
+import {
+  View,
+  WebView,
+} from 'react-native';
 
 import BaseComponent from './BaseComponent'
 import Utils from './Utils'
 import Spinner from 'react-native-loading-spinner-overlay';
 
 import styles from './styles'
 
+import BackButton from './BackButton'
 import StatusBar from './StatusBar'
 import AddressBar from './AddressBar'
 import Toolbar from './Toolbar'
@@ -29,7 +32,9 @@ const propTypes = {
     foregroundColor: PropTypes.string,
     backgroundColor: PropTypes.string,
     onNavigationStateChange: PropTypes.func,
-    onShouldStartLoadWithRequest: PropTypes.func
+    onShouldStartLoadWithRequest: PropTypes.func,
+    backButtonVisible: PropTypes.bool,
+    onBackPress: PropTypes.func
 }
 
 const defaultProps = {
@@ -41,6 +46,7 @@ const defaultProps = {
     hideActivityIndicator: false,
     onNavigationStateChange: ()=>{},
     onShouldStartLoadWithRequest: ()=>true,
+    backButtonVisible: true,
 }
 
 class Webbrowser extends BaseComponent {
@@ -91,6 +97,16 @@ class Webbrowser extends BaseComponent {
         />
     }
 
+    renderBackButton() {
+      return (
+        <BackButton
+          visible={this.props.backButtonVisible}
+          onPress={this.props.onBackPress}
+          foregroundColor={this.props.foregroundColor}
+          />
+      );
+    }
+
     renderStatusBar() {
 
         if (this.props.hideStatusBar) {
@@ -124,7 +140,10 @@ class Webbrowser extends BaseComponent {
         return (
             <View style={[styles.container, this.props.backgroundColor && {backgroundColor: this.props.backgroundColor}]}>
                 <View style={styles.header}>
-                    {this.renderAddressBar()}
+                    <View style={{ flexDirection: 'row' }}>
+                      {this.renderBackButton()}
+                      {this.renderAddressBar()}
+                    </View>
                     {this.renderStatusBar()}
                 </View>
                 <WebView
@@ -185,9 +204,9 @@ class Webbrowser extends BaseComponent {
 
         this.props.onNavigationStateChange(navState);
     }
-};
+}
 
 Webbrowser.propTypes = propTypes;
 Webbrowser.defaultProps = defaultProps;
 
-export default Webbrowser;
+export default Webbrowser;

package.json

@@ -30,7 +30,6 @@
   },
   "homepage": "https://github.com/d-a-n/react-native-webbrowser#readme",
   "dependencies": {
-    "react-native": "^0.20.0",
-    "react-native-loading-spinner-overlay": "0.0.6"
+    "react-native-loading-spinner-overlay": "^0.1.1"
   }
 }