Adding GIFs to Your React Native Application Using Giphy API

Giphy is the largest library providing one of the most popular forms of media widely used for chatting –  GIFs or 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 the chatting experience.

At Instamobile, we’ve added Giphy integration into all of our chat apps, so we’re going to describe our experience of integrating the Giphy API into any React Native app.

In this article, we’re going to dive into integrating Giphy API in React Native in four simple and quick steps.

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 a new 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

Additionally, we’ll 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);
  }

}

Feel free to use this method into any of your React Native apps to save 20 minutes of coding, testing and debugging.

3. Display the GIFs in the React Native UI

Let’s create an image list component to hold the GIFs in an image format. To achieve this, we wrote the code below:

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'

Now simply run the app, and you’ll see something like this on the main screen of you React Native app:

4. Display advanced Giphy units such as stickers, trending GIFs and best matches

The video above show how the Giphy API React Native integration looks like with GIFs. 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 in your React Native app:

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.

Conclusion

As we learned, adding GIFs support to any React Native app is extremely straightforward with the Giphy API integration in React Native. The generic REST endpoints provided by Giphy are extremely simple to call from React Native.

• If you want to see it in action, check out one of the demos of our social apps, all of which have React Native Giphy API integration.
• Previously published at https://www.instamobile.io/mobile-development/giphy-react-native/
• https://www.instamobile.io/app-templates/react-native-chat-app-template/