From 3e9cd0d90aa009b4c61865a64e44d77e749a111b Mon Sep 17 00:00:00 2001
From: Maksim Milyutin <mmxckk@gmail.com>
Date: Mon, 27 May 2019 21:35:00 +0300
Subject: [PATCH] Enable ripple on android by TouchableNativeFeedback

---
 src/MenuItem.js | 53 ++++++++++++++++++++++++++++++++-----------------
 1 file changed, 35 insertions(+), 18 deletions(-)

diff --git a/src/MenuItem.js b/src/MenuItem.js
index 5bf0a94..0bdbe2f 100644
--- a/src/MenuItem.js
+++ b/src/MenuItem.js
@@ -1,7 +1,19 @@
 import React from 'react';
 
 import PropTypes from 'prop-types';
-import { Platform, StyleSheet, Text, TouchableHighlight } from 'react-native';
+import {
+  Platform,
+  StyleSheet,
+  Text,
+  TouchableHighlight,
+  TouchableNativeFeedback,
+  View,
+} from 'react-native';
+
+const Touchable = Platform.select({
+  android: TouchableNativeFeedback,
+  default: TouchableHighlight,
+});
 
 function MenuItem({
   children,
@@ -10,29 +22,34 @@ function MenuItem({
   onPress,
   style,
   textStyle,
-  underlayColor,
   ...props
 }) {
+  const touchableProps = Platform.select({
+    android: { background: TouchableNativeFeedback.SelectableBackground() },
+    default: {},
+  });
+
   return (
-    <TouchableHighlight
-      {...props}
+    <Touchable
       disabled={disabled}
       onPress={onPress}
-      style={[styles.container, style]}
-      underlayColor={underlayColor}
+      {...touchableProps}
+      {...props}
     >
-      <Text
-        ellipsizeMode={Platform.OS === 'ios' ? 'clip' : 'tail'}
-        numberOfLines={1}
-        style={[
-          styles.title,
-          disabled && { color: disabledTextColor },
-          textStyle,
-        ]}
-      >
-        {children}
-      </Text>
-    </TouchableHighlight>
+      <View style={[styles.container, style]}>
+        <Text
+          ellipsizeMode={Platform.OS === 'ios' ? 'clip' : 'tail'}
+          numberOfLines={1}
+          style={[
+            styles.title,
+            disabled && { color: disabledTextColor },
+            textStyle,
+          ]}
+        >
+          {children}
+        </Text>
+      </View>
+    </Touchable>
   );
 }