Skip to main content

Giphy Integration in React Native

· 7 min read
Beniamin Marcu
Full Stack Developer
Last updated on April 14, 2020

react native giphy

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.

giphy api keys

Click on the ‘Create an App’ button to create a new API. You will be prompted to select an option between API or SDK.

creating a new app

For this article we are focusing on the API so click on the API option.

create a new app

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

Mega Bundle Sale is ON! Get ALL of our React Native codebases at 90% OFF discount 🔥

Get the Mega Bundle

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'

Mega Bundle Sale is ON! Get ALL of our React Native codebases at 90% OFF discount 🔥

Get the Mega Bundle

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

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.

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.

Looking for a custom mobile application?

Our team of expert mobile developers can help you build a custom mobile app that meets your specific needs.

Get in Touch

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.

Next Steps​

Now that you have learned about resources to learn React Native development, here are some other topics you can look into

If you need a base to start your next React Native app, you can make your next awesome app using manyReact Native template.