Animating React Native: A Deep Dive into the  GIPHY SDK

Introduction

GIFs have become an integral part of online communication. They bring life to our conversations by adding humor, emotions, and expressions to our messages and apps. With the GIPHY SDK, developers can easily integrate the vast GIPHY library into their React Native applications. In this blog post, we will walk you through the installation process and provide an example of how to use the GIPHY SDK in a React Native project.

Prerequisites

1. Node.js and npm installed on your system.

2. React Native development environment setup. If you haven’t already, you can follow the official React Native Getting Started Guide for instructions.

Installation

To integrate GIPHY SDK into your React Native project, follow these steps:

Step 1: Create a React Native project from the ground up

Don’t have a React Native project? No worries! You can create one with the following command:

npx react-native init GiphyIntegration

Step 2: Install GIPHY SDK

Navigate to your project directory and install the GIPHY SDK package using npm or yarn:

npm install @giphy/react-native-sdk –save

# or

yarn add @giphy/react-native-sdk

Step 3: Link the Native Modules

To link the native modules for Android and iOS, use the following commands:

For Android (only for older version of react-native) :

npx react-native link @giphy/react-native-sdk

For iOS:

cd ios && pod install

Step 4: Get GIPHY API Key

You need to obtain an API key from the GIPHY Developer Portal. Sign up or log in, create a new app, and retrieve your API key.

GIPHY Developer Portal URL: https://developers.giphy.com/dashboard/?create=true

Step 5: Initialize GIPHY SDK

In your React Native project, open the App.js file and import the GIPHY SDK. Initialize it with your API key as shown below:

GiphySDK.configure({ apiKey: ‘YOUR_API_KEY’})

Example 1 (with  GiphyDialog)

import React, { useState } from "react";
import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
import {
   GiphyContent,
   GiphySDK,
   GiphyDialog,
} from "@giphy/react-native-sdk";

const App = () => {


GiphySDK.configure({ apiKey: ‘YOUR_API_KEY’ })


return (
   <View style={styles.container}>


<TouchableOpacity
   style={styles.button}
   onPress={() => GiphyDialog.show()}>
   <Text style={styles.text}>Open Giphy Dialog (Modal)</Text>
   </TouchableOpacity>


   </View>
   )
}


export default App;


const styles = StyleSheet.create({
container: {
   flex: 1,
   alignItems: 'center',
   justifyContent: 'space-around',
   backgroundColor: 'white'
},
text: {
   color: 'white',
   fontSize: 18,
},
button: {
   backgroundColor: 'blue',
   padding: 20,
   borderRadius: 15
}
})

Video URL:

https://drive.google.com/file/d/1Aj5SwGkD7ggxsuDijVQzBnUQaYGo_kVN/view?usp=sharing

Example 2 (with GiphyGridView)

import React, { useState } from "react";
import { View, Text, TextInput, TouchableOpacity, StyleSheet } from "react-native";
import {
   GiphyGridView,
   GiphyContent,
   GiphySDK,
} from "@giphy/react-native-sdk";

const App = () => {

const [searchText, setSearchText] = useState('');

GiphySDK.configure({ apiKey: ‘YOUR_API_KEY’})

return (
   <View style={styles.container}>

<TextInput
   style={styles.textInput}
   placeholder="Search GIFs"
   onChangeText={(text) => setSearchText(text)}
/>

<GiphyGridView
   content={GiphyContent.search({ searchQuery: searchText })}
   style={styles.giphyGridView}
   onMediaSelect={(e) => {
 	console.log(e.nativeEvent.media.data)
 	console.log(e.nativeEvent.media.aspectRatio)
 	console.log(e.nativeEvent.media.id)
 	console.log(e.nativeEvent.media.isDynamic)
 	console.log(e.nativeEvent.media.isVideo)
 	console.log(e.nativeEvent.media.url)
   }}
/>
   </View>
   )
}

export default App;

const styles = StyleSheet.create({
container: {
   flex: 1,
   justifyContent: 'space-around',
   backgroundColor: 'white'
},
textInput: {
   width: '85%',
   height: 50,
   alignSelf: 'center',
   color: 'black',
   borderWidth: 1,
   borderRadius: 15,
   paddingHorizontal: 10
},
giphyGridView: {
   height: 300
}
})

Video URL:

https://drive.google.com/file/d/1lpa55pHDWeH_VeSneKIZ_GqrSkDsGPlZ/view?usp=sharing

Note: Replace ‘YOUR_API_KEY’ with your actual GIPHY API key.

Step 6: Run Your App

Now, you can run your React Native app using the following commands:

For Android:

npx react-native run-android

For iOS:

npx react-native run-ios

You should see a GIF displayed on your app fetched from the GIPHY API.

Conclusion

Adding the GIPHY SDK to your React Native project can make your app more fun and interesting. You’ve learned how to set it up, get an API key, start it, and show GIFs in your app. Feel free to explore more things it can do and make it fit your project better. Happy coding!