day25 complete

Author: fangwei716

README.md

@@ -160,6 +160,13 @@ Reference: https://github.com/brentvatne/react-native-scrollable-tab-view
 
 ![day24](https://raw.githubusercontent.com/fangwei716/ThirtyDaysOfReactNative/master/screenshot/day24.gif)
 
+## Day 25
+Custome in-app browser
+
+Reference: https://github.com/d-a-n/react-native-webbrowser
+
+![day25](https://raw.githubusercontent.com/fangwei716/ThirtyDaysOfReactNative/master/screenshot/day25.gif)
+
 ## License
 
 ThirtyDaysOfReactNative is under the MIT license.

index.ios.js

@@ -33,6 +33,7 @@ import Day21 from './view/day21';
 import Day22 from './view/day22';
 import Day23 from './view/day23';
 import Day24 from './view/day24';
+import Day25 from './view/day25';
 
 class MainView extends Component {
   constructor() {
@@ -254,6 +255,15 @@ class MainView extends Component {
         size:50,
         color:"#e32524",
         hideNav: true,
+      },{
+        key:24,
+        title:"custome in-app browser",
+        component: Day25,
+        isFA: false,
+        icon: "ios-world",
+        size:50,
+        color:"#00ab6b",
+        hideNav: true,
       }]
     }
   }
@@ -318,7 +328,7 @@ class ThirtyDaysOfReactNative extends Component{
           title:"30 Days of RN",
           // title:"Time Picker",
           component: MainView,
-          // component: Day24,
+          // component: Day25,
           // titleTextColor:"#ff6b6b",
           backButtonTitle: 'back',
           shadowHidden: true,

package.json

@@ -22,6 +22,7 @@
     "react-native-touch-id": "^1.2.4",
     "react-native-vector-icons": "^1.3.2",
     "react-native-video": "^0.7.1",
+    "react-native-webbrowser": "0.0.6",
     "react-timer-mixin": "^0.13.3"
   }
 }

screenshot/day25.gif

@@ -0,0 +1,61 @@
+/**
+ * Day 25
+ * custom refresh control
+ */
+'use strict';
+
+import React,{
+  Component,
+  Image,
+  StyleSheet,
+  Text,
+  TouchableHighlight,
+  ActionSheetIOS,
+  View
+} from 'react-native';
+import Util from './utils';
+import Webbrowser from 'react-native-webbrowser';
+import Icon from 'react-native-vector-icons/Ionicons';
+
+export default class extends Component{
+  _showShareActionSheet() {
+    console.log(this.refs.browser.state.status);
+    ActionSheetIOS.showShareActionSheetWithOptions({
+      url: this.refs.browser.state.currentUrl,
+      message: this.refs.browser.state.status,
+    },
+    (error) => console.log(error),
+    (success, method) => {
+    });
+  }
+
+  render() {
+    return (
+      <View style={{paddingTop:20,flex:1,backgroundColor:"#00ab6b"}}>
+        <Webbrowser
+          ref="browser"
+          url="https://github.com"
+          hideHomeButton={true}
+          hideToolbar={false}
+          hideAddressBar={false}
+          hideStatusBar={true}
+          hideActivityIndicator={true}
+          foregroundColor={'#555'}
+          backgroundColor={'#00ab6b'}
+        />
+        <TouchableHighlight underlayColor="transparent" onPress={() => this._showShareActionSheet()}>
+          <Icon name="ios-upload-outline" style={styles.shareIcon} color="#268260" size={30}/>
+        </TouchableHighlight>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  shareIcon:{
+    position:"absolute",
+    bottom:0,
+    left: 170,
+  }
+});
+