From e58424a1548eb2650385d6ff8a3875b492e29a5d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Je=CC=81re=CC=81my=20Magrin?= Date: Thu, 16 Jun 2016 17:46:02 +0200 Subject: [PATCH 1/3] Update to react-native 0.25+ and remove react native peer dependency --- AddressBar.js | 22 ++++++++++++---------- BaseComponent.js | 8 +++++--- Button.js | 28 +++++++++++++++------------- SampleApp/app.js | 6 ++---- StatusBar.js | 18 ++++++++++-------- Toolbar.js | 31 +++++++++++++++++-------------- index.js | 18 ++++++++++-------- package.json | 3 +-- 8 files changed, 72 insertions(+), 62 deletions(-) diff --git a/AddressBar.js b/AddressBar.js index 5f49a8d..f654dde 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' @@ -73,10 +76,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 +89,3 @@ AddressBar.defaultProps = { }; module.exports = AddressBar; - 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..3773952 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, + Platform, +} from 'react'; + +import { + View, + TouchableOpacity, + StyleSheet, + 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..986a809 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' @@ -185,9 +187,9 @@ class Webbrowser extends BaseComponent { this.props.onNavigationStateChange(navState); } -}; +} Webbrowser.propTypes = propTypes; Webbrowser.defaultProps = defaultProps; -export default Webbrowser; \ No newline at end of file +export default Webbrowser; diff --git a/package.json b/package.json index 2aa754d..ce0907a 100644 --- a/package.json +++ b/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" } } From 5dbb83f0c992707727e91f6a47d5b01d62d52d3a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Je=CC=81re=CC=81my=20Magrin?= Date: Thu, 16 Jun 2016 17:59:16 +0200 Subject: [PATCH 2/3] Missplace a component in import --- Button.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Button.js b/Button.js index 3773952..68fa228 100644 --- a/Button.js +++ b/Button.js @@ -3,13 +3,13 @@ import React, { Component, PropTypes, - Platform, } from 'react'; import { View, TouchableOpacity, StyleSheet, + Platform, ActivityIndicatorIOS, ProgressBarAndroid, TouchableNativeFeedback, From 37401c197621f10f8e6853bec165927e8b2f9451 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Je=CC=81re=CC=81my=20Magrin?= Date: Fri, 17 Jun 2016 10:27:15 +0200 Subject: [PATCH 3/3] Add backbutton --- AddressBar.js | 1 + BackButton.js | 74 +++++++++++++++++++++++++++++++++++++++++++++++++++ index.js | 21 +++++++++++++-- styles.js | 15 ++++++++--- 4 files changed, 105 insertions(+), 6 deletions(-) create mode 100644 BackButton.js diff --git a/AddressBar.js b/AddressBar.js index f654dde..1bdeae5 100644 --- a/AddressBar.js +++ b/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}]} /> 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/index.js b/index.js index 986a809..252c336 100644 --- a/index.js +++ b/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 ( + + ); + } + renderStatusBar() { if (this.props.hideStatusBar) { @@ -126,7 +140,10 @@ class Webbrowser extends BaseComponent { return ( - {this.renderAddressBar()} + + {this.renderBackButton()} + {this.renderAddressBar()} + {this.renderStatusBar()}