Repository: callstack/react-native-paper (ts)

Issue:
Why does dialogs are underneath cards ?
I don't know why this dialog is underneath the cards.
Is it related to the elevation property?

![20180802_173528](https://user-images.githubusercontent.com/6487206/43614110-74c807d0-9688-11e8-825f-5649bd3f8ccf.png)

```
<View style={{flex: 1}}>
  {decks.map((deck, index) => (
    <Deck
      key={`${deck['title']} - ${index}`}
      title={deck['title']}
      flashcardsCount={deck['questions'].length}
    />
  ))}
  <FABContainer>
    <FAB primary onPress={() => this.handleFABPress()}/>
  </FABContainer>
  <DeckFormDialog visible={this.state.formVisible} />
</View>
```

Pull request:
Fix bug with non-portal components that appear above portal components.
Fixes #480 

Patch:
diff --git a/src/components/Portal/PortalHost.js b/src/components/Portal/PortalHost.js
index 424f523be..a2fa28dbf 100644
--- a/src/components/Portal/PortalHost.js
+++ b/src/components/Portal/PortalHost.js
@@ -1,6 +1,7 @@
 /* @flow */
 
 import * as React from 'react';
+import { View, StyleSheet } from 'react-native';
 import PortalManager from './PortalManager';
 import createReactContext, { type Context } from 'create-react-context';
 import type { PortalProps } from './Portal';
@@ -106,9 +107,18 @@ export default class PortalHost extends React.Component<Props> {
           unmount: this._unmount,
         }}
       >
-        {this.props.children}
+        {/* Need collapsable=false here to clip the elevations, otherwise they appear above Portal components */}
+        <View style={styles.container} collapsable={false}>
+          {this.props.children}
+        </View>
         <PortalManager ref={this._setManager} />
       </PortalContext.Provider>
     );
   }
 }
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});


Test patch:
diff --git a/src/components/__tests__/__snapshots__/Portal.test.js.snap b/src/components/__tests__/__snapshots__/Portal.test.js.snap
index 90ffcd0a6..afb9d276f 100644
--- a/src/components/__tests__/__snapshots__/Portal.test.js.snap
+++ b/src/components/__tests__/__snapshots__/Portal.test.js.snap
@@ -2,13 +2,22 @@
 
 exports[`renders portal with siblings 1`] = `
 Array [
-  <Text
-    accessible={true}
-    allowFontScaling={true}
-    ellipsizeMode="tail"
+  <View
+    collapsable={false}
+    style={
+      Object {
+        "flex": 1,
+      }
+    }
   >
-    Outside content
-  </Text>,
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+    >
+      Outside content
+    </Text>
+  </View>,
   <View
     pointerEvents="box-none"
     style={
diff --git a/src/components/__tests__/__snapshots__/Snackbar.test.js.snap b/src/components/__tests__/__snapshots__/Snackbar.test.js.snap
index 7a0b0c391..f27aa39ff 100644
--- a/src/components/__tests__/__snapshots__/Snackbar.test.js.snap
+++ b/src/components/__tests__/__snapshots__/Snackbar.test.js.snap
@@ -1,185 +1,157 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders not visible snackbar with content 1`] = `
-<View
-  pointerEvents="box-none"
-  style={
-    Object {
-      "bottom": 0,
-      "left": 0,
-      "position": "absolute",
-      "right": 0,
-      "top": 0,
+Array [
+  <View
+    collapsable={false}
+    style={
+      Object {
+        "flex": 1,
+      }
     }
-  }
->
+  />,
   <View
-    onLayout={[Function]}
+    pointerEvents="box-none"
     style={
       Object {
-        "backgroundColor": "#323232",
         "bottom": 0,
-        "elevation": 6,
-        "opacity": 0,
+        "left": 0,
         "position": "absolute",
-        "transform": Array [
-          Object {
-            "translateY": 0,
-          },
-        ],
-        "width": "100%",
+        "right": 0,
+        "top": 0,
       }
     }
   >
     <View
+      onLayout={[Function]}
       style={
         Object {
-          "alignItems": "center",
-          "flexDirection": "row",
-          "justifyContent": "space-between",
+          "backgroundColor": "#323232",
+          "bottom": 0,
+          "elevation": 6,
           "opacity": 0,
+          "position": "absolute",
+          "transform": Array [
+            Object {
+              "translateY": 0,
+            },
+          ],
+          "width": "100%",
         }
       }
     >
-      <Text
-        accessible={true}
-        allowFontScaling={true}
-        ellipsizeMode="tail"
+      <View
         style={
-          Array [
-            Object {
-              "color": "#000000",
-              "fontFamily": "Helvetica Neue",
-            },
+          Object {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "justifyContent": "space-between",
+            "opacity": 0,
+          }
+        }
+      >
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          style={
             Array [
               Object {
-                "color": "#ffffff",
-                "flex": 1,
-                "flexWrap": "wrap",
-                "marginLeft": 24,
-                "marginVertical": 14,
+                "color": "#000000",
+                "fontFamily": "Helvetica Neue",
               },
-              Object {
-                "marginRight": 24,
+              Array [
+                Object {
+                  "color": "#ffffff",
+                  "flex": 1,
+                  "flexWrap": "wrap",
+                  "marginLeft": 24,
+                  "marginVertical": 14,
+                },
+                Object {
+                  "marginRight": 24,
+                },
+              ],
+            ]
+          }
+          theme={
+            Object {
+              "colors": Object {
+                "accent": "#ff4081",
+                "background": "#fafafa",
+                "disabled": "rgba(0, 0, 0, 0.26)",
+                "error": "#ff1744",
+                "paper": "#ffffff",
+                "placeholder": "rgba(0, 0, 0, 0.38)",
+                "primary": "#3f51b5",
+                "text": "#000000",
               },
-            ],
-          ]
-        }
-        theme={
-          Object {
-            "colors": Object {
-              "accent": "#ff4081",
-              "background": "#fafafa",
-              "disabled": "rgba(0, 0, 0, 0.26)",
-              "error": "#ff1744",
-              "paper": "#ffffff",
-              "placeholder": "rgba(0, 0, 0, 0.38)",
-              "primary": "#3f51b5",
-              "text": "#000000",
-            },
-            "dark": false,
-            "fonts": Object {
-              "light": "HelveticaNeue-Light",
-              "medium": "HelveticaNeue-Medium",
-              "regular": "Helvetica Neue",
-              "thin": "HelveticaNeue-Thin",
-            },
-            "roundness": 2,
+              "dark": false,
+              "fonts": Object {
+                "light": "HelveticaNeue-Light",
+                "medium": "HelveticaNeue-Medium",
+                "regular": "Helvetica Neue",
+                "thin": "HelveticaNeue-Thin",
+              },
+              "roundness": 2,
+            }
           }
-        }
-      >
-        Snackbar content
-      </Text>
+        >
+          Snackbar content
+        </Text>
+      </View>
     </View>
-  </View>
-</View>
+  </View>,
+]
 `;
 
 exports[`renders snackbar with Text as a child 1`] = `
-<View
-  pointerEvents="box-none"
-  style={
-    Object {
-      "bottom": 0,
-      "left": 0,
-      "position": "absolute",
-      "right": 0,
-      "top": 0,
+Array [
+  <View
+    collapsable={false}
+    style={
+      Object {
+        "flex": 1,
+      }
     }
-  }
->
+  />,
   <View
-    onLayout={[Function]}
+    pointerEvents="box-none"
     style={
       Object {
-        "backgroundColor": "#323232",
         "bottom": 0,
-        "elevation": 6,
-        "opacity": 0,
+        "left": 0,
         "position": "absolute",
-        "transform": Array [
-          Object {
-            "translateY": 0,
-          },
-        ],
-        "width": "100%",
+        "right": 0,
+        "top": 0,
       }
     }
   >
     <View
+      onLayout={[Function]}
       style={
         Object {
-          "alignItems": "center",
-          "flexDirection": "row",
-          "justifyContent": "space-between",
+          "backgroundColor": "#323232",
+          "bottom": 0,
+          "elevation": 6,
           "opacity": 0,
+          "position": "absolute",
+          "transform": Array [
+            Object {
+              "translateY": 0,
+            },
+          ],
+          "width": "100%",
         }
       }
     >
-      <Text
-        accessible={true}
-        allowFontScaling={true}
-        ellipsizeMode="tail"
+      <View
         style={
-          Array [
-            Object {
-              "color": "#000000",
-              "fontFamily": "Helvetica Neue",
-            },
-            Array [
-              Object {
-                "color": "#ffffff",
-                "flex": 1,
-                "flexWrap": "wrap",
-                "marginLeft": 24,
-                "marginVertical": 14,
-              },
-              Object {
-                "marginRight": 24,
-              },
-            ],
-          ]
-        }
-        theme={
           Object {
-            "colors": Object {
-              "accent": "#ff4081",
-              "background": "#fafafa",
-              "disabled": "rgba(0, 0, 0, 0.26)",
-              "error": "#ff1744",
-              "paper": "#ffffff",
-              "placeholder": "rgba(0, 0, 0, 0.38)",
-              "primary": "#3f51b5",
-              "text": "#000000",
-            },
-            "dark": false,
-            "fonts": Object {
-              "light": "HelveticaNeue-Light",
-              "medium": "HelveticaNeue-Medium",
-              "regular": "Helvetica Neue",
-              "thin": "HelveticaNeue-Thin",
-            },
-            "roundness": 2,
+            "alignItems": "center",
+            "flexDirection": "row",
+            "justifyContent": "space-between",
+            "opacity": 0,
           }
         }
       >
@@ -187,249 +159,317 @@ exports[`renders snackbar with Text as a child 1`] = `
           accessible={true}
           allowFontScaling={true}
           ellipsizeMode="tail"
+          style={
+            Array [
+              Object {
+                "color": "#000000",
+                "fontFamily": "Helvetica Neue",
+              },
+              Array [
+                Object {
+                  "color": "#ffffff",
+                  "flex": 1,
+                  "flexWrap": "wrap",
+                  "marginLeft": 24,
+                  "marginVertical": 14,
+                },
+                Object {
+                  "marginRight": 24,
+                },
+              ],
+            ]
+          }
+          theme={
+            Object {
+              "colors": Object {
+                "accent": "#ff4081",
+                "background": "#fafafa",
+                "disabled": "rgba(0, 0, 0, 0.26)",
+                "error": "#ff1744",
+                "paper": "#ffffff",
+                "placeholder": "rgba(0, 0, 0, 0.38)",
+                "primary": "#3f51b5",
+                "text": "#000000",
+              },
+              "dark": false,
+              "fonts": Object {
+                "light": "HelveticaNeue-Light",
+                "medium": "HelveticaNeue-Medium",
+                "regular": "Helvetica Neue",
+                "thin": "HelveticaNeue-Thin",
+              },
+              "roundness": 2,
+            }
+          }
         >
-          Snackbar content
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+          >
+            Snackbar content
+          </Text>
         </Text>
-      </Text>
+      </View>
     </View>
-  </View>
-</View>
+  </View>,
+]
 `;
 
 exports[`renders snackbar with action button 1`] = `
-<View
-  pointerEvents="box-none"
-  style={
-    Object {
-      "bottom": 0,
-      "left": 0,
-      "position": "absolute",
-      "right": 0,
-      "top": 0,
+Array [
+  <View
+    collapsable={false}
+    style={
+      Object {
+        "flex": 1,
+      }
     }
-  }
->
+  />,
   <View
-    onLayout={[Function]}
+    pointerEvents="box-none"
     style={
       Object {
-        "backgroundColor": "#323232",
         "bottom": 0,
-        "elevation": 6,
-        "opacity": 0,
+        "left": 0,
         "position": "absolute",
-        "transform": Array [
-          Object {
-            "translateY": 0,
-          },
-        ],
-        "width": "100%",
+        "right": 0,
+        "top": 0,
       }
     }
   >
     <View
+      onLayout={[Function]}
       style={
         Object {
-          "alignItems": "center",
-          "flexDirection": "row",
-          "justifyContent": "space-between",
+          "backgroundColor": "#323232",
+          "bottom": 0,
+          "elevation": 6,
           "opacity": 0,
+          "position": "absolute",
+          "transform": Array [
+            Object {
+              "translateY": 0,
+            },
+          ],
+          "width": "100%",
         }
       }
     >
-      <Text
-        accessible={true}
-        allowFontScaling={true}
-        ellipsizeMode="tail"
+      <View
         style={
-          Array [
-            Object {
-              "color": "#000000",
-              "fontFamily": "Helvetica Neue",
-            },
-            Array [
-              Object {
-                "color": "#ffffff",
-                "flex": 1,
-                "flexWrap": "wrap",
-                "marginLeft": 24,
-                "marginVertical": 14,
-              },
-              Object {
-                "marginRight": 0,
-              },
-            ],
-          ]
-        }
-        theme={
           Object {
-            "colors": Object {
-              "accent": "#ff4081",
-              "background": "#fafafa",
-              "disabled": "rgba(0, 0, 0, 0.26)",
-              "error": "#ff1744",
-              "paper": "#ffffff",
-              "placeholder": "rgba(0, 0, 0, 0.38)",
-              "primary": "#3f51b5",
-              "text": "#000000",
-            },
-            "dark": false,
-            "fonts": Object {
-              "light": "HelveticaNeue-Light",
-              "medium": "HelveticaNeue-Medium",
-              "regular": "Helvetica Neue",
-              "thin": "HelveticaNeue-Thin",
-            },
-            "roundness": 2,
+            "alignItems": "center",
+            "flexDirection": "row",
+            "justifyContent": "space-between",
+            "opacity": 0,
           }
         }
       >
-        Snackbar content
-      </Text>
-      <Text
-        accessible={true}
-        allowFontScaling={true}
-        ellipsizeMode="tail"
-        onPress={[Function]}
-        style={
-          Array [
-            Object {
-              "color": "#000000",
-              "fontFamily": "Helvetica Neue",
-            },
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          style={
             Array [
               Object {
-                "paddingHorizontal": 24,
-                "paddingVertical": 14,
+                "color": "#000000",
+                "fontFamily": "Helvetica Neue",
+              },
+              Array [
+                Object {
+                  "color": "#ffffff",
+                  "flex": 1,
+                  "flexWrap": "wrap",
+                  "marginLeft": 24,
+                  "marginVertical": 14,
+                },
+                Object {
+                  "marginRight": 0,
+                },
+              ],
+            ]
+          }
+          theme={
+            Object {
+              "colors": Object {
+                "accent": "#ff4081",
+                "background": "#fafafa",
+                "disabled": "rgba(0, 0, 0, 0.26)",
+                "error": "#ff1744",
+                "paper": "#ffffff",
+                "placeholder": "rgba(0, 0, 0, 0.38)",
+                "primary": "#3f51b5",
+                "text": "#000000",
               },
+              "dark": false,
+              "fonts": Object {
+                "light": "HelveticaNeue-Light",
+                "medium": "HelveticaNeue-Medium",
+                "regular": "Helvetica Neue",
+                "thin": "HelveticaNeue-Thin",
+              },
+              "roundness": 2,
+            }
+          }
+        >
+          Snackbar content
+        </Text>
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          onPress={[Function]}
+          style={
+            Array [
               Object {
-                "color": "#ff4081",
-                "fontFamily": "HelveticaNeue-Medium",
+                "color": "#000000",
+                "fontFamily": "Helvetica Neue",
               },
-            ],
-          ]
-        }
-        theme={
-          Object {
-            "colors": Object {
-              "accent": "#ff4081",
-              "background": "#fafafa",
-              "disabled": "rgba(0, 0, 0, 0.26)",
-              "error": "#ff1744",
-              "paper": "#ffffff",
-              "placeholder": "rgba(0, 0, 0, 0.38)",
-              "primary": "#3f51b5",
-              "text": "#000000",
-            },
-            "dark": false,
-            "fonts": Object {
-              "light": "HelveticaNeue-Light",
-              "medium": "HelveticaNeue-Medium",
-              "regular": "Helvetica Neue",
-              "thin": "HelveticaNeue-Thin",
-            },
-            "roundness": 2,
+              Array [
+                Object {
+                  "paddingHorizontal": 24,
+                  "paddingVertical": 14,
+                },
+                Object {
+                  "color": "#ff4081",
+                  "fontFamily": "HelveticaNeue-Medium",
+                },
+              ],
+            ]
           }
-        }
-      >
-        UNDO
-      </Text>
+          theme={
+            Object {
+              "colors": Object {
+                "accent": "#ff4081",
+                "background": "#fafafa",
+                "disabled": "rgba(0, 0, 0, 0.26)",
+                "error": "#ff1744",
+                "paper": "#ffffff",
+                "placeholder": "rgba(0, 0, 0, 0.38)",
+                "primary": "#3f51b5",
+                "text": "#000000",
+              },
+              "dark": false,
+              "fonts": Object {
+                "light": "HelveticaNeue-Light",
+                "medium": "HelveticaNeue-Medium",
+                "regular": "Helvetica Neue",
+                "thin": "HelveticaNeue-Thin",
+              },
+              "roundness": 2,
+            }
+          }
+        >
+          UNDO
+        </Text>
+      </View>
     </View>
-  </View>
-</View>
+  </View>,
+]
 `;
 
 exports[`renders snackbar with content 1`] = `
-<View
-  pointerEvents="box-none"
-  style={
-    Object {
-      "bottom": 0,
-      "left": 0,
-      "position": "absolute",
-      "right": 0,
-      "top": 0,
+Array [
+  <View
+    collapsable={false}
+    style={
+      Object {
+        "flex": 1,
+      }
     }
-  }
->
+  />,
   <View
-    onLayout={[Function]}
+    pointerEvents="box-none"
     style={
       Object {
-        "backgroundColor": "#323232",
         "bottom": 0,
-        "elevation": 6,
-        "opacity": 0,
+        "left": 0,
         "position": "absolute",
-        "transform": Array [
-          Object {
-            "translateY": 0,
-          },
-        ],
-        "width": "100%",
+        "right": 0,
+        "top": 0,
       }
     }
   >
     <View
+      onLayout={[Function]}
       style={
         Object {
-          "alignItems": "center",
-          "flexDirection": "row",
-          "justifyContent": "space-between",
+          "backgroundColor": "#323232",
+          "bottom": 0,
+          "elevation": 6,
           "opacity": 0,
+          "position": "absolute",
+          "transform": Array [
+            Object {
+              "translateY": 0,
+            },
+          ],
+          "width": "100%",
         }
       }
     >
-      <Text
-        accessible={true}
-        allowFontScaling={true}
-        ellipsizeMode="tail"
+      <View
         style={
-          Array [
-            Object {
-              "color": "#000000",
-              "fontFamily": "Helvetica Neue",
-            },
+          Object {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "justifyContent": "space-between",
+            "opacity": 0,
+          }
+        }
+      >
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          style={
             Array [
               Object {
-                "color": "#ffffff",
-                "flex": 1,
-                "flexWrap": "wrap",
-                "marginLeft": 24,
-                "marginVertical": 14,
+                "color": "#000000",
+                "fontFamily": "Helvetica Neue",
               },
-              Object {
-                "marginRight": 24,
+              Array [
+                Object {
+                  "color": "#ffffff",
+                  "flex": 1,
+                  "flexWrap": "wrap",
+                  "marginLeft": 24,
+                  "marginVertical": 14,
+                },
+                Object {
+                  "marginRight": 24,
+                },
+              ],
+            ]
+          }
+          theme={
+            Object {
+              "colors": Object {
+                "accent": "#ff4081",
+                "background": "#fafafa",
+                "disabled": "rgba(0, 0, 0, 0.26)",
+                "error": "#ff1744",
+                "paper": "#ffffff",
+                "placeholder": "rgba(0, 0, 0, 0.38)",
+                "primary": "#3f51b5",
+                "text": "#000000",
               },
-            ],
-          ]
-        }
-        theme={
-          Object {
-            "colors": Object {
-              "accent": "#ff4081",
-              "background": "#fafafa",
-              "disabled": "rgba(0, 0, 0, 0.26)",
-              "error": "#ff1744",
-              "paper": "#ffffff",
-              "placeholder": "rgba(0, 0, 0, 0.38)",
-              "primary": "#3f51b5",
-              "text": "#000000",
-            },
-            "dark": false,
-            "fonts": Object {
-              "light": "HelveticaNeue-Light",
-              "medium": "HelveticaNeue-Medium",
-              "regular": "Helvetica Neue",
-              "thin": "HelveticaNeue-Thin",
-            },
-            "roundness": 2,
+              "dark": false,
+              "fonts": Object {
+                "light": "HelveticaNeue-Light",
+                "medium": "HelveticaNeue-Medium",
+                "regular": "Helvetica Neue",
+                "thin": "HelveticaNeue-Thin",
+              },
+              "roundness": 2,
+            }
           }
-        }
-      >
-        Snackbar content
-      </Text>
+        >
+          Snackbar content
+        </Text>
+      </View>
     </View>
-  </View>
-</View>
+  </View>,
+]
 `;