fix(scrollView): fix scrollbar overflow issue

react95-io · Dec 6, 2020 · fa8b762 · fa8b762
1 parent e017c1b
commit fa8b762
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 23 deletions.
diff --git a/example/src/examples/CutoutExample.tsx b/example/src/examples/CutoutExample.tsx
@@ -1,33 +1,32 @@
 import React from 'react';
+import { View } from 'react-native';
 import { Cutout, Text, Window } from 'react95-native';
 
 import Container from '../util/Container';
 
 const CutoutExample = () => {
   return (
     <Container>
-      <Container.Section title='Usage:'>
-        <Window style={{ padding: 12 }}>
-          <Cutout style={{ height: 120 }}>
-            <Text>
-              React95 React95 React95 React95 React95 React95 React95 React95
-              React95 React95
-            </Text>
-            <Text>
-              React95 React95 React95 React95 React95 React95 React95 React95
-              React95 React95
-            </Text>
-            <Text>
-              React95 React95 React95 React95 React95 React95 React95 React95
-              React95 React95
-            </Text>
-            <Text>
-              React95 React95 React95 React95 React95 React95 React95 React95
-              React95 React95
-            </Text>
-          </Cutout>
+      <View>
+        <Window title='Cutout example' style={{ width: '100%' }}>
+          <View style={{ height: 260, padding: 16 }}>
+            <Cutout>
+              <Text>
+                Lorem Ipsum is simply dummy text of the printing and typesetting
+                industry. Lorem Ipsum has been the industry standard dummy text
+                ever since the 1500s, when an unknown printer took a galley of
+                type and scrambled it to make a type specimen book. It has
+                survived not only five centuries, but also the leap into
+                electronic typesetting, remaining essentially unchanged. It was
+                popularised in the 1960s with the release of Letraset sheets
+                containing Lorem Ipsum passages, and more recently with desktop
+                publishing software like Aldus PageMaker including versions of
+                Lorem Ipsum.
+              </Text>
+            </Cutout>
+          </View>
         </Window>
-      </Container.Section>
+      </View>
     </Container>
   );
 };

diff --git a/src/Cutout/Cutout.tsx b/src/Cutout/Cutout.tsx
@@ -25,9 +25,8 @@ const Cutout = ({ children, style = {} }: Props) => {
 
 const styles = StyleSheet.create({
   wrapper: {
-    width: '100%',
-    height: 100,
     // to compensate for borders
+    position: 'relative',
     padding: 4,
   },
   content: {

diff --git a/src/ScrollView/ScrollView.tsx b/src/ScrollView/ScrollView.tsx
@@ -153,6 +153,7 @@ const styles = StyleSheet.create({
   },
   content: {
     flexGrow: 1,
+    flex: 1,
   },
   scrollbarTrack: {
     height: '100%',