Repository: callstack/react-native-paper
Pull request #427 (2018-06-21 06:28:29)

Fix bug that blocks touch at the bottom of the screen
If you have a tabbar or anything at the bottom, and you move the snackbar up, snackbar will block all pointer events at the bottom of the screen.
`pointerEvents="box-none"` on both SafeAreaView and Animated.View will fix this issue but still allow you to add buttons within Snackbar component

<!-- Please provide enough information so that others can review your pull request. -->
<!-- Keep pull requests small and focused on a single change. -->

### Motivation

<!-- What existing problem does the pull request solve? Can you solve the issue with a different approach? -->

### Test plan

<!-- List the steps with which we can test this change. Provide screenshots if this changes anything visual. -->


callstack-bot: Hey @bosung90, thank you for your pull request 🤗. The documentation from this branch can be viewed [here](https://3491-71323749-gh.circle-artifacts.com/0/docs/index.html).
bosung90: Can someone update snapshot for me?
jaulz: @bosung90 any issues when updating the snapshots?
bosung90: @ferrannp Can you check?

Patch:
diff --git a/src/components/Snackbar.js b/src/components/Snackbar.js
index f429f1207..e2d5a7803 100644
--- a/src/components/Snackbar.js
+++ b/src/components/Snackbar.js
@@ -174,8 +174,9 @@ class Snackbar extends React.Component<Props, State> {
 
     return (
       <ThemedPortal>
-        <SafeAreaView style={styles.wrapper}>
+        <SafeAreaView pointerEvents="box-none" style={styles.wrapper}>
           <Animated.View
+            pointerEvents="box-none"
             accessibilityLiveRegion="polite"
             style={{
               opacity: this.state.opacity,
@@ -192,6 +193,7 @@ class Snackbar extends React.Component<Props, State> {
             }}
           >
             <View
+              pointerEvents="box-none"
               style={[styles.container, { borderRadius: roundness }, style]}
             >
               <Text style={[styles.content, { marginRight: action ? 0 : 16 }]}>


Test patch:
diff --git a/src/components/__tests__/__snapshots__/Snackbar.test.js.snap b/src/components/__tests__/__snapshots__/Snackbar.test.js.snap
index de971a6d4..1c90d1eb6 100644
--- a/src/components/__tests__/__snapshots__/Snackbar.test.js.snap
+++ b/src/components/__tests__/__snapshots__/Snackbar.test.js.snap
@@ -14,6 +14,7 @@ exports[`renders not visible snackbar with content 1`] = `
   }
 >
   <RCTSafeAreaView
+    pointerEvents="box-none"
     style={
       Object {
         "bottom": 0,
@@ -24,6 +25,7 @@ exports[`renders not visible snackbar with content 1`] = `
   >
     <View
       accessibilityLiveRegion="polite"
+      pointerEvents="box-none"
       style={
         Object {
           "opacity": 0,
@@ -36,6 +38,7 @@ exports[`renders not visible snackbar with content 1`] = `
       }
     >
       <View
+        pointerEvents="box-none"
         style={
           Array [
             Object {
@@ -123,6 +126,7 @@ exports[`renders snackbar with Text as a child 1`] = `
   }
 >
   <RCTSafeAreaView
+    pointerEvents="box-none"
     style={
       Object {
         "bottom": 0,
@@ -133,6 +137,7 @@ exports[`renders snackbar with Text as a child 1`] = `
   >
     <View
       accessibilityLiveRegion="polite"
+      pointerEvents="box-none"
       style={
         Object {
           "opacity": 0,
@@ -145,6 +150,7 @@ exports[`renders snackbar with Text as a child 1`] = `
       }
     >
       <View
+        pointerEvents="box-none"
         style={
           Array [
             Object {
@@ -238,6 +244,7 @@ exports[`renders snackbar with action button 1`] = `
   }
 >
   <RCTSafeAreaView
+    pointerEvents="box-none"
     style={
       Object {
         "bottom": 0,
@@ -248,6 +255,7 @@ exports[`renders snackbar with action button 1`] = `
   >
     <View
       accessibilityLiveRegion="polite"
+      pointerEvents="box-none"
       style={
         Object {
           "opacity": 0,
@@ -260,6 +268,7 @@ exports[`renders snackbar with action button 1`] = `
       }
     >
       <View
+        pointerEvents="box-none"
         style={
           Array [
             Object {
@@ -456,6 +465,7 @@ exports[`renders snackbar with content 1`] = `
   }
 >
   <RCTSafeAreaView
+    pointerEvents="box-none"
     style={
       Object {
         "bottom": 0,
@@ -466,6 +476,7 @@ exports[`renders snackbar with content 1`] = `
   >
     <View
       accessibilityLiveRegion="polite"
+      pointerEvents="box-none"
       style={
         Object {
           "opacity": 0,
@@ -478,6 +489,7 @@ exports[`renders snackbar with content 1`] = `
       }
     >
       <View
+        pointerEvents="box-none"
         style={
           Array [
             Object {