Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unable to change View styling with containerStyle #379

Closed
AnatuGreen opened this issue Jan 3, 2022 · 3 comments
Closed

Unable to change View styling with containerStyle #379

AnatuGreen opened this issue Jan 3, 2022 · 3 comments

Comments

@AnatuGreen
Copy link

I don't know if I am getting this wrong, but I have tried all I can to change the styling of the view that contains the card swiper and cards, especially the background color, because I do not want to use the background color there. I first tried changing it from the stylesheet and it just does not work, (I could edit the height but the bgc refused), then I removed the reference to the stylesheet and added this instead but it still does not work and I have not seen this issue discussed.

What I did:

<View containerStyle={{backgroundColor: '#4FD0E9', height: 400}}>

Why is this not working?

@AnatuGreen
Copy link
Author

Even when I do this:

<View style={{backgroundColor: 'red', height: 400}}>

the styling changes the height but the background color stays on the default #4FD0E9

@AnatuGreen
Copy link
Author

Ok, I finally solved this, I figured out that I had to enter the containerStyle inside the Swiper. Now I can do anything I want to the container containing the Swiper. Still relatively new to the react native and this package. Forgive my oversight. I will leave this case here for someone else who may come across this issue in the future. Thanks

Solution:

` ....
<Swiper
ref={swiper => {
this.swiper = swiper
}}
onSwiped={() => this.onSwiped('general')}
onSwipedLeft={() => this.onSwiped('left')}
onSwipedRight={() => this.onSwiped('right')}
onSwipedTop={() => this.onSwiped('top')}
onSwipedBottom={() => this.onSwiped('bottom')}
// removed onTapCard={this.swipeLeft}
cards={this.state.cards}
cardIndex={this.state.cardIndex}
showSecondCard={false}

      containerStyle ={{backgroundColor: 'red'}}

      cardVerticalMargin={80}
      renderCard={this.renderCard}

...
`

@AnatuGreen
Copy link
Author

Finally figured this out. I hope it helps someone in the future

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant