I'm using a ListView component to display a simple list with section headers.
The ListView component has events for onEndReached but I could not find an onBeginningReached event.
How do you detect that a user has scrolled to the very top of the ListView?
There is no such callback provided. Here is a workaround in React Native .. I assume ReactJS should have something similar
<ListView onScroll={this.handleScroll.bind(this)} ... />
handleScroll(event) {
console.log(event.nativeEvent.contentOffset.y);
}
You can see that the value printed when scrolled on top will be negative. See if that works and help..
Related
The situation:
I am building a tooltip that has to programmatically position itself based on an avatar component that lives in a different package.
The avatar lives in the header part of the screen and I can't colocate the tooltip to be next to it code-wise, because the tooltip needs to be dismissed once the user interacts/touches the screen.
The Problem:
is that I can't just use onLayout event on the avatar because it fades into the view and the layout event always results in { x: 0, y: 0 }, which is not accurate and doesn't reflect the actual position of the avatar.
Thanks in advance for any help or advice that you can offer!
What I tried:
Passing a callback for onLayout, but as I mentioned above it doesn't return the correct values.
Using the measure function, but it resulted in the same values as onLayout.
Using the PanResponder on that avatar and requested to respond to move events, but because the avatar doesn't move the onPanResponderMove doesn't get triggered.
I'm having trouble force focussing a react native TextInput field.
It's focused when the page loads with autofocus={true}.
But after blurring I would need to press the text input field, but that's hidden because of design reasons. Is there a way to document.getElementById("myText").focus(); in react native that I can call after onBlur()?
Cheers.
You need to assign the TextInput field to a ref like this:
<TextInput ref={ref => (this.ref = ref)} />
Then you can programmatically focus it by running focus() on it, like so:
this.ref.focus();
Here's a little Snack where I run the focus/blur function when pressing a button:
https://snack.expo.io/#marcelkalveram/auto-focus-input-field-using-ref
It should be easy to replicate this for your navigation scenario.
In case you're using react-navigation, this is the part of the docs you'll be interested in: https://reactnavigation.org/docs/en/navigation-prop.html#addlistener-subscribe-to-updates-to-navigation-lifecycle
Is there a way to prevent pull-to-refresh functionality for ScrollView component?
I want to be able scroll, but I don't wanna allow to pull down content of component and prevent situations like this:
You seem like you have placed the View containing you custom made action bar inside the scroll view, and what's happening in the image you provided isn't caused by pull-to-refresh it's provided by overscrolling so you got 2 solutions:
1-Place your action bar outside your ScrollView and make the action bar and the ScrollView childrens of 1 View.
2-Add alwaysBounceVertical={false} to your ScrollView props.
Hope this helps.
use a const refreshing = false , initially. Then on call of _onRefresh , change refreshing from false to true, and reinitialise the content of the scollview.
I'm trying to set the initial scroll position of a ListView in react native.
Right now, I'm doing this:
componentDidMount() {
let i = this.props.images.indexOf(this.props.current);
if(i != -1) {
this.refs.listView.scrollTo({ x:i*this.props.width, y:0, animated:false });
}
}
where the images prop is the datasource for the ListView, the current prop is where I want to be initially scrolled to, and the width prop is the width of the component. (The component scrolls horizontally).
This works, but there's a delay between the initial render and the call to componentDidMount, giving me a flash of the end of end of the list before the list is scrolled.
Is there a way of setting an initial scroll position of the list? Or better way of doing this to get rid of that flash?
On iOS you can use the ScrollView#contentOffset to set the initial scroll position of a ListView, which inherits the properties of ScrollView.
If you are looking for an Android solution, the ListView.scrollTo method you are calling seems like the best bet for the general case.
That said, if I interpret your code sample correctly, you are using the ListView for a paginated, horizontal list, perhaps with the help of the pagingEnabled property? If this is the case, on Android you might look at using ViewPagerAndroid instead, and setting the initialPage property.
i 've a NavigationAnimatedView which rendering a ListView with pushed DetailsView.
In the NavigationHeader, on the rightComponent, i have a button and i want to display a view with NavigationCardStack from bottomToTop. How can i combine the two modes of navigation ?
Like the filters button on the F8 app on the home screen.
i don't understand how with a dispatch action (navigatePush ?) on the FiltersButton, i can't switch with a navigationCardStack to display a FilterViews from BottomToTop.
You can provide props to NavigationCard when you render it:
_renderScene(props) {
return (
<NavigationCard
style={NavigationCardStackStyleInterpolator.forVertical(props)}
...
Sorry that part isn't documented very well right now!