Stack render broken?

[sarahkadar]

I am not sure what I am doing wrong.

Without stack, looking good:

With stack, all messed up:

Code is at https://github.com/KTamas/imdbinder/blob/master/Tinder.js

[esganzerla]

I'm not really sure why the renderStack function had these values inside, so I'm not making a PR, but I found that if you change the lines 331-335 (SwipeCards.js) to:

      let offsetX = "50%"
      let lastOffsetX = this.props.stackOffsetX;

      let offsetY = "50%"
      let lastOffsetY = this.props.stackOffsetY;

it was originally:

      let offsetX = this.props.stackOffsetX * cards.length - i * this.props.stackOffsetX;
      let lastOffsetX = this.props.stackOffsetX;

      let offsetY = this.props.stackOffsetY * cards.length - i * this.props.stackOffsetY;
      let lastOffsetY = this.props.stackOffsetY;

I believe it will work just fine. still scaling as well

[sarahkadar]

@esganzerla thanks, this fixes it! sort of. don't look very stack-ey anymore.

Though now I have yep/nope shown somehow reversed... and maybe is simply not working...

[pbassut]

@esganzerla That's exactly what gives the stacky look of it. Every card available gets slightly shifted to the lower-right.

[sarahkadar]

I figured out what I messed up: some default styles of create-react-native-app mess with it. so completely my fault.

[pbassut]

@KTamas mind sharing what that was?

[sarahkadar]

the default CRNA App.js has this:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

alignItems: center and justifyContent: center messes up react-native-tinder-swipe-cards.

[pbassut]

Right. I'm not using CRNA tho.

[sarahkadar]

Yeah. The default app.js add this style to the main container and that breaks things so it's not really a CRNA but more like a stylesheet issue I guess.

[YannzizTay]

@KTamas you need to set the stackOffsetX and you will be good try out stackOffsetX={2}