Ionic Tinder 5 Tabbed View (Ionic 5)
Created on Oct 18, 2020

Introduction

It's Tinder UI again with Tabbed View. I saw Tinder doing A/B Testing for their new Tabbed View layout since last year and I made Tinder UI 2020 (Tinder 4) back then. They seem to make it official now (Oct 2020) and I think "Let's make an Ionic 5 version out of it!"

I'm an UI/UX lover. I see nice UI, I clone. That's all!

I always take it serious to keep the code quality high, with clean and self-explained code.

Preview

Download APK to preview the theme:

enter image description here tinder-5-tabbed-view_demo.apk

Watch on Youtube

See how it works on Youtube: https://youtu.be/kaBSWidJ0bg

Happy prototyping!

Changelog

Note: All updates are on Ionic 5

Last updated: Oct 19, 2020

v1 (May 5, 2020)

  • First version

v2 (May 26, 2020)

  • Significantly improve the performance on older Android devices
  • Fix status bar color on Android
  • Some UI bug fixes

v3 (Oct 19, 2020)

  • Update Tinder UI (Oct 2020) with tabbed view
  • Add Passions edit page
  • Some bug fixes and improvements

Screens

  1. Welcome
  2. Explore (Swiping)
  3. Matched
  4. Me
  5. Settings
  6. Profile
  7. Profile Edit
  8. Passions Edit
  9. Top picks - Likes
  10. Messaging
  11. Feed
  12. Chat (including Giphy keyboard)
  13. Dark mode switch

Never seen Tinder in Dark mode? This is it!

Run locally

1.Install Ionic environment

$ npm install -g cordova
$ npm install -g @ionic/cli@6.8.0

2.After purchasing, download the zip file containing the entire demo app and unzip

3.Go inside the extracted folder

4.Install all dependencies

$ npm install

5.Start local server

$ ionic serve

6.Your default browser should now automatically open the template

Notes

1.Modify the default theme colors to match Tinder's colors in src/sass/variables.override.scss

:root {
  /** primary **/
  --ion-color-primary: #fd5068;
  --ion-color-primary-rgb: 253,80,104;
  --ion-color-primary-contrast: #ffffff;
  --ion-color-primary-contrast-rgb: 0,0,0;
  --ion-color-primary-shade: #df465c;
  --ion-color-primary-tint: #fd6277;
  ...

2.I personally like the look on iOS so I forced the theme to iOS mode. You can config that to suit your need

# in src/app/app.module.ts
    IonicModule.forRoot({
      mode: 'ios',
      backButtonText: '',
    }),
    ...

3.Dependencies

npm install --save angular2-swing lodash

4.Fix angular-2-swing

# polyfills.ts
/***************************************************************************************************
 * APPLICATION IMPORTS
 */
 (window as any).global = window;

Build with capacitor

First of all, make sure that you can Run Locally (see the instruction above).

# build web asset (to folder www)
$ ionic build

# add platform (ios or android)
$ ionic capacitor add ios

# prepare app icons and splash images
$ npm run resources

# copy web assets into the native project
$ ionic capacitor copy ios

# open Xcode, then build the native app from there
$ ionic capacitor open ios

# OR run in live-reload mode
$ ionic capacitor run ios -l --external

See more:

Ionic - iOS Development

Ionic - Android Development

Migrating a Web App Using Cordova to Capacitor

Contact

If you need technical support or have any questions, don't hesitate to send me a message: mr_hie@yahoo.com

Homepage: https://www.takethatdesign.com

<StartOfPromotion>

[PROMO] Ionic 4 Bundle: 4 in 1 - Best Seller

My best Ionic 4 products (3 themes + 1 plugin) are now on sale with promotion code BUNDLE4. Please click the button below for more information.

Purchase Externally

</EndOfPromotion>

More Like This