Skip to content

Component library that allows for scroll views and table views to scroll over interactable content without poor performing size and bounds animations.

Notifications You must be signed in to change notification settings

thomashermine/react-native-touch-through-view

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

22 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-native-touch-through-view npm version

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.

Spotify style Maps style

Built to solve issues like http://stackoverflow.com/questions/39995024/propagate-touch-events-through-scrollview

Installation

Simply use react-native link react-native-touch-through-view to add the library to your project.

How to use it

  1. Import the library import { TouchThroughView, TouchThroughWrapper } from 'react-native-touch-through-view';
  2. Wrap your ListView or ScrollView in the <TouchThroughWrapper> element.
  3. 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.

Issues

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.

Credits

Brought to you by the team at Rome2rio. Find out how to join our team at https://www.rome2rio.com/careers/

About

Component library that allows for scroll views and table views to scroll over interactable content without poor performing size and bounds animations.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Java 46.6%
  • JavaScript 38.0%
  • Objective-C 15.4%