Prevent scrolling on mobile browsers for the playground

arqex · arqex · commit 91fdd021c1f6 · 2018-11-18T20:17:18.000+01:00
diff --git a/changelog.md b/changelog.md
@@ -4,6 +4,7 @@
 * Playground: Alert areas example working ok
 * Playground: Link to docs and inspiration working ok
 * Playground: Fixed slides for test settings
+* Playground: Prevent scrolling on mobile browsers
 
 ## v0.3.0
 * First public version, almost everything working ok, playground included
diff --git a/playground/public/index.html b/playground/public/index.html
@@ -20,12 +20,18 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>React App</title>
+    <style>
+      body, html {
+        overscroll-behavior: contain;
+        overflow: hidden;
+      }
+    </style>
   </head>
   <body>
     <noscript>
       You need to enable JavaScript to run this app.
     </noscript>
-    <div id="root" style="height: 100vh"></div>
+    <div id="root" style="height: 100%"></div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
diff --git a/playground/src/App.js b/playground/src/App.js
@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import Screen from './Screen'
 import {
   Platform,
   Dimensions,
@@ -183,7 +184,9 @@ const styles = StyleSheet.create({
     flex: 1,
     alignItems: 'stretch',
     backgroundColor: 'white',
-    width: 480
+    width: '100%',
+    maxWidth: 480,
+    maxHeight: Screen.height
   },
   header: {
     height: isIphoneX ? 100 : (Platform.OS === 'ios') ? 70 : 60,
@@ -197,7 +200,7 @@ const styles = StyleSheet.create({
   body: {
     flex: 1,
     zIndex: 1000,
-    height: 580,
+    height: Screen.height,
     overflow: 'hidden'
   },
   menuContainer: {
diff --git a/playground/src/Screen.js b/playground/src/Screen.js
@@ -0,0 +1,8 @@
+import {Dimensions} from 'react-native'
+
+let dim = Dimensions.get('window')
+
+export default {
+	width: Math.min( 480, dim.width ),
+	height: dim.height
+}
diff --git a/playground/src/examples/AlertAreas.js b/playground/src/examples/AlertAreas.js
@@ -1,11 +1,7 @@
 import React, { Component } from 'react';
 import { StyleSheet, View, Dimensions, Text } from 'react-native';
 import Interactable from 'react-native-interactable';
-
-const Screen = {
-  width: 480,
-  height: Dimensions.get('window').height - 75
-};
+import Screen from '../Screen'
 
 export default class AlertAreas extends Component {
 
diff --git a/readme.md b/readme.md
@@ -8,7 +8,7 @@ Just install via npm or yarn
 ```
 npm install --save react-interactable
 ```
-Special thanks to @souporserious for lending the npm package :)
+Special thanks to [@souporserious](https://github.com/souporserious) for lending the npm package :)
 
 
 [MIT licensed](LICENSE)
