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

@@ -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',
   },
 });
 

index.js

@@ -1,2 +1,3 @@
 // @flow
 export { default as ThemeProvider } from './src/styles/ThemeProvider';
+export { TouchableRipple } from './src/TouchableRipple';

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>
+    );
+  }
+}

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>
+    );
+  }
+}

src/TouchableRipple/index.js

@@ -0,0 +1 @@
+export { default as TouchableRipple } from './TouchableRipple';