You could either do this by using Animated.createAnimatedComponent for your own component, wrap a view inside an Animated.View or just use Animated.Image. In order to change its size dynamically, the view must be animated. The image is the first item in the scroll view. However, this could cause performance problems, since more data is sent (over the bridge - serialized and sent to the JavaScript environment). In order to improve scroll event accuracy (allowing it to fire more frequently), we can set scrollEventThrottle to 1. For this, we use the ScrollView callback onScroll and map the offset to the Animated.ValueXY() reference and using the Animated.event for simplification, as you can see in the code. Next, we need to track the y position of the content offset, so that we can change the image style later. Since this is enabled by default, we should be good here. This can be manipulated by changing the boolean bounces prop. When hitting the end of the scroll container in one direction, you may see a bounce of the content. This allows us to have content in a scrollable container. The basis of all here is the React Native ScrollView. The source code / component can be found on Github. In one of my current React Native apps, which is with full End-To-End and CI/CD setup, I have implemented this feature.
I describe how this can be easily done in React Native. Scrolling up a list of items with an image on top, it can be a nice feature to zoom in the picture naturally. Examples for this could be found in the Spotify app, where an album cover is shown first, followed by a list of its songs. This could be to showcase the content of the page. When creating a scroll view for a mobile app, a common principle could be to have an image on the very top of the list.
0 kommentar(er)
