React-native: transparent view over ScrollView - react-native

Question

I'm having problems setting transparency for a View that is outside of the ScrollView. I'm using Expo. The idea is that when you scroll the long scrollview content, you should just about to see it behind the bottom view. I've tried the opacity property as well as setting the background color using rgba(x,x,x, 0.5) with no luck. It looks like anything outside the Scrollview is totally opaque in relation to the scrollview content behind it.
Basic Code (the link to the snack is below):
export default function App() {
return (
<View style={styles.container}>
<ScrollView>
<View style={styles.transparentWrapper}>
<Text style={styles.textElement}>This is some text wrapped in a transparent View</Text>
</View>
<Text style={styles.paragraph}>
Lorem....
</Text>
<Text style={styles.paragraph}>
Lorem ...
</Text>
</ScrollView>
<View style={styles.bottomPart}>
<Text style={styles.textElement}>This is some text. Its wrapping view is transparent but I cannot see the lorem text underneath it.</Text>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
},
paragraph: {
fontSize: 30,
marginBottom: 15,
},
textElement: {
color: 'blue',
},
transparentWrapper: {
position: 'absolute',
height: 100,
justifyContent: 'center',
top: 450,
left: 50,
backgroundColor: 'transparent',
zIndex: 999,
},
bottomPart: {
height: 50,
backgroundColor: 'transparent',
}
});
Full snack is here:
https://snack.expo.dev/#wastelandtime/scrollview-transparency
Here's an expected outcome. The top blue text is wrapped in a transparent view (and this is what it's supposed to look like) it's not a problem as it's within the ScrollView.
The bottom blue text does not seem to honour any transparency in terms of the scroll content behind it (I'd like just to see the blue text with complete transparency on the wrapping View.

Answer 1

it can be achieved without position: 'absolute', with negative margin in this way,
bottomPart: {
height: 50,
backgroundColor: 'transparent',
marginTop: -50, // add this
}
using negative top margin the text can be pushed upwards
snack link here https://snack.expo.dev/CJBbhSCzg

Answer 2

Setting bottomPart position to absolute and bottom: 0
bottomPart: {
height: 50,
backgroundColor: 'transparent',
position: 'absolute',
bottom: 0
}
You should get something like this.
You may also want to add marginBottom: 50, to the last element inside the ScrollView if you'll put a solid element inside the bottom part.