initial commit

Author: d-a-n

.gitignore

@@ -1,3 +1,6 @@
+# IDEs
+.idea
+
 # Logs
 logs
 *.log

.npmignore

@@ -0,0 +1,5 @@
+test
+.idea
+SampleApp
+.gitignore
+docs

AddressBar.js

@@ -0,0 +1,89 @@
+'use strict';
+
+import React from 'react-native';
+var {
+    TextInput,
+    View,
+    } = React;
+
+import BaseComponent from './BaseComponent'
+import Utils from './Utils'
+import styles from './styles'
+
+const TEXT_INPUT_REF = 'urlInput';
+
+class AddressBar extends BaseComponent {
+
+    constructor(props) {
+        super(props);
+
+        this.inputText = '';
+
+        this.state = {
+            url: this.props.url
+        };
+
+        this._bind(
+            'handleTextInputChange',
+            'onSubmitEditing'
+        );
+    }
+
+    componentWillReceiveProps(nextProps) {
+        this.setState({
+            url: nextProps.url
+        });
+    }
+
+    handleTextInputChange(event) {
+        const url = Utils.sanitizeUrl(event.nativeEvent.text);
+        this.inputText = url;
+    }
+
+    onSubmitEditing(event) {
+        this.load();
+    }
+
+    load() {
+        const url = this.inputText;
+        if (url === this.props.url) {
+            this.props.onReload();
+        } else {
+            this.props.onLoad(url)
+        }
+        // dismiss keyboard
+        this.refs[TEXT_INPUT_REF].blur();
+    }
+
+    render() {
+        return (
+            <View style={[styles.addressBarRow]}>
+                <TextInput
+                    ref={TEXT_INPUT_REF}
+                    autoCapitalize="none"
+                    defaultValue={this.state.url}
+                    onSubmitEditing={this.onSubmitEditing}
+                    onChange={this.handleTextInputChange}
+                    clearButtonMode="while-editing"
+                    style={[styles.addressBarTextInput, this.props.foregroundColor && {color:this.props.foregroundColor}]}
+                />
+            </View>
+        );
+    }
+}
+
+AddressBar.propTypes = {
+    url: React.PropTypes.string,
+    onLoad: React.PropTypes.func,
+    onReload: React.PropTypes.func,
+    foregroundColor: React.PropTypes.string
+};
+
+AddressBar.defaultProps = {
+    url: '',
+    onLoad: (url)=>{},
+    onReload: ()=>{}
+};
+
+module.exports = AddressBar;
+

BaseComponent.js

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

Button.js

@@ -0,0 +1,121 @@
+'use strict';
+
+var React = require('react-native');
+var {
+    View,
+    TouchableOpacity,
+    StyleSheet,
+    PropTypes,
+    ActivityIndicatorIOS,
+    ProgressBarAndroid,
+    TouchableNativeFeedback,
+    Platform,
+    Component
+    } = React;
+
+const IS_ANDROID = Platform.OS === 'android';
+
+class Button extends Component {
+
+    constructor() {
+        super();
+        this.state = {}
+    }
+
+    _renderChildAndroid() {
+
+        if (this.props.loading) {
+            return (
+                <ProgressBarAndroid
+                    style={[{height: 20}, styles.spinner]}
+                    styleAttr='Inverse'
+                    color={this.props.activityIndicatorColor || 'black'}
+                />
+            );
+        }
+
+        return this.props.children;
+    }
+
+    _renderChildiOS() {
+        if (this.props.loading) {
+            return (
+                <ActivityIndicatorIOS
+                    animating={true}
+                    size='small'
+                    style={styles.spinner}
+                    color={this.props.activityIndicatorColor || 'black'}
+                />
+            );
+        }
+        return this.props.children;
+    }
+
+    _renderChild() {
+        if (IS_ANDROID) {
+            return this._renderChildAndroid()
+        }
+        return this._renderChildiOS()
+    }
+
+    render() {
+        if (this.props.disabled === true || this.props.loading === true) {
+            return (
+                <View style={[styles.button, this.props.style, (this.props.disabledStyle || styles.opacity)]}>
+                    {this._renderChild()}
+                </View>
+            );
+        } else {
+            // Extract Touchable props
+            var touchableProps = {
+                onPress: this.props.onPress,
+                onPressIn: this.props.onPressIn,
+                onPressOut: this.props.onPressOut,
+                onLongPress: this.props.onLongPress
+            };
+            if (IS_ANDROID) {
+                touchableProps = Object.assign(touchableProps, {
+                    background: this.props.background || TouchableNativeFeedback.SelectableBackground()
+                });
+                return (
+                    <TouchableNativeFeedback {...touchableProps}>
+                        {this._renderChildAndroid()}
+                    </TouchableNativeFeedback>
+                )
+            } else {
+                return (
+                    <TouchableOpacity {...touchableProps}
+                        style={[styles.button, this.props.style]}>
+                        {this._renderChildiOS()}
+                    </TouchableOpacity>
+                );
+            }
+        }
+    }
+}
+
+Button.propTypes = {
+    loading: PropTypes.bool,
+    disabled: PropTypes.bool,
+    onPress: PropTypes.func,
+    onLongPress: PropTypes.func,
+    onPressIn: PropTypes.func,
+    onPressOut: PropTypes.func
+};
+
+var styles = StyleSheet.create({
+    button: {
+    },
+    textButton: {
+        fontSize: 18,
+        alignSelf: 'center'
+    },
+    spinner: {
+        alignSelf: 'center'
+    },
+    opacity: {
+        opacity: 0.5
+    }
+});
+
+module.exports = Button;

README.md

@@ -1,2 +1,50 @@
 # react-native-webbrowser
-A cross-platform (iOS / Android), full-featured web browser module for React Native apps.
+A cross-platform (iOS / Android), full-featured in-app web browser component for React Native that is highly highly customizable. Currently you can hide the address-, status- and toolbar. Aditionally the foreground and background colors can be modified.
+ 
+## Install
+
+```sh
+npm i react-native-webbrowser --save
+```
+
+## Usage
+
+Here is an extensive overview of the component usage.
+
+```jsx
+
+class SampleApp extends Component {
+    render() {
+        return (
+            <View style={{paddingTop:20, flex:1}}>
+            
+                <Webbrowser
+                    url="https://your-url.com"
+                    hideHomeButton={false}
+                    hideToolbar={false}
+                    hideAddressBar={false}
+                    hideStatusBar={false}
+                    foregroundColor={'#efefef'}
+                    backgroundColor={'#333'}
+                />
+                
+            </View>
+        );
+    }
+}
+```
+
+## Props
+
+* `url - string` required, web address
+* `hideAddressBar - bool` optional, hides the address bar / address input
+* `hideStatusBar - bool` optional, hides the status bar / site title
+* `hideToolbar - bool` optional, hides the toolbar (nav bar)
+* `hideHomeButton - bool` optional, hides just the home button from the toolbar
+* `foregroundColor - string` optional, sets the forground color of text and icon elements
+* `backgroundColor - string` optional, sets the background color
+
+## Screenshot
+
+![example](https://raw.githubusercontent.com/d-a-n/react-native-webbrowser/master/assets/images/screenshot.png)
+![example](https://raw.githubusercontent.com/d-a-n/react-native-webbrowser/master/assets/images/screenshot2.png)

SampleApp/.flowconfig

@@ -0,0 +1,65 @@
+[ignore]
+
+# We fork some components by platform.
+.*/*.web.js
+.*/*.android.js
+
+# Some modules have their own node_modules with overlap
+.*/node_modules/node-haste/.*
+
+# Ugh
+.*/node_modules/babel.*
+.*/node_modules/babylon.*
+.*/node_modules/invariant.*
+
+# Ignore react and fbjs where there are overlaps, but don't ignore
+# anything that react-native relies on
+.*/node_modules/fbjs/lib/Map.js
+.*/node_modules/fbjs/lib/Promise.js
+.*/node_modules/fbjs/lib/fetch.js
+.*/node_modules/fbjs/lib/ExecutionEnvironment.js
+.*/node_modules/fbjs/lib/isEmpty.js
+.*/node_modules/fbjs/lib/crc32.js
+.*/node_modules/fbjs/lib/ErrorUtils.js
+
+# Flow has a built-in definition for the 'react' module which we prefer to use
+# over the currently-untyped source
+.*/node_modules/react/react.js
+.*/node_modules/react/lib/React.js
+.*/node_modules/react/lib/ReactDOM.js
+
+# Ignore commoner tests
+.*/node_modules/commoner/test/.*
+
+# See https://github.com/facebook/flow/issues/442
+.*/react-tools/node_modules/commoner/lib/reader.js
+
+# Ignore jest
+.*/node_modules/jest-cli/.*
+
+# Ignore Website
+.*/website/.*
+
+[include]
+
+[libs]
+node_modules/react-native/Libraries/react-native/react-native-interface.js
+
+[options]
+module.system=haste
+
+munge_underscores=true
+
+module.name_mapper='^image![a-zA-Z0-9$_-]+$' -> 'GlobalImageStub'
+module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\)$' -> 'RelativeImageStub'
+
+suppress_type=$FlowIssue
+suppress_type=$FlowFixMe
+suppress_type=$FixMe
+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(2[0-1]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(2[0-1]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
+
+[version]
+0.21.0

SampleApp/.gitignore

@@ -0,0 +1,34 @@
+# OSX
+#
+.DS_Store
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+project.xcworkspace
+
+# Android/IJ
+#
+.idea
+.gradle
+local.properties
+
+# node.js
+#
+node_modules/
+npm-debug.log

SampleApp/.watchmanconfig

@@ -0,0 +1 @@
+{}