I have a horizontal ScrollView in react native. This ScrollView contains two elements. For the sake of simplicity lets call these elements blue and green.
Over the ScrollView I also have absolutly positioned View which I can drag left and right.
What I want to achieve is that when I'm scrolling the scrollview from left to right, the blue area should not pass the purple View. Scrolling should just stop in the right hand direction. Scrolling to the left must work as usually.
One solution I can think of is to make the blue area very wide and then set the min offset to the scrollview based on the position of purple draggable view. But I'm not sure if it's doable with ScrollView
<ScrollView
...
minOffset={positionOfThePurpleView}
/>
Can anyone think of a better solution?
This is more of an answer for whoever has still this question
In order to reduce the limit of a screen you can limit it using a <View> component inside a Scrollview
in this case:
<ScrollView>
<View style = {{width: (your limit here)}}>
code here
</View>
</ScrollView>
in case you want to adjust the height
<ScrollView>
<View style = {{height: (your limit here)}}>
code here
</View>
</ScrollView>
Hope it works for someone
Related
I'm building an app in React Native, aiming to be used on iOS and in the future Android.
To start, I'm trying to build a simple UI: a header at the top (avoiding the notch), a footer at the bottom, and a multiline input that expands to fill however much vertical space is left. I would like the footer to move up when the keyboard is showing, so that it's right above the keyboard.
In terms of components, I have:
<SafeAreaView>
<KeyboardAvoidingView>
<Header />
<View>
<TextInput multiline numberOfLines={#}/>
</View>
<Footer />
</KeyboardAvoidingView>
</SafeAreaView>
I'm having trouble accomplishing the desired UI though. Problems include:
I've tried giving Header and Footer flexGrow of 0 and the middle View a flexGrow of 1, but it doesn't cause the middle View to grow vertically
Ideally I would not have to specify how many lines the multiline TextInput is - the user can just keep typing, and if the contents get super long, that input section will scroll
On the web view, I see the middle View and TextInput, but on my phone (via Expo Go), the middle View and TextInput are always completely collapsed unless I explicitly specify a height or flexBasis on one of the two.
Any pointers on what I'm missing?
I am running into an issue and the issue is i am working with scrollview and Flat List basically i have a view in which as we can see static view on top and some tabs on the centre of the screen and i am using flat list to render the tabs data which is quite large but i want to to scroll top static profile view while i scroll Flat List so the upper profile will also scroll while scrolling Flat list for that i wraps a scrollview on the root of this view but when i scroll flat list scroll and scrollviews scroll conflicting with each other and as a result i can't scroll to bottom or top in centre of the Flat List, any suggestion about this ?
return (
<ScrollView nestedScrollEnabled style={{flex: 1}}>
<ProfileView />
<ProfileTabView />
</ScrollView>)
I want to render Flat List inside scrollview and they shouldn't make any conflict with each other while scrolling and scroll not shouldn't be stuck in the centre of Flat List.
I think this is what you are looking for react-native-scrollable-tabview. Do comment if you want more guidance.
I have a simple overlay component that is rendered on top of certain items in a Flatlist. The list item component which is the parent component of the overlay sends down a dimensions object that lives on its state and gets updated onLayout. The overlay doesn't stretch quite fast enough when you go from portrait to landscape mode.
component: <View style={style.container}>
<View style={[style.overlay, dimensions()]} />
</View>
Any ideas how to make this respond faster?
I was able to achieve good results by using the solution from here:
Stretch Absolute Positioned element
How can I get the actual screen height when virtual keyboard shows up? I need to readjust the view height dynamically when keyboard is active and in-active.
<View style={styles.container}>
<TextInput
autoFocus={true}>
/>
<View style={styles.content}></View>
<View>
When the keyboard is present and dismissed how can I calculate the active screen height,
content:{ height: ?}
Use this KeyboardAwareScrollView instead of KeyboardAvoidingView
keyboard avoiding view doesn’t quite work with the last element, and setting padding/margin didn’t work. So you have to add a new element to bump everything up a few pixels.
Try with KeyboardAwareScrollView which makes the scrolling interaction pretty seamless and gives a lots of other benefits like resetScrollToCoords and manage height calculation by its end.
KeyboardAvoidingView
It is a component to solve the common problem of views that need to move out of the way of the virtual keyboard. It can automatically adjust either its position or bottom padding based on the position of the keyboard.
SOURCE:
https://facebook.github.io/react-native/docs/keyboardavoidingview.html#relativekeyboardheight
I'm trying to get an element in a scrollview to always stay to the left of the screen. Kinda like the number rows in Excel. They stay to the left when scrolling horizontally but scroll also down when scrolled vertically. So far I tried animating the element by hooking up the onscroll element to it. It does work but it feels very choppy. It is fast but not fluid. Almost looks like the element is vibrating.
Are there any other techniques in react native to get the desired result? Here the important lines I'm using.
scrollPositionX: new Animated.Value(0),
scrollEventThrottle={16}
onScroll={Animated.event([{nativeEvent: {contentOffset: {x: this.state.scrollPositionX}}}] )}
<Animated.View style={[styles.times, {
transform: [{translateX: this.state.scrollPositionX}]
}]}>
...
</Animated.View>
A crude way to do it is to render the sticky columns outside of the horizontal ScrollView. Just make sure your stick and non sticky cells end up being the same height so everything lines up.
If you want to scroll vertically as well, wrap them both inside of another ScrollView.
<ScrollView>
<View>
// render the sticky cells
</View>
<ScrollView horizontal={true}>
// render the non sticky cells
</ScrollView>
</ScrollView>
The problem is that if you have a lot of rows, especially with more complex components within them, you'll have performance issues.
ListViews are better at handling lots of data, but I haven't found a way to make use of them for this scenario. You'd need one for both the sticky column and normal cells, and there's no way to keep them in sync without watching onScroll as you're doing.
I'm hoping someone has better way to do this though. I really need this functionality as well.