Repository: callstack/react-native-paper
Pull request #1214 (2019-07-15 13:49:51)

fix: wrap modal children in SafeAreaView

### Motivation

Fixes: #1159 

### Test plan

default | horizontal left | horizontal right |
--- | --- | ---
<img width="510" alt="Screenshot 2019-07-15 at 15 43 54" src="https://user-images.githubusercontent.com/22746080/61221134-1f700700-a718-11e9-9f5a-ef8908c578c8.png"> | <img width="894" alt="Screenshot 2019-07-15 at 15 42 44" src="https://user-images.githubusercontent.com/22746080/61221137-23038e00-a718-11e9-99fb-3c7c06874333.png"> | <img width="894" alt="Screenshot 2019-07-15 at 15 43 42" src="https://user-images.githubusercontent.com/22746080/61221142-24cd5180-a718-11e9-81d0-99651e26e3d5.png">



callstack-bot: Hey @lukewalczak, thank you for your pull request 🤗. The documentation from this branch can be viewed [here](https://11832-71323749-gh.circle-artifacts.com/0/docs/index.html).
satya164: Can you use `react-native-safe-area-view`? The built-in `SafeAreaView` doesn't have ideal behaviour when a screen is transitioning. For example, it'll keep changing height when you push a new screen which slides from bottom in React Navigation.

Patch:
diff --git a/src/components/Chip.tsx b/src/components/Chip.tsx
index 0ee92cfb6..09519bfd5 100644
--- a/src/components/Chip.tsx
+++ b/src/components/Chip.tsx
@@ -279,6 +279,7 @@ class Chip extends React.Component<Props, State> {
               style={[
                 styles.text,
                 {
+                  ...theme.fonts.regular,
                   color: textColor,
                   marginRight: onClose ? 4 : 8,
                   marginLeft: avatar || icon || selected ? 4 : 8,
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index 846751966..7c6751ec5 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -6,9 +6,9 @@ import {
   StyleProp,
   StyleSheet,
   TouchableWithoutFeedback,
-  View,
   ViewStyle,
 } from 'react-native';
+import SafeAreaView from 'react-native-safe-area-view';
 import Surface from './Surface';
 import { withTheme } from '../core/theming';
 import { Theme } from '../types';
@@ -195,7 +195,7 @@ class Modal extends React.Component<Props, State> {
             ]}
           />
         </TouchableWithoutFeedback>
-        <View pointerEvents="box-none" style={styles.wrapper}>
+        <SafeAreaView style={styles.wrapper}>
           <Surface
             style={
               [
@@ -207,7 +207,7 @@ class Modal extends React.Component<Props, State> {
           >
             {children}
           </Surface>
-        </View>
+        </SafeAreaView>
       </Animated.View>
     );
   }


Test patch:
diff --git a/src/components/__tests__/__snapshots__/Chip.test.js.snap b/src/components/__tests__/__snapshots__/Chip.test.js.snap
index accc96d86..645f696e5 100644
--- a/src/components/__tests__/__snapshots__/Chip.test.js.snap
+++ b/src/components/__tests__/__snapshots__/Chip.test.js.snap
@@ -109,6 +109,8 @@ exports[`renders chip with close button 1`] = `
               },
               Object {
                 "color": "rgba(0, 0, 0, 0.87)",
+                "fontFamily": "System",
+                "fontWeight": "400",
                 "marginLeft": 4,
                 "marginRight": 4,
               },
@@ -284,6 +286,8 @@ exports[`renders chip with icon 1`] = `
               },
               Object {
                 "color": "rgba(0, 0, 0, 0.87)",
+                "fontFamily": "System",
+                "fontWeight": "400",
                 "marginLeft": 4,
                 "marginRight": 8,
               },
@@ -363,6 +367,8 @@ exports[`renders chip with onPress 1`] = `
               },
               Object {
                 "color": "rgba(0, 0, 0, 0.87)",
+                "fontFamily": "System",
+                "fontWeight": "400",
                 "marginLeft": 8,
                 "marginRight": 8,
               },
@@ -446,6 +452,8 @@ exports[`renders outlined disabled chip 1`] = `
               },
               Object {
                 "color": "rgba(0, 0, 0, 0.26)",
+                "fontFamily": "System",
+                "fontWeight": "400",
                 "marginLeft": 8,
                 "marginRight": 8,
               },
@@ -574,6 +582,8 @@ exports[`renders selected chip 1`] = `
               },
               Object {
                 "color": "rgba(0, 0, 0, 0.87)",
+                "fontFamily": "System",
+                "fontWeight": "400",
                 "marginLeft": 4,
                 "marginRight": 8,
               },
diff --git a/src/components/__tests__/__snapshots__/ListItem.test.js.snap b/src/components/__tests__/__snapshots__/ListItem.test.js.snap
index 802bad892..b50b19b71 100644
--- a/src/components/__tests__/__snapshots__/ListItem.test.js.snap
+++ b/src/components/__tests__/__snapshots__/ListItem.test.js.snap
@@ -190,6 +190,8 @@ exports[`renders list item with custom description 1`] = `
                         },
                         Object {
                           "color": "rgba(0, 0, 0, 0.87)",
+                          "fontFamily": "System",
+                          "fontWeight": "400",
                           "marginLeft": 4,
                           "marginRight": 8,
                         },