|
|
@@ -7,6 +7,8 @@ import {
|
|
7
|
7
|
TouchableOpacity,
|
|
8
|
8
|
Platform,
|
|
9
|
9
|
Linking,
|
|
|
10
|
+ Dimensions,
|
|
|
11
|
+ View,
|
|
10
|
12
|
} from 'react-native';
|
|
11
|
13
|
|
|
12
|
14
|
import AutoHeightWebView from 'react-native-autoheight-webview';
|
|
|
@@ -104,6 +106,15 @@ const Explorer = () => {
|
|
104
|
106
|
const [heightSize, setHeightSize] = useState({height: 0, width: 0});
|
|
105
|
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
|
118
|
return (
|
|
108
|
119
|
<ScrollView
|
|
109
|
120
|
style={{
|
|
|
@@ -118,7 +129,14 @@ const Explorer = () => {
|
|
118
|
129
|
scalesPageToFit
|
|
119
|
130
|
scrollEnabled={false}
|
|
120
|
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
|
140
|
onError={onError}
|
|
123
|
141
|
onLoad={onHeightLoad}
|
|
124
|
142
|
onLoadStart={onHeightLoadStart}
|
Onno Schwanen
5 年前