meliorence / meliorence/react-native-snap-carousel

How to make the `contentContainer` background transparent?

Open
#802 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
10.5k
Forks
2.3k
PR merge metrics
No merged PRs in 30d

Description

### 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'
}}
```
![image](https://user-images.githubusercontent.com/1225301/104700170-9baa2880-56c8-11eb-85ae-6b25886b6a55.png)

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

![image](https://user-images.githubusercontent.com/1225301/104700218-acf33500-56c8-11eb-8c5a-72fbc7f39709.png)

### 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](https://snack.expo.io/) in which the issue can be reproduced. Please follow [the guidelines](https://stackoverflow.com/help/mcve) 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.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reviewing the contentContainerCustomStyle usage in the react-native-snap-carousel documentation and reproducing the reported behavior with the React Native 0.63.2 and react-native-snap-carousel 3.9.1 versions. A useful outcome would be a documented, reproducible explanation of how the carousel background interacts with the map, or a clearly scoped change if the behavior is a library defect.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react-native
Domain
mobile
Issue type
Documentation
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
20/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.