From bd2f2a1b66ea311aec28c1cee6be5439a5c344d4 Mon Sep 17 00:00:00 2001
From: Ahmed Elhanafy <ahmed.elhanafy95@gmail.com>
Date: Sun, 23 Oct 2016 23:09:34 +0200
Subject: [PATCH] Touchable component (#34)

* Initial implementation of Touchable component

* Export touchable component

* Fix export statement

* Edit Touchable Component

* Fix export statement

* Update example app with usage of touchable component

* Make eslint happy

* Change style propType

* Change Touchable name => TouchableRipple, add check on older versions of Android and change borderLess prop to borderless

* Remove usage of TouchableRipple from example app
---
 example/main.js                               |  5 +-
 index.js                                      |  1 +
 .../TouchableRipple.android.js                | 46 +++++++++++++++++++
 src/TouchableRipple/TouchableRipple.ios.js    | 41 +++++++++++++++++
 src/TouchableRipple/index.js                  |  1 +
 5 files changed, 91 insertions(+), 3 deletions(-)
 create mode 100644 src/TouchableRipple/TouchableRipple.android.js
 create mode 100644 src/TouchableRipple/TouchableRipple.ios.js
 create mode 100644 src/TouchableRipple/index.js

diff --git a/example/main.js b/example/main.js
index 122bdcc..d8c3ad1 100644
--- a/example/main.js
+++ b/example/main.js
@@ -10,7 +10,7 @@ class App extends React.Component {
   render() {
     return (
       <View style={styles.container}>
-        <Text>Open up main.js to start working on your app!</Text>
+        <Text>React Native Paper will rock :D</Text>
       </View>
     );
   }
@@ -19,9 +19,8 @@ class App extends React.Component {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#fff',
+    marginTop: 24,
     alignItems: 'center',
-    justifyContent: 'center',
   },
 });
 
diff --git a/index.js b/index.js
index 93f14a0..d5926be 100644
--- a/index.js
+++ b/index.js
@@ -1,2 +1,3 @@
 // @flow
 export { default as ThemeProvider } from './src/styles/ThemeProvider';
+export { TouchableRipple } from './src/TouchableRipple';
diff --git a/src/TouchableRipple/TouchableRipple.android.js b/src/TouchableRipple/TouchableRipple.android.js
new file mode 100644
index 0000000..078ab9f
--- /dev/null
+++ b/src/TouchableRipple/TouchableRipple.android.js
@@ -0,0 +1,46 @@
+// @flow
+import React, {
+  Component,
+  PropTypes,
+  Platform,
+} from 'react';
+import {
+  TouchableNativeFeedback,
+  View,
+} from 'react-native';
+
+export default class TouchableRipple extends Component {
+
+  static propTypes = {
+    children: PropTypes.element.isRequired,
+    borderless: PropTypes.bool,
+    onPress: PropTypes.func,
+    rippleColor: PropTypes.string,
+    style: View.propTypes.style,
+  };
+  static defaultProps = {
+    borderless: false,
+  }
+
+  render() {
+    const {
+      children,
+      onPress,
+      rippleColor,
+      borderless,
+      style,
+     } = this.props;
+    return (
+        <TouchableNativeFeedback
+          onPress={onPress}
+          background={Platform.Version >= 21 ?
+            TouchableNativeFeedback.Ripple(rippleColor, borderless) :
+            TouchableNativeFeedback.SelectableBackground()}
+        >
+          <View style={style}>
+            {children}
+          </View>
+        </TouchableNativeFeedback>
+    );
+  }
+}
diff --git a/src/TouchableRipple/TouchableRipple.ios.js b/src/TouchableRipple/TouchableRipple.ios.js
new file mode 100644
index 0000000..9db41cf
--- /dev/null
+++ b/src/TouchableRipple/TouchableRipple.ios.js
@@ -0,0 +1,41 @@
+// @flow
+import React, {
+  Component,
+  PropTypes,
+} from 'react';
+import {
+  TouchableHighlight,
+  View,
+} from 'react-native';
+
+export default class TouchableRipple extends Component {
+
+  static propTypes = {
+    children: PropTypes.element.isRequired,
+    borderless: PropTypes.bool,
+    onPress: PropTypes.func,
+    rippleColor: PropTypes.string,
+    style: View.propTypes.style,
+  };
+  static defaultProps = {
+    borderless: false,
+  }
+
+  render() {
+    const {
+      children,
+      onPress,
+      rippleColor,
+      style,
+     } = this.props;
+    return (
+        <TouchableHighlight
+          style={style}
+          underlayColor={rippleColor}
+          onPress={onPress}
+        >
+          {children}
+        </TouchableHighlight>
+    );
+  }
+}
diff --git a/src/TouchableRipple/index.js b/src/TouchableRipple/index.js
new file mode 100644
index 0000000..2f454ef
--- /dev/null
+++ b/src/TouchableRipple/index.js
@@ -0,0 +1 @@
+export { default as TouchableRipple } from './TouchableRipple';