Fix WebView example on iOS

Summary: Fixed broken scaling logic in Webview example for iOS. Pages must be reloaded after toggling `scalesPageToFit`, but that wasn't happening. Reviewed By: javache Differential Revision: D2982371 fb-gh-sync-id: 8442609179bfe9ade10d1d0bac1807e4a8855d00 shipit-source-id: 8442609179bfe9ade10d1d0bac1807e4a8855d00
facebook · Feb 26, 2016 · 7032a64 · 7032a64
1 parent f7df3bb
commit 7032a64
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 11 deletions.
diff --git a/Examples/UIExplorer/WebViewExample.js b/Examples/UIExplorer/WebViewExample.js
@@ -163,7 +163,7 @@ var WebViewExample = React.createClass({
 
 var Button = React.createClass({
   _handlePress: function() {
-    if (this.props.enabled && this.props.onPress) {
+    if (this.props.enabled !== false && this.props.onPress) {
       this.props.onPress();
     }
   },
@@ -182,19 +182,19 @@ var ScaledWebView = React.createClass({
 
   getInitialState: function() {
     return {
-      scalingEnabled: true
+      scalingEnabled: true,
     }
   },
 
   render: function() {
     return (
-      <View style={{height:120}}>
+      <View>
         <WebView
           style={{
             backgroundColor: BGWASH,
-            height: 100,
+            height: 200,
           }}
-          source={{html: HTML}}
+          source={{uri: 'https://facebook.github.io/react/'}}
           scalesPageToFit={this.state.scalingEnabled}
         />
         <View style={styles.buttons}>
@@ -307,7 +307,7 @@ const HTML = `
   <head>
     <title>Hello Static World</title>
     <meta http-equiv="content-type" content="text/html; charset=utf-8">
-    <meta name="viewport" content="width=640, user-scalable=no">
+    <meta name="viewport" content="width=320, user-scalable=no">
     <style type="text/css">
       body {
         margin: 0;
@@ -337,6 +337,10 @@ exports.examples = [
     title: 'Simple Browser',
     render(): ReactElement { return <WebViewExample />; }
   },
+  {
+    title: 'Scale Page to Fit',
+    render(): ReactElement { return <ScaledWebView/>; }
+  },
   {
     title: 'Bundled HTML',
     render(): ReactElement {
@@ -367,10 +371,6 @@ exports.examples = [
       );
     }
   },
-  {
-    title: 'Scale Page to Fit',
-    render(): ReactElement { return <ScaledWebView/>; }
-  },
   {
     title: 'POST Test',
     render(): ReactElement {

diff --git a/React/Views/RCTWebView.h b/React/Views/RCTWebView.h
@@ -35,6 +35,7 @@ shouldStartLoadForRequest:(NSMutableDictionary<NSString *, id> *)request
 @property (nonatomic, assign) UIEdgeInsets contentInset;
 @property (nonatomic, assign) BOOL automaticallyAdjustContentInsets;
 @property (nonatomic, copy) NSString *injectedJavaScript;
+@property (nonatomic, assign) BOOL scalesPageToFit;
 
 - (void)goForward;
 - (void)goBack;

diff --git a/React/Views/RCTWebView.m b/React/Views/RCTWebView.m
@@ -118,6 +118,19 @@ - (void)setContentInset:(UIEdgeInsets)contentInset
                       updateOffset:NO];
 }
 
+- (void)setScalesPageToFit:(BOOL)scalesPageToFit
+{
+  if (_webView.scalesPageToFit != scalesPageToFit) {
+    _webView.scalesPageToFit = scalesPageToFit;
+    [_webView reload];
+  }
+}
+
+- (BOOL)scalesPageToFit
+{
+  return _webView.scalesPageToFit;
+}
+
 - (void)setBackgroundColor:(UIColor *)backgroundColor
 {
   CGFloat alpha = CGColorGetAlpha(backgroundColor.CGColor);

diff --git a/React/Views/RCTWebViewManager.m b/React/Views/RCTWebViewManager.m
@@ -36,8 +36,8 @@ - (UIView *)view
 RCT_EXPORT_VIEW_PROPERTY(source, NSDictionary)
 RCT_REMAP_VIEW_PROPERTY(bounces, _webView.scrollView.bounces, BOOL)
 RCT_REMAP_VIEW_PROPERTY(scrollEnabled, _webView.scrollView.scrollEnabled, BOOL)
-RCT_REMAP_VIEW_PROPERTY(scalesPageToFit, _webView.scalesPageToFit, BOOL)
 RCT_REMAP_VIEW_PROPERTY(decelerationRate, _webView.scrollView.decelerationRate, CGFloat)
+RCT_EXPORT_VIEW_PROPERTY(scalesPageToFit, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(injectedJavaScript, NSString)
 RCT_EXPORT_VIEW_PROPERTY(contentInset, UIEdgeInsets)
 RCT_EXPORT_VIEW_PROPERTY(automaticallyAdjustContentInsets, BOOL)