rome2rio / react-native-touch-through-view Goto Github PK
View Code? Open in Web Editor NEWComponent library that allows for scroll views and table views to scroll over interactable content without poor performing size and bounds animations.
Component library that allows for scroll views and table views to scroll over interactable content without poor performing size and bounds animations.
In order to support the latest RN version (cant recall if this was changed in 48 or later), we'll need to drop the @override
from createJSModules
in TouchThroughViewPackage.java
.
The open PRs to propTypes should also be merged to support the latest RN version.
As the title says, I have a bottom tab navigator, two screens using the TouchThroughWrapper and TouchThroughView. If only the first screen is rendered (because tab navigator has lazy loading), it will work, but if the second screen is rendered, the first one will be dead, it stops from passing touches through view. Don't know what this could be, but on iOS it's working fine, so the problem is with android.
Here some info about my project:
react-native: 0.61.2
react-navigation: 4.0.10
react-navigation-tabs: 2.5.6
react-native-touch-through-view: 1.1.2
I would expect the entire green section to be press-able, but only the section that is not covered is press-able. I only tried on iOS.
Thanks for any pointers!
import {
FlatView,
Platform,
ScrollView,
StyleSheet,
Text,
TouchableHighlight,
View,
} from "react-native"
import React, { Component } from "react"
import {
TouchThroughView,
TouchThroughWrapper,
} from "react-native-touch-through-view"
type Props = {}
export default class App extends Component {
render() {
return (
<View style={{ flex: 1 }}>
<TouchThroughWrapper style={{ flex: 1 }}>
<TouchableHighlight onPress={() => alert("hi")}>
<View
style={{
height: 300,
position: "absolute",
top: 0,
left: 0,
right: 0,
backgroundColor: "green",
}}
/>
</TouchableHighlight>
<TouchThroughView
style={{
backgroundColor: "#ff000010",
height: 200,
}}
/>
</ScrollView>
</TouchThroughWrapper>
</View>
)
}
}
Hi, I'm using this library with a scroll view over a react-native-map, in debug build it works fine, I can click on map markers but when I do a release build the touch through no longer works and it only scrolls the scrollview.
When attempting to use this package on Android I am getting the following error:
TouchThroughViewPackage.java:27: error: method does not override or implement a method from a supertype
@Override
^
1 error
Environment:
OS: macOS High Sierra 10.13.1
Node: 8.11.1
Yarn: 1.5.1
npm: 5.6.0
Watchman: Not Found
Xcode: Xcode 9.2 Build version 9C40b
Android Studio: 3.1 AI-173.4819257
Packages: (wanted => installed)
react: 16.3.1 => 16.3.1
react-native: 0.55.2 => 0.55.2
I tried using this library with a ScrollView on iOS, and it seems like touches propagate through just fine, but if I try dragging the ScrollView starting inside TouchThroughView area, the ScrollView does not scroll. From the gifs in readme I can't tell if this is intended behavior or not. My use case is propagating only tap events through the ScrollView, not other types (specifically not pans). Is it possible with this library?
This is a SUPER nice library ❤️
Got it working well for ListView
as in the demo, but struggling to get it working with a ScrollView
instead - are there any demos around of this being done please?
This is my current code:
This is what hapenns when I run it:
(the ScrollView
container gets pushed down below TouchThroughView
Thanks for your help!
Works fine on iOS, but taps don't pass through on Android.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.