Comments (7)
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.
from react-native-deck-swiper.
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.
from react-native-deck-swiper.
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.
from react-native-deck-swiper.
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>
}/>
from react-native-deck-swiper.
@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...
from react-native-deck-swiper.
@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
from react-native-deck-swiper.
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
.
from react-native-deck-swiper.
Related Issues (20)
- Only renders 1 card out of more
- Default Background color prevents a linear gradient background HOT 2
- Disable bottom swipe just for first card HOT 1
- reRender HOT 5
- put more than one key
- Unable to change View styling with containerStyle HOT 3
- Play Video HOT 1
- Typescript:react-native-deck-swiper undefined is not an object (evaluation'card.image')
- Issues when using a draggable object on a card HOT 1
- Can't adjust when overlay label will appear on Android HOT 2
- Card be under of components when swiping
- TypeError: undefined is not an object (evaluating '_this.dimensionsChangeSubscription.remove')
- 🐛 Doesn't come back animatedly after dropping the card
- Changing the state of a component in the renderCard prop using the onTapCard prop. HOT 1
- Modal popup should render the same info that is being rendered onto the card HOT 1
- The swipe functionality does not work on the subsequent cards after swiping the first card. HOT 10
- swipeBack
- sorry. please delete this issue
- Double Tab?
- Speed up swipe back animation HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-deck-swiper.