mrcflorian

Posted on Apr 14, 2020 • Edited on Oct 17, 2022 • Originally published at instamobile.io

Integrating Giphy API in React Native

#reactnative #api #mobile #development

Giphy is the largest library providing two of the most popular forms of media widely used for chatting is GIFs: Graphics Interchange Format and stickers. The most popular social media apps such as WhatsApp, Instagram, Slack, Skype and Twitter(to mention a few) use Giphy's technology to provide GIF content and Stickers for their chat users to improve chatting experience.

In this article, we're going to dive into integrating Giphy API in react native in three steps. We've recently built this integration in one of our chat apps at Instamobile, so we're sharing part of our code here.

1. Get an API key

Head over to the developer page and create an account on a chrome browser. Your dashboard should look like this.

Click on the 'Create an App' button to create and API. You will be prompted to select an option between API or SDK. For this article we are focusing on the API so click on the API option.

Fill out your app name and app description then create app. Your dashboard should be well set up with your API key on it.

2. Fetch data from Giphy API

And subsequently create states to hold the gif data and the term we search for.

const [gifs, setGifs] = useState([]);
const [term, updateTerm] = useState('');

In your App.js, create a fuction fetchGifs() in your App component.

async function fetchGifs() {
  try {
    const API_KEY = <API_KEY>;
    const BASE_URL = 'http://api.giphy.com/v1/gifs/search';
    const resJson = await fetch(`${BASE_URL}?api_key=${API_KEY}&q=${term}`);
    const res = await resJson.json();
    setGifs(res.data);
  } catch (error) {
    console.warn(error);
  }
}

That's all you need for fetching gifs from the Giphy API in React Native.

3. Display the GIFs in React Native

Let's create a an image list component to hold the GIFs in an image format and we have this:

import React, {useState} from 'react';
import {View, TextInput, StyleSheet, FlatList, Image} from 'react-native';

// do not forget to add fresco animation to build.gradle

export default function App() {
  const [gifs, setGifs] = useState([]);
  const [term, updateTerm] = useState('');

  async function fetchGifs() {
    try {
      const API_KEY = <API_KEY>;
      const BASE_URL = 'http://api.giphy.com/v1/gifs/search';
      const resJson = await fetch(`${BASE_URL}?api_key=${API_KEY}&q=${term}`);
      const res = await resJson.json();
      setGifs(res.data);
    } catch (error) {
      console.warn(error);
    }
  } /// add facebook fresco

  function onEdit(newTerm) {
    updateTerm(newTerm);
    fetchGifs();
  }

  return (
    <View style={styles.view}>
      <TextInput
        placeholder="Search Giphy"
        placeholderTextColor='#fff'
        style={styles.textInput}
        onChangeText={(text) => onEdit(text)}
      />
      <FlatList
        data={gifs}
        renderItem={({item}) => (
          <Image
            resizeMode='contain'
            style={styles.image}
            source={{uri: item.images.original.url}}
          />
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  view: {
    flex: 1,
    alignItems: 'center',
    padding: 10,
    backgroundColor: 'darkblue'
  },
  textInput: {
    width: '100%',
    height: 50,
    color: 'white'
  },
  image: {
    width: 300,
    height: 150,
    borderWidth: 3,
    marginBottom: 5
  },
});

Important: For you to make GIFs appear on your android device you have to add the following to the list of dependencies in your android/app/build.gradle.

implementation 'com.facebook.fresco:fresco:2.0.0'
implementation 'com.facebook.fresco:animated-gif:2.0.0'

There you have it

You can easily search for Giphy stickers by replacing the BASE_URL

http://api.giphy.com/v1/stickers/search

This is what Giphy API stickers look like:

Giphy API provides developers with two more easy but powerful endpoints trending

GIPHY Trending returns a list of the most relevant and engaging content each and every day. Our feed of trending content is continuously updated, so you always have the latest and greatest at your fingertips.

And translate

GIPHY Translate converts words and phrases to the perfect GIF or Sticker using GIPHY's special sauce algorithm. This feature is best exhibited in GIPHY's Slack integration.

If you're interested in getting even more feature implementations in your React Native apps, check out these awesome mobile app templates.

At Instamobile, we're building React Native Templates and iOS App Templates to help developers create their mobile apps much faster.

Resources