Search code examples
react-nativetransparency

React-native: transparent view over ScrollView

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.

enter image description here

Solution

  • 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