diff --git a/AddressBar.js b/AddressBar.js
index 5f49a8d..1bdeae5 100644
--- a/AddressBar.js
+++ b/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}]}
/>
@@ -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;
-
diff --git a/BackButton.js b/BackButton.js
new file mode 100644
index 0000000..83328d8
--- /dev/null
+++ b/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 (
+
+ );
+ }
+}
+
+BackButton.propTypes = {
+ visible: PropTypes.bool,
+ onPress: PropTypes.func,
+ foregroundColor: PropTypes.string
+};
+
+BackButton.defaultProps = {
+ visible: true,
+};
+
+module.exports = BackButton;
diff --git a/BaseComponent.js b/BaseComponent.js
index 88dc15a..5d19f7d 100644
--- a/BaseComponent.js
+++ b/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) );
}
-}
\ No newline at end of file
+}
diff --git a/Button.js b/Button.js
index 3df08e6..68fa228 100644
--- a/Button.js
+++ b/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;
\ No newline at end of file
+module.exports = Button;
diff --git a/SampleApp/app.js b/SampleApp/app.js
index 68f5e7a..0b24d7e 100644
--- a/SampleApp/app.js
+++ b/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'
diff --git a/StatusBar.js b/StatusBar.js
index caf3cc5..5dbe42f 100644
--- a/StatusBar.js
+++ b/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,8 +45,8 @@ class StatusBar extends BaseComponent {
}
StatusBar.propTypes = {
- status: React.PropTypes.string,
- foregroundColor: React.PropTypes.string
+ status: PropTypes.string,
+ foregroundColor: PropTypes.string
};
StatusBar.defaultProps = {
@@ -51,4 +54,3 @@ StatusBar.defaultProps = {
};
module.exports = StatusBar;
-
diff --git a/Toolbar.js b/Toolbar.js
index b6d1b4e..8471f4f 100644
--- a/Toolbar.js
+++ b/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;
\ No newline at end of file
+module.exports = Toolbar;
diff --git a/index.js b/index.js
index 4621466..252c336 100644
--- a/index.js
+++ b/index.js
@@ -1,11 +1,13 @@
'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'
@@ -13,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'
@@ -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 (
+
+ );
+ }
+
renderStatusBar() {
if (this.props.hideStatusBar) {
@@ -124,7 +140,10 @@ class Webbrowser extends BaseComponent {
return (
- {this.renderAddressBar()}
+
+ {this.renderBackButton()}
+ {this.renderAddressBar()}
+
{this.renderStatusBar()}