From 2bbc33c3dda006fc0936e676eafef59aee923cd0 Mon Sep 17 00:00:00 2001
From: Julian Hundeloh <jaulz@users.noreply.github.com>
Date: Tue, 12 Mar 2019 10:55:59 +0100
Subject: [PATCH] fix: add flexGrow and flexShrink to Dialog.ScrollArea (#835)

* fix: limit Dialog.ScrollArea height

* fix: update example

* fix: reduce height
---
 .../Examples/Dialogs/DialogWithLongText.js    | 28 +++++++++++++++++--
 src/components/Dialog/DialogScrollArea.js     |  2 ++
 2 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/example/src/Examples/Dialogs/DialogWithLongText.js b/example/src/Examples/Dialogs/DialogWithLongText.js
index fe76eb6..c2d953b 100644
--- a/example/src/Examples/Dialogs/DialogWithLongText.js
+++ b/example/src/Examples/Dialogs/DialogWithLongText.js
@@ -1,7 +1,7 @@
 /* @flow */
 
 import * as React from 'react';
-import { ScrollView } from 'react-native';
+import { Dimensions, ScrollView } from 'react-native';
 import { Paragraph, Button, Portal, Dialog } from 'react-native-paper';
 
 const DialogWithLongText = ({
@@ -12,9 +12,13 @@ const DialogWithLongText = ({
   close: Function,
 }) => (
   <Portal>
-    <Dialog onDismiss={close} visible={visible}>
+    <Dialog
+      onDismiss={close}
+      visible={visible}
+      style={{ maxHeight: 0.6 * Dimensions.get('window').height }}
+    >
       <Dialog.Title>Alert</Dialog.Title>
-      <Dialog.ScrollArea style={{ maxHeight: 220, paddingHorizontal: 0 }}>
+      <Dialog.ScrollArea style={{ paddingHorizontal: 0 }}>
         <ScrollView contentContainerStyle={{ paddingHorizontal: 24 }}>
           <Paragraph>
             Material is the metaphor
@@ -36,6 +40,24 @@ const DialogWithLongText = ({
             conveying how objects move, interact, and exist in space and in
             relation to each other. Realistic lighting shows seams, divides
             space, and indicates moving parts.
+            {'\n'}
+            {'\n'}A material metaphor is the unifying theory of a rationalized
+            space and a system of motion. The material is grounded in tactile
+            reality, inspired by the study of paper and ink, yet technologically
+            advanced and open to imagination and magic.
+            {'\n'}
+            {'\n'}
+            Surfaces and edges of the material provide visual cues that are
+            grounded in reality. The use of familiar tactile attributes helps
+            users quickly understand affordances. Yet the flexibility of the
+            material creates new affordances that supersede those in the
+            physical world, without breaking the rules of physics.
+            {'\n'}
+            {'\n'}
+            The fundamentals of light, surface, and movement are key to
+            conveying how objects move, interact, and exist in space and in
+            relation to each other. Realistic lighting shows seams, divides
+            space, and indicates moving parts.
           </Paragraph>
         </ScrollView>
       </Dialog.ScrollArea>
diff --git a/src/components/Dialog/DialogScrollArea.js b/src/components/Dialog/DialogScrollArea.js
index 533a124..e67466d 100644
--- a/src/components/Dialog/DialogScrollArea.js
+++ b/src/components/Dialog/DialogScrollArea.js
@@ -64,6 +64,8 @@ const styles = StyleSheet.create({
     borderTopWidth: StyleSheet.hairlineWidth,
     borderBottomWidth: StyleSheet.hairlineWidth,
     paddingHorizontal: 24,
+    flexGrow: 1,
+    flexShrink: 1,
   },
 });