Tinder-style Cards with NativeScript – Love at First Swipe

Tinder-style Cards with NativeScript – Love at First Swipe

Whoever understands me, my design visual, and my some ideas about UI and UX understands that:

1. I love pretty colors 2. I prefer a good deal of pretty colors all over my apps 3. I prefer cards 4. If there are cards with pretty colors it’s 💰

Another enjoyable reality that I was previously employed at a dating web site, where we matched eligible singles…sort of like Tinder except it was more matrimonial-oriented than otherwise about me is. Online dating sites have interesting challenges that are UI. It isn’t surprising that the dating application should pioneer a really revolutionary UI: swipable cards. There is something really satisfying both physically and emotionally in swiping right and left to prepare your love life:

The famous Tinder swipable cards interface took the software shop by storm a couple of years ago, and because then other apps have actually used this sort of sortable card. The older Jelly software and Pinterest are a few examples that are good

Since NativeScript layouts support gestures and animations, it isn’t too hard to generate such a interface that is swipable. My first effort at developing a Tinder-style card software took place whenever I gave a lightning talk at Boston Ignite this past year. The premise behind my software was that, by digging in to the 23AndMe Genetics API, you could see your perfect match predicated on your percentage of Neanderthal DNA. Please don’t ask why i will be fascinated with Neanderthals, but we thought that they may have liked to have their own dating application. Neanderthals need love too.

Initially, We created a format that is card-swiping had one card dropped to the display screen, after which swiped away towards the left or the right. Because of this, the card is recycled, but only 1 card seems at the same time. I shared my code on NativeScriptSnacks.com, But you can away see right there are some difficulties with the layout.

First, the app does not behave love Tinder, in that only one card appears at the same time. 2nd, the cards often drop into view ahead of the image is rendered, ultimately causing an interface that is choppy. Read more