React Native Touch Through View is a simple component library that allows for scroll views and table views to scroll over interactable content without poor performing size and bounds animations.
You can achieve Spotify or Apple maps style drawer effects with the full performance of UIScrollView and without laggy onScroll events.
Built to solve issues like http://stackoverflow.com/questions/39995024/propagate-touch-events-through-scrollview
Simply use react-native link react-native-touch-through-view to add the library
to your project.
- Import the library
import { TouchThroughView, TouchThroughWrapper } from 'react-native-touch-through-view'; - Wrap your ListView or ScrollView in the
<TouchThroughWrapper>element. - Add
<TouchThroughView />elements wherever you want the users touch to be passed through to the view behind. You can style these views just like any other view and put them anywhere in the view you want.
eg.
// Markup for listview with a touch through header.
<TouchThroughWrapper style={styles.scrollWrapper}>
<ListView
style={styles.scroller}
dataSource={dataSource}
renderHeader={() => <TouchThroughView style={styles.touchThroughView} />}
renderRow={(rowData) => {
return (
<View style={styles.itemRow}>
<Text>{rowData}</Text>
</View>
)
}}>
</ListView>
</TouchThroughWrapper>Have a look at the demo in the example directory if you need more help.
Currently we are working through an issue at #8 with Android devices on that latest version of React Native not properly passing through touch events.
Brought to you by the team at Rome2rio. Find out how to join our team at https://www.rome2rio.com/careers/