Immutable view inside zoomable scrollview [react-native] - react-native

i'd like to know if it's possible to put a View inside a zoomable ScrollView but when the user zooms the scrollview, the view's size wont change. The view must be inside the scrollview because the image on the scrollview is bigger than the screen and i`ll render the view overlaying the image in a precise x:y position.
thanks

kinda extreme go horse but if you put the prop onScroll inside scrolView you can get the zoom and divide the width/height of the view by the zoomScale
onScroll={(event) => this.setState({ zoomScale:event.nativeEvent.zoomScale})}

Related

React Native onScroll problem when holding my finger up to ScrollView

<ScrollView
onScroll={(event)=>{
const top = event.nativeEvent.contentOffset.y;
setTop(top);
}}
>
With my code above contentOffset y updated only when scroll ScrollView abruptly without holding my finger up to ScrollView but if I hold my finger up when scroll the contentOffset y doesn't updated.
I noticed this happening for all onScroll function.
What I want to achieve:
I want on scroll ScrollView contentOffset y update.
Using Animated.ScrollView instead of ScrollView maybe help you. Have a look at this https://eveningkid.medium.com/animated-and-react-native-scrollviews-de701f1b1ce5

Why aren't all items displayed in the ScrollView?

I have a Flatlist inside a ScrollView with 100 items, but no matter what height I give to the ScrollView or Flatlist, there are always just 18 items displayed on my Phone. After that the slider of the ScrollView is still scrolling down, but the list ends after 18 items. I want to be able to scroll through the complete list of items with the ScrollView containing the FlatList. I am using a Samsung Galaxy S8+ as a test device.
Here is a snack of the problem: https://snack.expo.io/#christophhummler/stickyheaderscrollscreens
Thanks for your help :)
I think it has to do with the scrollEnabled={false}, set it to true or remove the prop altogether otherwise it may be your todos array
Edit
Since you want to create a sticky header you must set the height to be the device height of screen + height of header, change styles.scrollView to :
scrollView: {
height: height + 200,
}
also on android there is an issue of nesting scrollviews, to enable a nested scrollview add the nestedScrollEnabled prop:
<FlatList
...
nestedScrollEnabled={true}
/>
You will have to implement logic to enable the Flatlist scroll view when the specific threshholds are met. It works at the moment in conjunction with scrollEnabled={true}
i hope this helps

React Native - Set parent match width for component inside a ScrollView that is inside a Modal

I have a Modal with a ScrollView inside and some items inside the ScrollView. When the Modal popped up, the item's border is not aligned to the Modal's border. Some components like TextInput become thinner and some is overflow. It's not like this outside of Modal.
This can be solved by setting component's offset explicitly relative to Dimensions.get('window').width. But I just want an implicit solution.
I've done trying setting style properties for ScrollView's contentContainerStyle and also putting a wrapper View inside the ScrollView. None of them works.
I've made it after wrap ScrollView with a View with style flexDirection : 'row'. Yet to figure out why

ScrollView only scrolls when placing finger inside of an input

I'm having a weird behavior here and I can't figure out what's going on. I have a ScrolView with a form and some inputs and labels inside and it seems to only want to scroll when you place your finger (or cursor in the demo) over an input or a switch and it doesn't scroll when placing your finger anywhere else in the ScrollView
I put together an Expo Snack to show the code and if you run in the emulator and attempt to scroll the ScrollView by placing the cursor over one of the labels or on the edges of the ScrollView it won't scroll but if you place the cursor over an input or a switch it scrolls just fine
https://snack.expo.io/#jordanr/weird-scrollview-bahavior
The issue is because Touchable effects in your TouchableWithoutFeedback are blocking the effects of ScrollView, therefore you need to reset your responder by wrapping the Content inside the View
<Content>
<View onStartShouldSetResponder={() => true}>
//... Rest of the code
</View>
</Content>
Also don't use ScrollView since NativeBase uses KeyboardAwareScrollView from the package react-native-keyboard-aware-scroll-view in the <Content/>

anchoring an image at the bottom of the content area of a flatList in react native

For an app i'm working on the designer wants a background image to a scrollview which would be anchored to the bottom of the content area of the scrollview.
So let's say the screen is 500px tall,the scrollview on content is 1000px, the image to display in the background is 200px.
How can i make it so that the background of the flatlist is empty until the user scroll and reveals the bottom 200px of the content of the scrollview.