Add backbutton

AddressBar.js

@@ -68,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>

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;

index.js

@@ -15,6 +15,7 @@ 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'
@@ -31,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 = {
@@ -43,6 +46,7 @@ const defaultProps = {
     hideActivityIndicator: false,
     onNavigationStateChange: ()=>{},
     onShouldStartLoadWithRequest: ()=>true,
+    backButtonVisible: true,
 }
 
 class Webbrowser extends BaseComponent {
@@ -93,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) {
@@ -126,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

styles.js

@@ -20,13 +20,20 @@ export default StyleSheet.create({
         shadowRadius:SHADOW_RADIUS,
         shadowOffset: { height:1, width: 0 },
     },
-
     addressBarRow: {
+        flex: 1,
         flexDirection: 'row',
         marginTop: ELEMENT_MARGIN/2,
         marginBottom: ELEMENT_MARGIN/2,
-        marginLeft: ELEMENT_MARGIN,
-        marginRight: ELEMENT_MARGIN,
+        marginLeft: ELEMENT_MARGIN + 7,
+        marginRight: ELEMENT_MARGIN + 7,
+    },
+    backButton: {
+      width: 20,
+      height: 20,
+      opacity: 0.9,
+      marginTop: ELEMENT_MARGIN/2 + 2,
+      marginLeft: ELEMENT_MARGIN + 7,
     },
     webView: {
         backgroundColor: BGWASH,
@@ -83,4 +90,4 @@ export default StyleSheet.create({
         height:20,
         opacity: 0.9
     }
-});
+});