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.
Related
Sorry if this has been asked previously, but I hadn't found a working answer.
I'm currently working on a simple app. The main screen features a vertical flatlist with user generated content. The header, though, is transparent and has a predefined height, so the user can see a background image; when the flatlist is scrolled, it covers this background image, which remains static. The goal is to give the user the feeling that they're covering this image, similar to the pull-up element on google maps, which covers the map to show more data.
This would be a simplified example of the current, working code, so you get the gist of it:
const HomeComponent = () => (
<View>
<ImageBackground source={require('../assets/background.png')}>
<Flatlist
headerComponent={<TransparentHeaderOfPredefinedHeight/>}
data={DATA}
renderItem={renderItem}
keyExtractor={item => item}/>
</ImageBackground>
</View> )
Up until here, everything is fine. The thing is, I would like to add a touchable button on this background, that is subsequently covered when the Flatlist is scrolled.
Here's the issue. I have no way to make the touch event propagate through the flatlist's header and reach this button. I tried using pointerEvents='none' and 'box-only' in different combinations, but whenever I was able to touch that button, I was in turn unable to scroll or to interact with the flatlist elements.
I also tried pushing the background image and button on the flatlist header, and using the vertical offsite of the flatlist scrolling to move these elements and simulate the flatlist scrolling over it. Unfortunately, the result was absolutely atrocious, lacking any kind of smoothness.
Does anyone know how I could implement this functionality? I can provide more info if needed. Thank you in advance!
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
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
I have this particular component above a Flatlist which renders my cards, and I want to make them both scrollable. I tried to nest them with a ScrollView:
<ScrollView>
<MainImage/>
<FlatList />
</ScrollView>
It works but my flatlist lost its ability to constrain memory, since I have a lot of data to render the app lags till crash.
If remove the ScrollView from my MainImage component it gets stuck on the screen and the cards scrolls behind it which is not cool.
<View>
<MainImage/>
<FlatList/>
</View>
How do I do to both components be able to scroll without losing performance?
obs: I'm using version 0.55 of react native
You can also use collapsible navbar above the flatlist rather than using separate MainImage Component. People are doing that and example is given in this link (https://medium.com/appandflow/react-native-collapsible-navbar-e51a049b560a)
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