Animating React Native: A Deep Dive into the GIPHY SDK
![animating react native](https://www.oneclickitsolution.com/blog/wp-content/uploads/2023/10/animating-react-native.png)
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!