I have an image rendered inside a scrollview component and the dimensions of the image are fixed as (height: 200, and width from device dimension).
Also the style of the scrollview is set as (flex: 1 not contentContainerStyle).
But the image doesn't scroll properly and snaps back when I scroll.
I understand that this is because there is only one item in the scrollView.
How to force scroll the content inside the scrollView even if there is only one item in it?
Try wrapping your ScrollView within a an enclosing
Related
I am working on gradually increasing the height of list footer component so that whatever is there is my footer be shown gradually to the user and on swipe up. Also keeping in mind that the list items doesn't get hidden by footer's view.
I have made a animated.view in the footer's component and used animated.timing to gradually increase the height but it is not working correctly.
When running on Android, after scrolling the Flatlist and getting its content below the fixed ListHeaderComponent, when focusing the TextInput that lives inside the given header, the screen flickers and the list snaps back to scroll position y = 0.
On iOS everything runs as supposed.
Steps to reproduce:
Using the snack below, on Android, scroll the list and focus the input in the header, notice that the list snaps to new scroll position where y = 0.
Snack, code example, screenshot, or link to a repository: snack
FlatList have the same props as ScrollView and on Android when you focus on the input the ScrollView scroll to the input which in your case it's the first element.
You can avoid that in IOS but on Android, unfortunately, there's still no way to archive it, I prefer you move the view of the header out from the FlatList if it's a requirement or you can keep it the way it's.
I have some dynamic content which I have placed inside a ScrollView.
As per the content's height it makes scroll. Some times because of the content height there is no scroll. I just want to know is there any way to detect programmatically ScrollView container is scrollable or not depending on the content's height ?
If for a given height to the scrollview, the content is not fitting to
that height then automatically the scrollview is scrollable, otherwise
its just a normal view. It Depends mostly on the device height, Let
say for a small device the view is scrollable and for long devices,
that view is not scrollable.
It purely depends on the content, you are not able to figure out when it should be scrollable and when not.
Hope this helps...Thanks :)
I have a scrollView with a single Image in it. Initially the Image has the same width & heigth as the ScrollView.
I am trying to crop this image based on how the user have zoomed and moved the image. Basically, I want to know what part of the image is visible, so that I can crop it accordingly.
Im using expo's ImageManipulator to crop it, so I have that part covered. But to get the dimensions of what part of the Image is visible after zoom/drag is whats bugging me.
Much appreciated!
The logic here is to first fill the Image component inside the size of the ScrollView. This way, the size of the image will be equal to the size of the ScrollView.
First, you need to set directionalLockEnabled prop to false and horizontal prop to true to make the ScrollView scroll horizontally.
Then, set maximumZoomScale and minimumZoomScale props to make your ScrollView zoomable. Now, every time you zoom and scroll in your ScrollView it will fire onMomentumScrollEnd and onScrollEndDrag with the event parameter from which you can get the visible part of your ScrollView which is usually,
event.nativeEvent.contentOffset
event.nativeEvent.contentSize
event.nativeEvent.layoutMeasurement
Since your Image Component size is same as that of the ScrollView Component, it will give you the exact visible area of the image in the ScrollView.
For Detailed implementation example, you can refer to this file of the react-native-community/react-native-image-editor repository
I want to be able to scroll a child component so that it visible on screen. How can I tell a react-native ScrollView or ListView to centre, or at least move to a certain component?
Both ScrollView and ListView have method scrollTo, so you can calculate position where you need to scroll