React-native-deck-swiper: Possible to use flex instead of absolute positioning on the swiper?

[lsps9150414]

Thanks for the great work! Just wondering if it's possible to use flex layout on the Swiper instead of absolute so it's easier to config it's layout?

I have't dive deep into the src code to learn if position: absolute is critical. If it's not I'm willing to help :)

[alexbrillant]

I don't know how implement this yet, but I think that would be feasable. I would be happy to have this feature added. I will look more into it next week, but feel free to submit a pull request if you have any ideals.

[mschiele]

Are there already some updates for this issue? The absolute layout is causing in my app problems as well. My screen is divided in two parts, a map on top and the swiper beneath. The has a calculated height of 627 which is somehow completely wrong (too big) and therefore on top of my map...

  <Swiper ref={(ref)=>{this.deckSwiperRef=ref}} cardVerticalMargin={20} backgroundColor={'white'} cards={this.props.encounteredTags}  onSwipedAll={this._onSwipedAll} onSwipedRight={(i) => {this._onSwipeRight(i)}} onSwipedLeft={(i) => {this._onSwipeLeft(i)}}
  renderCard={(item) =>
      <View style={{height:190, padding: 10, borderRadius: 2, borderWidth: 1, borderColor: '#ccc', backgroundColor: 'white'}}>
        <Row style={{height: 80}}>
          <Col size={1} style={{alignItems: 'flex-end', justifyContent:'center'}}>
            <Thumbnail source={Images.markerIssue} />
          </Col>
          <Col size={1} style={{alignItems:'flex-start', justifyContent:'center'}}>
            <Text>{item.type.name}</Text>
            <Text note>{item.category.name}</Text>
          </Col>
        </Row>
        <Row style={{height: 80,}}>
          <Col style={{alignItems: 'flex-end', justifyContent: 'center', paddingRight: 10}}>
            <TouchableOpacity onPress={(e) => {this._downVoteTag(item)}} style={{...styles.roundedButton, backgroundColor: 'red'}}>
              <Icon style={{color: 'white'}} ios='ios-thumbs-down' name='thumbs-down' android='md-thumbs-down'/>
            </TouchableOpacity>
            <Text>downvote</Text>
          </Col>
          <Col style={{alignItems: 'flex-start', justifyContent: 'center', paddingLeft: 10}}>
            <TouchableOpacity onPress={(e) => {this._upVoteTag(item)}} style={{...styles.roundedButton}}>
              <Icon style={{color: 'white'}} ios='ios-thumbs-up' name='thumbs-up' android='md-thumbs-up'/>
            </TouchableOpacity>
            <Text>upvote</Text>
          </Col>
        </Row>
    </View>
  }/>

[alexbrillant]

@mschiele feel free to submit a pull request if you have any ideal on how to solve this. I am still looking for a solution. Also, the absolute positioning seems necessery...

[webraptor]

Why switch to flex when you can wrap your swiper in a with _position: 'relative'_ and then the swiper will be configured based on the parent?
With position absolute and zIndex it is really easy to style and animate the cards on top of each other, create a stack effect and so on.
With flex you won't be able to stack them on top of each other and it will complicate everything.

@mschiele not sure if you fixed your problem yet, but if you use flex for the map and a view on the bottom area of the screen, have the view with _position: 'relative'_, then the swiper will be positioned absolutely within the view (not the entire screen), therefor, it will not flow on top of your map.

Good read on zIndex
https://www.smashingmagazine.com/2009/09/the-z-index-css-property-a-comprehensive-look/
Absolute & relative positioning
https://css-tricks.com/absolute-positioning-inside-relative-positioning/

Once you understand the concepts behind the 3, you'll be able to easily play around without any issues.

[webraptor]

What would be better would be to change the sizing of the cards relatively to parent or hardcoded via props. Right now sizing is done based on device size.

[alexbrillant]

@webraptor thanks for helping @lsps9150414. I think I will close this issue because flexbox wouldn't allow me to build all the features I want

[lsps9150414]

Hey guys, you might be interested how NativeBase implement it:
https://github.com/GeekyAnts/NativeBase/blob/master/src/basic/DeckSwiper.js

Though currently lack sufficient functionality, it's really easy to control the layout of their swiper and swiping gesture is only capture on the card instead of the card container.