Giphy 2
Created on Aug 22, 2018


Giphy is an online database and search engine that allows users to search for and share animated GIF files (wiki). I knew about this interesting service while I was working on my Ionic-yahoo-messenger-ui but I didn't spend time on it. Lately, during the development of Ionic-tinder-ui, I found it again as a undeniable feature, so nothing can stop me anymore. Then the plugin was made. This plugin will also be integrated into the Tinder 2 theme soon.

Not only the Giphy service itself, the source code also includes a beautiful and easy-to-implement Messaging UI with auto-expanding input and data structure.

I always take it serious to keep the code quality high, with clean and self-explained code. When purchasing this, you also get my latest "helper" snippets inside the package to make it more fun to code.

What's in the package

  • Ionic Project source code: based on the folder structure generated with Ionic CLI
  • No Backend code: this is just the UI, not a fully functional app. Data is mostly static dummy unless mentioned, e.g GIF search uses the real Giphy API


Download APK to preview the theme:

enter image description here giphy-2_demo.apk

Watch on Youtube

See how it works on Youtube:

Happy prototyping!


Note: All updates are for Ionic 3

Last updated: Dec 23 2018


  • First version


  • Fix pushed up Header


  • Re-organize Giphy and all related services into one module. Easier to integrate than ever.


  1. Messaging UI
  2. Giphy keyboard (GIF search tool)

Run locally

1.Install Ionic environment

$ npm install -g @ionic/cli@6.12.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


Sample data structure for the messages template is pretty straight-forward. You will find it in pages/message/message.ts

this.messages = [
        isMe: true,
        type: 'image',// text || image
        body: '',
        timestamp: 'Oct 10, 2017 9:47am'
        isMe: false,
        avatar: 'assets/img/hieu.png',
        type: 'text',// text || image
        body: 'Hey yo what\'s up?',
        timestamp: 'Oct 10, 2017 9:48am'
        isMe: true,
        type: 'image',// text || image
        body: '',
        timestamp: 'Oct 10, 2017 9:50am'
        isMe: false,
        avatar: 'assets/img/hieu.png',
        type: 'image',// text || image
        body: '',
        timestamp: 'Oct 10, 2017 9:52am'
        isMe: true,
        type: 'text',// text || image
        body: 'Where are you, buddy?',
        timestamp: 'Oct 10, 2017 9:53am'
        isMe: false,
        avatar: 'assets/img/hieu.png',
        type: 'text',// text || image
        body: 'I\'m almost there',
        timestamp: 'Oct 10, 2017 9:53am'

Giphy module is now a folder under src/giphy enter image description here

After importing into your app.module.ts

import { GiphyModule } from '../giphy';

You can start to use the main component inputWithGiphy in your message UI

<ion-footer [keyboardAttach]="content" no-border>

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


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


[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

More Like This

┐( ˘_˘ )┌
2024, by Hieu Pham