Comments (8)
@Runtime007 The issue is that you would like a minimum dy value for the gesture to trigger a scroll event in the root ScrollView component. Something like the
activeOffsetY
prop from RNGHPanGestureHandler
I see two options :
- Get inspiration from this hacking.
- Render table previews and offer full table layout in a separate modal or screen after user interaction.
In either cases, you will need
makeCustomTableRenderer
.I hope you'll find something workable. I will close because this limitation is broadly from react-native. But if you dig any workaround, please post your findings!
Best,
JSR
Thank you very much for your proposals, I'll check and try, to see if it can be implemented on the react side.
Best regards.
from plugins.
@Runtime007 To help you, I will need you to produce a minimal reproducible example, in the form of an expo snack or git repository. Also, I am not sure about the issue!
from plugins.
here is the code. Android 9.0 Galaxy s9+
. I try to scroll the table to left or right, but the ScrollView captured the move event and it scrolls down or up, there is no response for the table sometimes. @jsamr
from plugins.
hi, @jsamr, this issue has troubled me several days. I try to fix it by setting PanResponder
for webview and listening to touch events to avoid scroll conflict but come to nothing. So I have to change android source code for react-native-webview
, and it works.
protected static class RNCWebView extends WebView implements LifecycleEventListener {
...
float startX = 0;
float startY = 0;
float dx = 0;
float dy = 0;
@Override
public boolean onTouchEvent(MotionEvent event){
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
getParent().requestDisallowInterceptTouchEvent(true);
startX = event.getX();
startY = event.getY();
break;
case MotionEvent.ACTION_MOVE:
dx = Math.abs(event.getX() - startX);
dy = Math.abs(event.getY() - startY);
if (dx > dy) {
getParent().requestDisallowInterceptTouchEvent(true);
} else {
getParent().requestDisallowInterceptTouchEvent(false);
}
break;
}
return super.onTouchEvent(event);
}
...
}
from plugins.
@Runtime007 I'll take a look today!
from plugins.
@Runtime007 The issue is that you would like a minimum dy value for the gesture to trigger a scroll event in the root ScrollView component. Something like the activeOffsetY
prop from RNGH PanGestureHandler
I see two options :
- Get inspiration from this hacking.
- Render table previews and offer full table layout in a separate modal or screen after user interaction.
In either cases, you will need makeCustomTableRenderer
.
I hope you'll find something workable. I will close because this limitation is broadly from react-native. But if you dig any workaround, please post your findings!
Best,
JSR
from plugins.
hi, @jsamr, this issue has troubled me several days. I try to fix it by setting
PanResponder
for webview and listening to touch events to avoid scroll conflict but come to nothing. So I have to change android source code forreact-native-webview
, and it works.protected static class RNCWebView extends WebView implements LifecycleEventListener { ... float startX = 0; float startY = 0; float dx = 0; float dy = 0; @Override public boolean onTouchEvent(MotionEvent event){ switch (event.getAction()) { case MotionEvent.ACTION_DOWN: getParent().requestDisallowInterceptTouchEvent(true); startX = event.getX(); startY = event.getY(); break; case MotionEvent.ACTION_MOVE: dx = Math.abs(event.getX() - startX); dy = Math.abs(event.getY() - startY); if (dx > dy) { getParent().requestDisallowInterceptTouchEvent(true); } else { getParent().requestDisallowInterceptTouchEvent(false); } break; } return super.onTouchEvent(event); } ... }
Third option : I would suggest you offer a PR to react-native-webview
with a prop enabling the behavior you have implemented. Not sure about the best chose of words though!
from plugins.
#14 merged, now you can use onMessage and injectedJavaScript webview props
you can disable scroll of ScrollView with scrollEnabled prop
<ScrollView scrollEnabled={this.state.scrollEnabled}>
<HTML
alterNode={alterNode}
renderers={this.htmlRenderers}
ignoredTags={IGNORED_TAGS}
html={this.state.content}
/>
</ScrollView>
scrollTimer;
onTableMessage = (event) => {
if (event.data === 'scroll') {
if (this.scrollTimer) {
clearTimeout(this.scrollTimer);
}
this.setState({scrollEnabled: false}, () => {
this.scrollTimer = setTimeout(() => {
this.setState({scrollEnabled: true});
}, 100);
});
}
};
htmlRenderers = {
table: makeTableRenderer({
WebViewComponent: WebView,
webViewProps: {
onMessage: this.onTableMessage,
injectedJavaScript:
"setTimeout(() => {document.addEventListener('scroll', function () {window.ReactNativeWebView.postMessage('scroll');},true);}, 300);",
},
}),
};
from plugins.
Related Issues (20)
- img tag is not supported inside table HOT 11
- Works fine for iOS but breaking in PWA HOT 9
- Are the table heights synchronized? If they are, how to disable syncing? HOT 6
- [table-plugin] Set text-align in tableStyleSpecs HOT 3
- undefinded is not a function (near '...(0,_reactNativeRenderHtml.domNodeToHTMLString)...') HOT 3
- i got error on back press please resolve it, thanks HOT 2
- If you get an error, read this first
- [iframe] Video always autoplay. How to disable autoplay? HOT 1
- [iframe] "scalesPageToFit=true" not zooming out HOT 5
- [heuristic-table-plugin]table-row/collum styling HOT 4
- [iframe-plugin] Content doesn't scale to fit if the container has some padding HOT 5
- Table not showing HOT 2
- [heuristic-table-plugin] forceStretch causes crash HOT 4
- [iframe-plugin] Add an option to add headers to the webview HOT 2
- [iframe-plugin] html string with iframe, iframe will not work HOT 8
- [heuristic-table-plugin] Text not showing when using tableRenderers
- [table-plugin] Android app (expo go and production) crashes for certain html content HOT 2
- [iframe-plugin] Crashes on Android when using certain content. HOT 4
- [iframe-plugin] html string with iframe, iframe will not work. Tried the solution in issue #41 but the app crashes
- borderwidth not showing in right side and bottom side in Table. HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from plugins.