rnt

react-native-touch-through-view

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

Showing:

Popularity

Downloads/wk

718

GitHub Stars

40

Maintenance

Last Commit

2yrs ago

Contributors

16

Package

Dependencies

0

License

MIT

Type Definitions

Tree-Shakeable

No?

Readme

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.

Android Installation

For Android you have to do the normal react-native link. Also you have to change MainActivity inside you project. See example below

package com.reactnativetouchthroughviewexample;

import com.facebook.react.ReactActivity;
import android.view.MotionEvent;
import com.rome2rio.android.reactnativetouchthroughview.TouchThroughTouchHandlerInterface; 
import com.rome2rio.android.reactnativetouchthroughview.TouchThroughTouchHandler; 

public class MainActivity extends ReactActivity implements TouchThroughTouchHandlerInterface { 

    private TouchThroughTouchHandler touchThroughTouchHandler = new TouchThroughTouchHandler();

    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "reactnativetouchthroughviewexample";
    }

    public TouchThroughTouchHandler getTouchThroughTouchHandler() {
        return touchThroughTouchHandler;
    }

    @Override
    public boolean dispatchTouchEvent(MotionEvent ev) {
        touchThroughTouchHandler.handleTouchEvent(ev);

        return super.dispatchTouchEvent(ev);
    }
}

Credits

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Tutorials

No tutorials found
Add a tutorial