How to make the `contentContainer` background transparent?

jack2684 commented 3 years ago

Question

How to make the contentContainer background transparent? As you can see it is the red part in the screen shot.

contentContainerCustomStyle={{
  alignItems: 'center',
  justifyContent: 'center',
  backgroundColor: 'red'
}}

I have tried backgroundColor: 'red' -> backgroundColor: 'rgba(255, 0, 0, 0.5)', no luck, it becomes like this:

Environment

Environment: React: 16.13.1 React native: 0.63.2 react-native-snap-carousel: 3.9.1

Target Platform: Android (N/A) iOS (14.0)

(Write your answer here.)

Expected Behavior

I expect the red part become transparent, and I am able to see the map behinds it, however it is not.

Actual Behavior

It seems there is another white background that blocks the view to the true background

Reproducible Demo

(Paste the link to a Snack example in which the issue can be reproduced. Please follow the guidelines for providing a Minimal, Complete, and Verifiable example.)

Steps to Reproduce

(Write your steps so that anyone can reproduce the issue in the Snack demo you provided.)

1. 2. 3.

normanzhao commented 3 years ago

Hi, wrap the Carousel in a separate view. I had the same problem, but found out that the examples they provided didn't. Refer to this: https://snack.expo.dev/@vitkor/carousel-simple-example

dohooo commented 3 years ago

Sorry, please allow me to advertise for my open source library! ~ I think this library react-native-reanimated-carousel will solve your problem. It is a high performance and very simple component, complete with React-Native reanimated 2

meliorence / react-native-snap-carousel