How do I work with background in React Native? - reactjs

Question

In my app, I want to create some sort of parallax effect, just like this, where the content overlap the background : video
This is what I made in Figma: figma prototype
And this is what I currently have : current prototype
How do I allow the content to go over the picture and how am I supposed to only have the bottom of the picture for the background ? (I don't want to cut it since it could mess on other devices)
Here is my code :
import React from 'react'
import {ImageBackground,View, ScrollView, Text, StyleSheet, Dimensions} from 'react-native'
import {generalStyles} from '#gym-app/styles/general'
export default function MuscleScreen() {
const Image = require('../assets/muscles/abs.jpg')
return (
<ScrollView>
<ImageBackground source={Image} style={styles.background}>
<View style={[generalStyles.container, styles.overlap]}>
<Text style={generalStyles.title}>Abdominaux</Text>
</View>
</ImageBackground>
</ScrollView>
)
}
const styles = StyleSheet.create({
background: {
width: Dimensions.get('window').width,
height: (Dimensions.get('window').width / 16 * 9),
resizeMode: 'cover'
},
overlap: {
position: 'absolute',
top: (Dimensions.get('window').width / 16 * 9),
width: Dimensions.get('window').width
}
})
Thank you for your help !

Answer 1

Put your ImageBackground behind the ScrollView, e.g.
<View>
<ImageBackground />
<ScrollView />
<View>
Give ScrollView absolute position taking entire screen
As a first item in ScrollView, add blank space (empty View) with height of a
window you want for the picture
Capture current scroll position of
ScrollView with Animated.event
Interpolate that value so that it scrolls up slightly slower than ScrollView and apply it as transform translateY of your ImageBackground