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

Issue:
ListItem ripple draws off touch position
### Current behaviour

When tapping on a ListItem with onPress provided, the ripple is drawn off the touch position. This is more easily reproducible if tapping closer to the centre of the ListItem.

### Expected behaviour

The ripple should be drawn exactly under the touch position, like the ListAccordion component ripple.

### Code sample



### Screenshots (if applicable)



### What have you tried


### Your Environment

| software              | version
| --------------------- | -------
| ios or android        | Android
| react-native          | 0.55.4
| react-native-paper    | 1.9.1
| node                  | 9.8.0
| npm or yarn           | yarn 1.5.1


Pull request:
Show ripple in same position where user touched (ListItem).
Closes #393



Patch:
diff --git a/src/components/List/ListItem.js b/src/components/List/ListItem.js
index dfa434144..d717b5e68 100644
--- a/src/components/List/ListItem.js
+++ b/src/components/List/ListItem.js
@@ -87,13 +87,14 @@ class ListItem extends React.Component<Props> {
                 styles.avatar,
                 description && styles.multiline,
               ]}
+              pointerEvents="box-none"
             >
               {avatar || (
                 <Icon name={icon} size={24} color={descriptionColor} />
               )}
             </View>
           ) : null}
-          <View style={[styles.item, styles.content]}>
+          <View style={[styles.item, styles.content]} pointerEvents="none">
             <Text
               numberOfLines={1}
               style={[styles.title, { color: titleColor }]}
@@ -115,7 +116,10 @@ class ListItem extends React.Component<Props> {
             )}
           </View>
           {avatar && icon ? (
-            <View style={[styles.item, description && styles.multiline]}>
+            <View
+              style={[styles.item, description && styles.multiline]}
+              pointerEvents="box-none"
+            >
               <Icon name={icon} size={24} color={descriptionColor} />
             </View>
           ) : null}


Test patch:
diff --git a/src/components/__tests__/__snapshots__/ListItem.test.js.snap b/src/components/__tests__/__snapshots__/ListItem.test.js.snap
index 8f73cdc05..6dd7d6336 100644
--- a/src/components/__tests__/__snapshots__/ListItem.test.js.snap
+++ b/src/components/__tests__/__snapshots__/ListItem.test.js.snap
@@ -27,6 +27,7 @@ exports[`renders list item with avatar 1`] = `
     }
   >
     <View
+      pointerEvents="box-none"
       style={
         Array [
           Object {
@@ -48,6 +49,7 @@ exports[`renders list item with avatar 1`] = `
       </Text>
     </View>
     <View
+      pointerEvents="none"
       style={
         Array [
           Object {
@@ -138,6 +140,7 @@ exports[`renders list item with avatar and icon 1`] = `
     }
   >
     <View
+      pointerEvents="box-none"
       style={
         Array [
           Object {
@@ -163,6 +166,7 @@ exports[`renders list item with avatar and icon 1`] = `
       </Text>
     </View>
     <View
+      pointerEvents="none"
       style={
         Array [
           Object {
@@ -269,6 +273,7 @@ exports[`renders list item with avatar and icon 1`] = `
       </Text>
     </View>
     <View
+      pointerEvents="box-none"
       style={
         Array [
           Object {
@@ -338,6 +343,7 @@ exports[`renders list item with icon 1`] = `
     }
   >
     <View
+      pointerEvents="box-none"
       style={
         Array [
           Object {
@@ -376,6 +382,7 @@ exports[`renders list item with icon 1`] = `
       </Text>
     </View>
     <View
+      pointerEvents="none"
       style={
         Array [
           Object {
@@ -466,6 +473,7 @@ exports[`renders list item with title and description 1`] = `
     }
   >
     <View
+      pointerEvents="none"
       style={
         Array [
           Object {
diff --git a/src/components/__tests__/__snapshots__/ListSection.test.js.snap b/src/components/__tests__/__snapshots__/ListSection.test.js.snap
index a0bbc7ac0..ce56ab209 100644
--- a/src/components/__tests__/__snapshots__/ListSection.test.js.snap
+++ b/src/components/__tests__/__snapshots__/ListSection.test.js.snap
@@ -85,6 +85,7 @@ exports[`renders list section with title 1`] = `
       }
     >
       <View
+        pointerEvents="box-none"
         style={
           Array [
             Object {
@@ -123,6 +124,7 @@ exports[`renders list section with title 1`] = `
         </Text>
       </View>
       <View
+        pointerEvents="none"
         style={
           Array [
             Object {
@@ -210,6 +212,7 @@ exports[`renders list section with title 1`] = `
       }
     >
       <View
+        pointerEvents="box-none"
         style={
           Array [
             Object {
@@ -248,6 +251,7 @@ exports[`renders list section with title 1`] = `
         </Text>
       </View>
       <View
+        pointerEvents="none"
         style={
           Array [
             Object {
@@ -349,6 +353,7 @@ exports[`renders list section without title 1`] = `
       }
     >
       <View
+        pointerEvents="box-none"
         style={
           Array [
             Object {
@@ -387,6 +392,7 @@ exports[`renders list section without title 1`] = `
         </Text>
       </View>
       <View
+        pointerEvents="none"
         style={
           Array [
             Object {
@@ -474,6 +480,7 @@ exports[`renders list section without title 1`] = `
       }
     >
       <View
+        pointerEvents="box-none"
         style={
           Array [
             Object {
@@ -512,6 +519,7 @@ exports[`renders list section without title 1`] = `
         </Text>
       </View>
       <View
+        pointerEvents="none"
         style={
           Array [
             Object {