Please help me with my problem. I have a long list of items, so I'm using ScrollView. But also I have Input field and using TouchableWithoutFeedback to make OnPress event to dismiss the keyboard, like that -
return (
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<View >
<HeaderMain/>
<ScrollView >
...
</ScrollView>
</View>
</TouchableWithoutFeedback>
And my problem is that scrolling doesn't work. What should I do to make scrolling and dismissing keyboard both work correctly?
I think you should be using keyboardShouldPersistTaps and/or keyboardDismissMode props from ScrollView.
You can read more about that in the docs:
https://facebook.github.io/react-native/docs/scrollview.html
How do I detect when a longPress is released (not by dragging away). onPressOut does say when it's released but it also triggers when finger is dragged away from the button.
<TouchableWithoutFeedback
onLongPress={() => this.onLongPress()}
onPressOut={() => this.onCancel()}
onPressIn={() => this.onHover()}
onPress={() => this.onPress()}
>
How about adding a massive (bigger than the screen) pressRetentionOffset? This should prevent the touch from cancelling unless you release.
<TouchableWithoutFeedback
...
pressRetentionOffset={{ top: 1000, left: 1000, bottom: 1000, right: 1000 }}
>
Are you sure you should do that?
Cancel-ability- when making an action, the user should be able to abort it mid-touch by dragging their finger away
from Facebook's Best Practices section:
https://facebook.github.io/react-native/docs/gesture-responder-system.html#best-practices
If you still need to do it, you may need to implement a custom touchable using View.props.onResponderMove and View.props.onResponderRelease
See docs:
https://facebook.github.io/react-native/docs/gesture-responder-system.html#responder-lifecycle
Can anyone help me how to use onChange props in react native scrollable tab view?
Any sample code?
Basically I want to fetch data, when tab is changed.
<View style={styles.container}>
<ScrollView>
<ScrollableTabView>
<OverViewPage tabLabel = "Overview" contentProps = { this.state = {data : this.state.data , addressDetails : this.state.addressDetails }} />
<OverViewPage1 tabLabel = "OverView1"/>
<OverViewPage2 tabLabel = "OverView2" />
</ScrollableTabView>
</ScrollView>
</View>
When I go to OverView1 scene I want to fetch data from api and rendered the information returned. Basically I want to catch an event, when tab is changed.
I found there is an onChange props but couldnt figure it out how to use.
Appreciate the help!!
Thank you!!
ScrollableTabView don't pass state of tab state to children tab screens. Instead, in onChangeTab prop of ScrollTabView you can set state in your parent React class and pass new state to children tab screens about active tab as properties. Something like following:
<ScrollableTabView onChangeTab={(event)=>{this.setStateForTabChange(event.i)}}>
<Scene1 isActive={this.state.isSceneOneVisible} />
<Scene2 isActive={this.state.isSceneTwoVisible} />
</ScrollableTabView>
You can define setStateForTabChange which will eventually will set state values for scene active states based on index value sent by onChangeTab.
I am new to React Native. I have an app with a ScrollView component and several custom components inside it. I would like to trigger an onPressOut event from the ScrollView, so that when the user scrolls, and releases, the child components inside the ScrollView update their states. But, the ScrollView documentation does not include any press events: https://facebook.github.io/react-native/docs/scrollview.html
Other things I tried:
I tried wrapping the scrollview inside a TouchableWithoutFeedback component, when I do this, I get an error as soon as I try to scroll:
2015-10-26 11:59:13.849
[error][tid:com.facebook.React.ShadowQueue][RCTModuleMethod.m:60]
Argument 0 (NSNumber) of RCTUIManager.measure must not be null
2015-10-26 11:59:13.850 [error][tid:com.facebook.React.ShadowQueue][RCTModuleMethod.m:60]
Argument 0 () of RCTUIManager.measure could not be processed.
Aborting method call.
No idea what that means...
Any ideas? Thanks!
Here is my code:
<View ref="theWrapperView" style={styles.theWrapperView}>
<ScrollView
onScroll={this.onScroll.bind(this)}
onMomentumScrollEnd={this.onScrollAnimationEnd.bind(this)}
style={styles.scrollView}
contentContainerStyle={styles.scrollViewContentContainer}
showsHorizontalScrollIndicator={true}
scrollEventThrottle={10}
pagingEnabled={true}
horizontal={true}
automaticallyAdjustContentInsets={false}
snapToAlignment={'center'}
snapToInterval={20}
zoomScale={1.5}
centerContent = {true}
>
{cards}
</ScrollView>
</View>
When I change the View element to a TouchableWithoutFeedback element is when I get the error.
I have figured this out after investigating the React Native source code: https://github.com/facebook/react-native/blob/master/Libraries/Components/ScrollResponder.js
As it turns out there are actually a number of other events available via the ScrollResponder mixin, that are not mentioned in the online documentation. It is not necessary to include the mixin to access these events, since they are already part of the ScrollView component. The one that was useful for me was onResponderRelease, which fires when you release the ScrollView, like so:
<View ref="theWrapperView" style={styles.theWrapperView}>
<ScrollView
onScroll={this.onScroll.bind(this)}
onMomentumScrollEnd={this.onScrollAnimationEnd.bind(this)}
onResponderRelease = {this.onResponderReleaseHandler.bind(this)}
>
{cards}
</ScrollView>
</View>
and in the class define a handler:
onResponderRelease(){
//do stuff
}
onTouchEnd will help you to get this
<ScrollView contentContainerStyle={{ paddingHorizontal: 22, top: -16 }}
onTouchEnd={(e) => {
//Here define your ScrollView Press Event
}}
>
{this.props.children}
</ScrollView>
I'm trying to create the overall layout of a webapp. The app is full-screen and has a fixed header and three columns/panes. The center pane consists of two rows:
The panes should be resizable through dragging the pane edges with the mouse (see arrows in image above).
The individual panes have should have vertical scrollbars in case of overflowing content, that is, no global browser window scrollbar.
Using jQuery and jQuery UI Resizable, I've created this (partly working) JSFiddle.
HTML:
<div class="header">
Fixed header
</div>
<div class="wrapper">
<div class="inner-wrapper">
<div class="left pane">Left</div>
<div class="center pane">
<div class="inner">
<div class="top">Center top</div>
<div class="bottom">Center bottom</div>
</div>
</div>
<div class="right pane">Right</div>
</div>
</div>
CSS:
html, body {
height: 100%;
}
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 20px;
background-color: moccasin;
}
.wrapper {
position:absolute;
top: 21px;
right: 0;
bottom: 0;
left: 0;
background-color: fuchsia;
}
.inner-wrapper,
.center.pane .inner {
display: table;
width: 100%;
height: 100%;
}
.pane {
display: table-cell;
}
.left.pane {
background-color: olivedrab;
}
.center.pane {
background-color: lightblue;
}
.center.pane .inner .top,
.center.pane .inner .bottom{
display: table-row;
}
.center.pane .inner .top {
background-color: lightcoral;
}
.center.pane .inner .bottom {
background-color: orange;
height: 100%;
width: 100%;
}
.right.pane {
background-color: #999;
}
JavaScript:
$(function () {
$(".left.pane").resizable({
handles: "e, w"
});
$(".right.pane").resizable({
handles: "e, w"
});
$(".center.pane .inner .bottom").resizable({
handles: "n, s"
});
});
It has several issues, including:
When resizing Left, Right is also resized (which it shouldn't)
When resizing Left towards full width, Center content is hidden under Right
When resizing Right the wrapper (Fuchsia-colored) is partly visible
Center bottom is resized through the top of the Center top, not through it's own top
I'm aware of the jQuery Layout plugin, but as far as I can see, it doesn't offer quite the layout I'm after. Also, I want to keep it as simple as possible.
Furthermore, I have tried Methvins splitter plugin, but couldn't get it to work.
My question:
Any suggestions for how to create a layout as in the image from jQuery UI Resizable and what I have in the JSFiddle?
There are more appropriate plugins, based on jQuery to obtain what you want.
OPTION 1:
I personally used in a my project UI Layout.
It is an almost old project (6 years ago), but in mid-2014 its development is re-started, even if there are no more information after september 2014.
Actually, last stable version is 1.4.3, released in sept '14. New website is:
https://github.com/allpro/layout/
OPTION 2:
If you need a more complete solution, you could think about jEasy UI, that is a complete framework that
[...] helps you build your web pages easily
It is a sort of replacement of jQuery UI, with some similar widgets (dialogs, accordions, ...) and something exclusive, like Layout module, already linked in my answer.
OPTION 3:
Analogue solution to the previous one, is Zino UI, another complete UI framework that has a specific component dedicated to "Split Layout"
OPTION 4:
jQWidgets is another library, with similar purposes of previous ones, and specifically could be interesting jqxSplitter module.
Related alternative (similar):
There is also another alternative, that allows to slice panels in the browser windows but in addition allows to drag&drop single panels creating different tabs, and side-by-side sub-windows.
This is called Golden Layout. It's different from previous ones, for many reasons also more powerful but surely at the moment it has not Touch support...
There were a few small problems that caused the behaviour that you don't like.
These were fixed in this Fiddle
The problems were:
When resizing Left, Right is also resized (which it shouldn't)
Fixed by setting a initial width (in percent)
When resizing Left towards full width, Center content is hidden under Right
Couldn't reproduce
When resizing Right the wrapper (Fuchsia-colored) is partly
visible Center bottom is resized through the top of the Center top,
not through it's own top
Fixed by setting left to 0 during resize.
$(".right.pane").resizable({
handles: "e, w",
resize: function(event, ui) {
ui.position.left = 0;
}
});
Center bottom is resized through the top of the Center top, not through it's own top
This is due to that JQuery UI Resizable uses relative positioning which do not work in table cells. Fixed by adding a content div that handles the resize.
<div class="top pane">
<div class="top-content">Center top</div>
</div>
I found one which seems acceptable for this requirement, if you looking for something more minimalistic compared to jEasy UI. : )
http://w2ui.com/web/demo/layout
Also it's no dead project; Seems still active on github https://github.com/vitmalina/w2ui/, which is nice.
I'll give it a try. Just wanted to share this, to save others search time, hopefully.
i'm usign this plugin
with jquery
http://www.bramstein.com/projects/jlayout/jquery-plugin.html
I came up with the answer to this myself, although in the end it took me over a year of development! The result is a modern, responsive panel layout widget built using jQuery and jQuery UI widget factory.
http://www.silvercore.co.uk/widgets/propanellayout/
The best solution at the time the question was asked was undoubtedly jQuery UI.Layout, but over time that project has stagnated and the plugin does not work with jQuery 2. Despite the code being released on GitHub its fate is unknown, which makes using it as the foundation of a long term project questionable.
A few of the other links posted here are dead now and if you don't want or need a full application framework your choices are limited.
OK, hopefully my last edit. Went through a bunch of these, and ended up with jQuery UI layout.
Goldenlayout is nice, but you have to actually add the html in each pane through javascript. If you've got all your stuff in react components I guess this might be fine, but not for my use case.
jQuery UI layout seems to be pretty robust and was just updated in 2014.
You can use Gridstack
It's easy to use and powerful.