Im trying to use scroll to end function from scrollView docs,
but I don't know how to implement it.
right now I get errors: cant find variable scrollToEnd
my code for the scroll view:
<ScrollView onContentSizeChange={() => scrollToEnd({ duration: 500 })} style={styles.viewcontainer}>
and inside the scrollView i have content that grawing when button clicked.
I want that the view always go to the bottom.
how i implement the scrollToEnd method?
Related
I found one issue and can someone help me.
I use vertical scroll list(FlatList) and inside it i have also another vertical FlatList.
Inside child FlatList I use onScroll events for customise scroll animation.
issue: when I scroll parent FlatList I get onScroll events inside child and animation glitching.
How can I stop get wrong onScroll event inside child FlatList.
Also I do not use onScroll events inside parent component.
<Flatlist
onScroll={
Animated.event([{nativeEvent: {contentOffset: {y: scrollY}}}], {
useNativeDriver: false,
})
}
...
/>
I have a Flatlist with Vertical Scrolling and inside each item of the Flatlist I have a SwipeListView from react-native-swipe-list-view.
Whenever I Swipe horizontally inside the SwipeListView, it gets cancelled if i also start scrolling vertically and then it starts vertically scrolling the Flatlist. I tried using useState to manage the scrollEnabled but this only works when the User slowly slides inside the SwipeListView. With increased velocity there are messed up animations. Also i feel like there must be a cleaner way of achieving this. Anyone know a way to basically disable FlatList scroll while scrolling inside of child component?
For starters, replace react-native-swipe-list-view with the swipable component that react native gesture handler exports. This is far more performant as it uses the UI thread to perform all animations. You can then import Flatlist as well from react-native-gesture-handler.
Generally, things should work as is. But if there is any glitchy behaviour you can wrap flatlist with a gestureHandlerRootView and pass RNGH ScrollView to the flatlist renderScrollComponent.
import Swipeable from 'react-native-gesture-handler/Swipeable';
import {Flatlist} from 'react-native-gesture-handler'
import {
GestureHandlerRootView,
PanGestureHandler,
ScrollView,
} from 'react-native-gesture-handler';
export default function App(){
<GestureHandlerRootView>
<Flatlist renderItem={<Swipeable />}
renderScrollComponent={ScrollView}/>
</GestureHandlerRootView>
}
You can try implementing the swipeableRow which can be used to disable scrolling in flatlist.
disableScroll() {
this.list.getScrollResponder().setNativeProps({
scrollEnabled: false
})
}
enableScroll() {
this.list.getScrollResponder().setNativeProps({
scrollEnabled: true
})
}
Then in your place of your swipeable component, add this:
<SwipeableRow onSwipeStart={disableScroll} onSwipeEnd={enableScroll} />
Also you can try adding this to the FlatList
scrollEnabled={false}
I am building a header that animates/hides as the user scrolls down a Flatlist.
Is there any way to find out the scroll position of the Flatlist in pixels?
I'm using react native 0.59.8.
I've tried using onScroll hoping it passes a value to the callback - it doesn't.
I've also tried onScrollBeginDrag, onScrollEndDrag and onMomentumScrollEnd.. None of them provide information of the current scroll position.
onSroll={(info)=>{console.log(info)}
I would expect to get some information about the scroll, but none is passed.
use the code
<FlatList onScroll={this.handleScrollView} />
handleScrollView: function(event: Object) {
this.setState({ scrollPosition: event.nativeEvent.contentOffset.y });
}
its working
onScroll={(r) => console.log(r.nativeEvent.contentOffset.y)}
post your code here if you want to find bug
A Flatlist, as said in the docs, has all the props of a ScrollView, so as answered here,
Add a handler to your FlatList:
<FlatList onScroll={this.handleScroll} />
And then:
handleScroll: function(event) {
console.log(event.nativeEvent.contentOffset.y);
},
I have a scrollview which content is larger than phone screen.
I scroll to the bottom and there I have function that reload content of that scrollview but first clear data source for it.
Reload function is connected to RefreshControl on scrollview.
But RefreshControl is not visible while loading data except when I slightly touch screen where content should be.
And this is only when I start reload from scrollview bottom.
I tried to scroll to top but it doesn't solve it:
onContentSizeChange={(contentWidth, contentHeight) => {
this.scrollView.scrollTo({ y: 0 });
}}
Any idea why this is happening?
<ScrollView
ref={ref => (this.scrollView = ref)}
refreshControl={
<RefreshControl
refreshing={this.props.getDataInProgress}
onRefresh={this.reloadData.bind(this)}
/>
}
>
{this.renderData()}
renderData() {
return this.props.data.map((item, index) => {
return ... some function that return other components
So as I wrote if I pull down loader is visible.
But if I scroll to bottom and click one some button that call same function as pull to refresh loader is not visible.
EXAMPLE
Im trying to implement a screen transition effect, when a user clicks on a Box Component (inside a ScrollView), the image will scale and move to the top, Airbnb has a great example of this:
Airbnb scale transition
<ScrollView>
<Box /> // onPress the scaleImage comp should move to top screen
<Box /> // regardless of scroll position
<Box />
<Box />
...
</ScrollView>
<Animated.Image
style={styles.scaleImage}
source={this.state.activeImage} />
I know how to implement the animation part of this, but the problem Im having is the layout, if the images that Im trying to scale and move to the top are in a ScrollView, how can I determine the distance to get to the top.
You could try using React Native's measure function. You can give it any native component (View, ListView, Image, etc.) and it will give you that component's offsets to its frame (the native view which contains it), its page (the screen borders), and its width/height in a callback as soon as rendering is done (or immediately, if rendering is already done)
To get a reference to your image component, define it as:
<Image ref="myImage" /*...*/ />
Then, within your component class, you can do:
this.refs.myImage.measure((frameX, frameY ,width, height, pageX, pageY) => {
//do stuff with the measurements
})
In your case, you would likely want to use pageX and pageY as they will give you the absolute position of your image. Just remember this function only works on native components and not on user-defined components, so you should call it on the actual Image component and not on any wrappers you define around it.