1

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

Wasteland
  • 4,889
  • 14
  • 45
  • 91
  • It seems to be working on the snack, if I remove opacity or change alpha channel I can see the effect. – A G Jun 07 '22 at 08:25
  • @AseemGautam The snack above does not seem to be working for me. I tried it in Expo Go on my iPhone as well as on Android/iOS simulated devices to the right of the snack code. The bottom View is not transparent for me at all (ie. I cannot see any of the scrollview lorem ipsum text at all) – Wasteland Jun 07 '22 at 08:34
  • Please change the background color of the container to red. Then remove opacity. Update alpha channel. You will see the difference. – A G Jun 07 '22 at 08:37
  • Ok. I've changed the .container background colour to red and can see that the bottom View got a red tint indicating some degree of transparency but I still cannot see the lorem ipsum text at all (I've changed the alpha channel to 0.1 and removed the opacity property). – Wasteland Jun 07 '22 at 08:46
  • Actually, I've changed the contentContainerStyle on the scrollview to have a green background but it was not reflected in any change of tint on the bottom View so not sure that actually works. – Wasteland Jun 07 '22 at 08:50
  • @Wasteland what is required? as in i can see the red opacity changing as per the rgba value – Gaurav Roy Jun 07 '22 at 09:14
  • you want both the colors to merge? – Gaurav Roy Jun 07 '22 at 09:14
  • Ideally, the end goal is to have the bottom View itself to be fully transparent in this case (no colour, just seeing the loren ipsum text from the scrollview behind it). The 'This is some text' text element should not be transparent (it's going to be a button). Hope that makes sense – Wasteland Jun 07 '22 at 09:22
  • I've updated the description and the code above to make it clearer. Apologies if it wasn't clear before. – Wasteland Jun 07 '22 at 09:43
  • Are you still looking for the answer? – Hugo Gresse Jun 14 '22 at 11:53
  • @HugoGresse ideally yes, something without position: absolute, if possible. If I don't get any other answer, I am going to award the bounty to the answer below but I'd rather not use position: absolute on that bottom component as there're going to be a couple of elements inside it. – Wasteland Jun 14 '22 at 14:06

2 Answers2

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

Rohit S K
  • 1,178
  • 3
  • 13
0

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.

ra_barbaras
  • 14
  • 4
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jun 11 '22 at 06:41