5 files changed, 13 insertions, 14 deletions
diff --git a/client/src/lib/timeline/index.js b/client/src/lib/timeline/index.js
index 09d2d1b..381f881 100644
--- a/client/src/lib/timeline/index.js
+++ b/client/src/lib/timeline/index.js
@@ -3,7 +3,6 @@ import {
   FlatList,
   StyleSheet,
   Text,
-  TouchableOpacity,
   View,
   ScrollView,
 } from 'react-native';
@@ -17,6 +16,7 @@ import TimelineFull from './timelineFull'
 import TimelineHeader from './timelineHeader'
 import TimelineFilter from './timelineFilter'
 import TickMarks from './tickMarks'
+import Touchable from '../components/touchable'
 
 export default class Timeline extends Component {
   constructor(props) {
@@ -100,11 +100,11 @@ export default class Timeline extends Component {
 
 //         <View style={styles.body}>
 //           <View style={styles.sidebar}>
-//             <TouchableOpacity onPress={() => this.setState({ filterVisible: true })}>
+//             <Touchable onPress={() => this.setState({ filterVisible: true })}>
 //               <ClearText style={[styles.filterText, !! this.state.tag ? styles.filterActive : styles.filterInactive ]}>
 //                 { !! this.state.tag ? 'FILTER' : '' }
 //               </ClearText>
-//             </TouchableOpacity>
+//             </Touchable>
 //           </View>
 //         </View>
 
diff --git a/client/src/lib/timeline/timelineEvent.js b/client/src/lib/timeline/timelineEvent.js
index 84e9437..7231b8a 100644
--- a/client/src/lib/timeline/timelineEvent.js
+++ b/client/src/lib/timeline/timelineEvent.js
@@ -1,12 +1,12 @@
 import React, { Component } from 'react';
 import {
-  TouchableOpacity,
   StyleSheet,
   Image,
   View
 } from 'react-native';
 
 import ClearText from '../components/text'
+import Touchable from '../components/touchable'
 
 const isIphone = (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))
 const isIpad = (navigator.userAgent.match(/iPad/i))
@@ -55,9 +55,9 @@ export default class TimelineEvent extends Component {
       imageContainer = ( <View style={styles.imageContainer}>{image}</View> )
     }
     return (
-      <TouchableOpacity style={styles.item} activeOpacity={0.8} onPress={() => this.props.onPress(this.props.item) }>
-        <div ref={(ref) => this.ref = ref}></div>
+      <Touchable style={styles.item} onPress={() => this.props.onPress(this.props.item) }>
         <View style={styles.item}>
+          <div ref={(ref) => this.ref = ref}></div>
           <View style={styles.dateContainer}>
             <ClearText style={styles.date}>{item.date}</ClearText>
           </View>
@@ -66,7 +66,7 @@ export default class TimelineEvent extends Component {
             <ClearText style={styles.title}>{item.title}</ClearText>
           </View>
         </View>
-      </TouchableOpacity>
+      </Touchable>
     )
   }
 }
diff --git a/client/src/lib/timeline/timelineFilter.js b/client/src/lib/timeline/timelineFilter.js
index c6da98a..8259c0a 100644
--- a/client/src/lib/timeline/timelineFilter.js
+++ b/client/src/lib/timeline/timelineFilter.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import {
   ScrollView,
   StyleSheet,
-  TouchableOpacity,
+  Touchable,
   Image,
   View,
   Text,
diff --git a/client/src/lib/timeline/timelineFull.js b/client/src/lib/timeline/timelineFull.js
index 1b60575..8019710 100644
--- a/client/src/lib/timeline/timelineFull.js
+++ b/client/src/lib/timeline/timelineFull.js
@@ -2,7 +2,6 @@ import React, { Component } from 'react';
 import {
   ScrollView,
   StyleSheet,
-  TouchableOpacity,
   Image,
   View,
   RefreshControl,
@@ -15,6 +14,7 @@ import ClearText from '../components/text'
 import Heading from '../components/heading'
 import Definition from '../components/definition'
 import Close from '../components/close'
+import Touchable from '../components/touchable'
 
 const isIphone = (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))
 const isIpad = (navigator.userAgent.match(/iPad/i))
@@ -83,9 +83,9 @@ export default class TimelineFull extends Component {
           name = linkTextFromUrl(url)
         }
         return (
-          <TouchableOpacity key={'link_' + i} onPress={() => this.props.onLinkPress(url)}>
+          <Touchable key={'link_' + i} onPress={() => this.props.onLinkPress(url)}>
             <ClearText style={styles.link}>{name}</ClearText>
-          </TouchableOpacity>
+          </Touchable>
         )
       })
       links = (
@@ -117,9 +117,9 @@ export default class TimelineFull extends Component {
               <Definition label='Date'>{item.date}</Definition>
               <Definition label='Medium'>{item.medium}</Definition>
               <Definition label='Category' contentIsView={true}>
-                <TouchableOpacity onPress={() => this.onPickTag(item.category)}>
+                <Touchable onPress={() => this.onPickTag(item.category)}>
                   <ClearText style={styles.link}>{item.category}</ClearText>
-                </TouchableOpacity>
+                </Touchable>
               </Definition>
               <Definition label='Tags' contentIsView={true}>
                 <HTMLView value={'<p>' + tags + '</p>'} stylesheet={tagHTMLStyles} onLinkPress={this.onPickTag} />
diff --git a/client/src/lib/timeline/timelineHeader.js b/client/src/lib/timeline/timelineHeader.js
index 26cac31..3d922e1 100644
--- a/client/src/lib/timeline/timelineHeader.js
+++ b/client/src/lib/timeline/timelineHeader.js
@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import {
   StyleSheet,
-  TouchableOpacity,
   Text,
   View,
   ScrollView,