yyppaag
/
react-native-autoheight-webview
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 30 Wiki Activity
Browse Source

Test with spacing (not working)

Onno Schwanen 5 years ago
parent
d4967b8bd8
commit
724fd572bc
2 changed files with 20 additions and 2 deletions
Unified View Show Diff Stats
  1. 19
    1
      demo/App.js
  2. 1
    1
      demo/newsletter.js

+ 19
- 1
demo/App.js View File

7 
   TouchableOpacity,
 7 
   TouchableOpacity,
8 
   Platform,
 8 
   Platform,
9 
   Linking,
 9 
   Linking,
10 
+  Dimensions,
11 
+  View,
10 
 } from 'react-native';
 12 
 } from 'react-native';
11
13
12 
 import AutoHeightWebView from 'react-native-autoheight-webview';
 14 
 import AutoHeightWebView from 'react-native-autoheight-webview';
104 
   const [heightSize, setHeightSize] = useState({height: 0, width: 0});
 106 
   const [heightSize, setHeightSize] = useState({height: 0, width: 0});
105 
   const [widthSize, setWidthSize] = useState({height: 0, width: 0});
 107 
   const [widthSize, setWidthSize] = useState({height: 0, width: 0});
106
108
109 
+  // set spacing on left/right
110 
+  const spacing = 30;
111 
+
112 
+  // calculate new width of *real* content
113 
+  const screenWidth = Math.round(Dimensions.get('window').width) - 2 * spacing;
114 
+  // For example on iPhone 8, screenWidth will be 315
115 
+
116 
+  // I temporarily hard-coded the width into the newsletter.js its viewport tag
117 
+
107 
   return (
 118 
   return (
108 
     <ScrollView
 119 
     <ScrollView
109 
       style={{
 120 
       style={{
118 
         scalesPageToFit
 129 
         scalesPageToFit
119 
         scrollEnabled={false}
 130 
         scrollEnabled={false}
120 
         scrollEnabledWithZoomedin={true}
 131 
         scrollEnabledWithZoomedin={true}
121 
-        customStyle={heightStyle}
132 
+        customStyle={`
133 
+          ${heightStyle}
134 
+          #rnahw-wrapper {
135 
+            padding: 0 ${spacing}px;
136 
+            width: ${screenWidth};
137 
+            box-sizing: border-box;
138 
+          }
139 
+        `}
122 
         onError={onError}
 140 
         onError={onError}
123 
         onLoad={onHeightLoad}
 141 
         onLoad={onHeightLoad}
124 
         onLoadStart={onHeightLoadStart}
 142 
         onLoadStart={onHeightLoadStart}

+ 1
- 1
demo/newsletter.js View File

3 
   <head>
 3 
   <head>
4 
     <title>DB BAHN - Current information about your connection:</title>
 4 
     <title>DB BAHN - Current information about your connection:</title>
5 
     <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
 5 
     <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
6 
-    <meta name="viewport" content="width=device-width">
6 
+    <meta name="viewport" content="width=315">
7 
   </head>
 7 
   </head>
8 
   <body style="background-color: rgb(206, 206, 206);margin: 0; width:100%;">
 8 
   <body style="background-color: rgb(206, 206, 206);margin: 0; width:100%;">
9 
     <div id="doc" style="font-family:Arial,sans-serif;font-size:12px;height:100%; min-width: 500px; max-width: 944px; background: #fff; margin: 0; color:#333333">
 9 
     <div id="doc" style="font-family:Arial,sans-serif;font-size:12px;height:100%; min-width: 500px; max-width: 944px; background: #fff; margin: 0; color:#333333">