alexbrillant / react-native-deck-swiper

tinder like react-native deck swiper
ISC License
1.54k stars 460 forks source link

Unable to change View styling with containerStyle #379

Closed AnatuGreen closed 2 years ago

AnatuGreen commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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