Meteor-React-Ionic Mobile App Part 6.5: Tinder Optimization for iOS

A number of people have asked me to write another article that goes deeper into the Tinder interface to optimize it for iOS. Those of you who have checked out the live version here probably noticed that the version I deployed is smoother than the result of the last article.

In this article, I’ll go over a few things that will make your app work on an iOS device and will make everything run more smoothly. We’re going to start off where we ended the last article. You can build up to it by reading the article, or you can just clone the repo here.

Step 1

The first thing you need to do in order for React touch events to work on iOS is set your cursor to pointer on anything you want to initiate a touch event. We’re going to set this on our card because that’s the element our touch event affects:

.card {
  cursor: pointer;
}

This might feel like a hack. That’s because it is. But it’s a fairly unobtrusive hack and it’s what everyone else is already doing.

Step 2

Now we need to deal with webkit. In React, your webkit styles have a different format: instead of -webkit-<property>, you use Webkit<Property>. So in our example, we need to add the following to our Card component for our transform and rotate:

render() {
  let cardStyle = {
    transform: "translate(" +
      this.state.x + "px," +
      this.state.y + "px)" +
        " rotate("+this.state.x/10 + "deg)",
      transition: this.state.dragging,
      WebkitTransform: "translate(" +
        this.state.x + "px," +
        this.state.y + "px)" +
        " rotate("+this.state.x/10 + "deg)",
      WebkitTransition: this.state.dragging
  }

Step 3

The last thing we need to do is prevent scroll on our touch move, so that we are only dragging the card and not accidentally scrolling at the same time. We can do this by adding a simple e.preventDefault():

.moveCardInit(e) {
  e.preventDefault();
  this.setState({
    initialX: e.touches[0].pageX,
    initialY: e.touches[0].pageY,
    dragging: "none"
  })
},
moveCard(e) {
  e.preventDefault()
  deltaX = (e.touches[0].pageX - this.state.initialX)
  deltaY = (e.touches[0].pageY - this.state.initialY)
  this.setState({
    x: deltaX,
    y: deltaY
  })
},
moveCardEnd(e) {
  e.preventDefault()
  if (e.changedTouches[0].pageX < 50) {
    this.setState({

And there you have it! Your interface should run much smoother once you make these changes.

Another thing to note is that on mobile, your performance will suffer greatly if you have a shadow under the currently animated card. For another performance boost, remove the shadow from the card either entirely or on motion.

Sam Corcos is the lead developer and co-founder of Sightline Maps, the most intuitive platform for 3D printing topographical maps, as well as LearnPhoenix.io, an advanced tutorial site for building scaleable production apps with Phoenix and React.

Additional

• Part 1: The Basic Template
• Part 2: Passing in Data
• Part 3: Tabs and Modals
• Part 4.1: Users and Settings
• Part 4.2: Users and Settings
• Part 4.3: Users and Settings
• Part 5: Twitter Login
• Part 6.1: Tinder Transitions
• Part 6.2 Tinder Selector
• Part 6.3 Tinder Data
• Part 6.4 Tinder Interface
• Part 6.5 Tinder Optimization for iOS