alexbrillant / react-native-deck-swiper

tinder like react-native deck swiper

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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