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 and create an account on a . Your dashboard should look like this. page chrome browser Click on the ‘ to create a new API. You will be prompted to select an option between API or SDK. Create an App’ button 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. [gifs, setGifs] = useState([]); [term, updateTerm] = useState( ); const const '' In your App.js, create a fuction fetchGifs() in your App component. { { API_KEY = async ( ) function fetchGifs try const ;
    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);
  }

} < > API_KEY 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: React, {useState} ; {View, TextInput, StyleSheet, FlatList, Image} ; { [gifs, setGifs] = useState([]); [term, updateTerm] = useState( ); { { API_KEY = <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
  },
}); import from 'react' import from 'react-native' // do not forget to add fresco animation to build.gradle export default ( ) function App const const '' async ( ) function fetchGifs try const ;
      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 ( < > API_KEY : For you to make GIFs appear on your Android device you have to add the following to the list of dependencies in your . Important android/app/build.gradle implementation implementation 'com.facebook.fresco:fresco:2.0.0' '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/

Facebook

Fetch

Instagram

Slack

Twitter

React Native WebView Plugin Introduction

Premium Chat Module For Your React Native App

React Native Templates

Flutter Templates

Read My Stories

Too Long; Didn't Read

Adding GIFs to Your React Native Application Using Giphy API

Adding GIFs to Your React Native Application Using Giphy API

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

A Beginner's Guide To Using React Native Camera

10 Web Development Boosting Node.js Libraries and Frameworks

10 Things You Didn't Know You Could Do With Google Keep

10 Best Low-Code And No-Code AI Application Development Platforms in 2022

10 Data Table Libraries for JavaScript

A Beginner's Guide To Using React Native Camera

10 Web Development Boosting Node.js Libraries and Frameworks

10 Things You Didn't Know You Could Do With Google Keep

10 Best Low-Code And No-Code AI Application Development Platforms in 2022

10 Data Table Libraries for JavaScript

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps