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
Top comments (3)
bonjour, aurais tu une solution pour l'integrer sur PHP?
ou peux t'on trouver des clones d'apps mobile?
combien d'heures faut t'il pour intégrer giphy sur php?