Unable to change View styling with containerStyle
AnatuGreen opened this issue · comments
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?
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
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}
...
`
Finally figured this out. I hope it helps someone in the future