{"id":59686,"date":"2023-10-17T14:37:25","date_gmt":"2023-10-17T09:07:25","guid":{"rendered":"https:\/\/www.oneclickitsolution.com\/blog\/?p=59686"},"modified":"2023-10-17T14:37:27","modified_gmt":"2023-10-17T09:07:27","slug":"animating-react-native-a-deep-dive-into-the-giphy-sdk","status":"publish","type":"post","link":"https:\/\/www.oneclickitsolution.com\/blog\/animating-react-native-a-deep-dive-into-the-giphy-sdk","title":{"rendered":"Animating React Native: A Deep Dive into the\u00a0 GIPHY SDK"},"content":{"rendered":"\n

Introduction<\/h2>\n\n\n\n

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.<\/p>\n\n\n\n

Prerequisites<\/h2>\n\n\n\n

1. Node.js and npm installed on your system.<\/p>\n\n\n\n

2. React Native development environment setup. If you haven’t already, you can follow the official React Native Getting Started Guide for instructions.<\/p>\n\n\n\n

Installation<\/h2>\n\n\n\n

To integrate GIPHY SDK into your React Native project<\/a><\/strong>, follow these steps:<\/p>\n\n\n\n

Step 1<\/strong>: Create a React Native project from the ground up<\/p>\n\n\n\n

Don’t have a React Native project? No worries! You can create one with the following command:<\/p>\n\n\n\n

npx react-native init GiphyIntegration<\/p>\n\n\n\n

Step 2: <\/strong>Install GIPHY SDK<\/p>\n\n\n\n

Navigate to your project directory and install the GIPHY SDK package using npm or yarn:<\/p>\n\n\n\n

npm install @giphy\/react-native-sdk –save<\/p>\n\n\n\n

# or<\/p>\n\n\n\n

yarn add @giphy\/react-native-sdk<\/p>\n\n\n\n

Step 3: <\/strong>Link the Native Modules<\/p>\n\n\n\n

To link the native modules for Android<\/a><\/strong> and iOS<\/a><\/strong>, use the following commands:<\/p>\n\n\n\n

For Android <\/strong>(only for older version of react-native) :<\/p>\n\n\n\n

npx react-native link @giphy\/react-native-sdk<\/p>\n\n\n\n

For iOS:<\/strong><\/p>\n\n\n\n

cd ios && pod install<\/p>\n\n\n\n

Step 4:<\/strong> Get GIPHY API Key<\/p>\n\n\n\n

You need to obtain an API key from the GIPHY Developer<\/a><\/strong> Portal. Sign up or log in, create a new app, and retrieve your API key.<\/p>\n\n\n\n

GIPHY Developer Portal URL: https:\/\/developers.giphy.com\/dashboard\/?create=true<\/a><\/p>\n\n\n\n

Step 5:<\/strong> Initialize GIPHY SDK<\/p>\n\n\n\n

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

GiphySDK.configure({ apiKey: \u2018YOUR_API_KEY\u2019})\r<\/code><\/pre>\n\n\n\n
Example 1 (with\u00a0 GiphyDialog)<\/h2>\n\n\n\n
import React, { useState } from \"react\";\r\nimport { View, Text, TouchableOpacity, StyleSheet } from \"react-native\";\r\nimport {\r\n   GiphyContent,\r\n   GiphySDK,\r\n   GiphyDialog,\r\n} from \"@giphy\/react-native-sdk\";\r\r\nconst App = () => {\r\r\r\nGiphySDK.configure({ apiKey: \u2018YOUR_API_KEY\u2019 })\r\r\r\nreturn (\r\n   <View style={styles.container}>\r\r\r\n<TouchableOpacity\r\n   style={styles.button}\r\n   onPress={() => GiphyDialog.show()}>\r\n   <Text style={styles.text}>Open Giphy Dialog (Modal)<\/Text>\r\n   <\/TouchableOpacity>\r\r\r\n   <\/View>\r\n   )\r\n}\r\r\r\nexport default App;\r\r\r\nconst styles = StyleSheet.create({\r\ncontainer: {\r\n   flex: 1,\r\n   alignItems: 'center',\r\n   justifyContent: 'space-around',\r\n   backgroundColor: 'white'\r\n},\r\ntext: {\r\n   color: 'white',\r\n   fontSize: 18,\r\n},\r\nbutton: {\r\n   backgroundColor: 'blue',\r\n   padding: 20,\r\n   borderRadius: 15\r\n}\r\n})\r<\/code><\/pre>\n\n\n\n
Video URL:<\/p>\n\n\n\n
https:\/\/drive.google.com\/file\/d\/1Aj5SwGkD7ggxsuDijVQzBnUQaYGo_kVN\/view?usp=sharing<\/a><\/p>\n\n\n\n
Example 2 (with GiphyGridView)<\/h2>\n\n\n\n
import React, { useState } from \"react\";\r\nimport { View, Text, TextInput, TouchableOpacity, StyleSheet } from \"react-native\";\r\nimport {\r\n   GiphyGridView,\r\n   GiphyContent,\r\n   GiphySDK,\r\n} from \"@giphy\/react-native-sdk\";\r\r\nconst App = () => {\r\r\nconst [searchText, setSearchText] = useState('');\r\r\nGiphySDK.configure({ apiKey: \u2018YOUR_API_KEY\u2019})\r\r\nreturn (\r\n   <View style={styles.container}>\r\r\n<TextInput\r\n   style={styles.textInput}\r\n   placeholder=\"Search GIFs\"\r\n   onChangeText={(text) => setSearchText(text)}\r\n\/>\r\r\n<GiphyGridView\r\n   content={GiphyContent.search({ searchQuery: searchText })}\r\n   style={styles.giphyGridView}\r\n   onMediaSelect={(e) => {\r\n \tconsole.log(e.nativeEvent.media.data)\r\n \tconsole.log(e.nativeEvent.media.aspectRatio)\r\n \tconsole.log(e.nativeEvent.media.id)\r\n \tconsole.log(e.nativeEvent.media.isDynamic)\r\n \tconsole.log(e.nativeEvent.media.isVideo)\r\n \tconsole.log(e.nativeEvent.media.url)\r\n   }}\r\n\/>\r\n   <\/View>\r\n   )\r\n}\r\r\nexport default App;\r\r\nconst styles = StyleSheet.create({\r\ncontainer: {\r\n   flex: 1,\r\n   justifyContent: 'space-around',\r\n   backgroundColor: 'white'\r\n},\r\ntextInput: {\r\n   width: '85%',\r\n   height: 50,\r\n   alignSelf: 'center',\r\n   color: 'black',\r\n   borderWidth: 1,\r\n   borderRadius: 15,\r\n   paddingHorizontal: 10\r\n},\r\ngiphyGridView: {\r\n   height: 300\r\n}\r\n})\r<\/code><\/pre>\n\n\n\n
Video URL:<\/p>\n\n\n\n
https:\/\/drive.google.com\/file\/d\/1lpa55pHDWeH_VeSneKIZ_GqrSkDsGPlZ\/view?usp=sharing<\/a><\/p>\n\n\n\n
Note: Replace ‘YOUR_API_KEY’ with your actual GIPHY API key.<\/p>\n\n\n\n
Step 6: <\/strong>Run Your App<\/p>\n\n\n\n
Now, you can run your React Native app using the following commands:<\/p>\n\n\n\n
For Android:<\/strong><\/p>\n\n\n\n
npx react-native run-android<\/p>\n\n\n\n
For iOS:<\/strong><\/p>\n\n\n\n
npx react-native run-ios<\/p>\n\n\n\n
You should see a GIF displayed on your app fetched from the GIPHY API.<\/p>\n\n\n\n
Conclusion<\/h2>\n\n\n\n
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<\/a><\/strong> 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!<\/p>\n","protected":false},"excerpt":{"rendered":"
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 …<\/p>\n","protected":false},"author":1,"featured_media":59693,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22],"tags":[1371,877,855],"class_list":["post-59686","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology","tag-animating-react-native","tag-react-native","tag-react-native-app-development"],"yoast_head":"\nAnimating React Native: A Deep Dive into the\u00a0 GIPHY SDK<\/title>\n<meta name=\"description\" content=\"Explore React Native animation with the GIPHY SDK in this deep dive tutorial. Learn to create captivating mobile app animations.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.oneclickitsolution.com\/blog\/animating-react-native-a-deep-dive-into-the-giphy-sdk\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Animating React Native: A Deep Dive into the\u00a0 GIPHY SDK\" \/>\n<meta property=\"og:description\" content=\"Explore React Native animation with the GIPHY SDK in this deep dive tutorial. Learn to create captivating mobile app animations.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.oneclickitsolution.com\/blog\/animating-react-native-a-deep-dive-into-the-giphy-sdk\" \/>\n<meta property=\"og:site_name\" content=\"OneClick IT Consultancy\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/oneclickconsultancy\" \/>\n<meta property=\"article:published_time\" content=\"2023-10-17T09:07:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-17T09:07:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.oneclickitsolution.com\/blog\/wp-content\/uploads\/2023\/10\/animating-react-native.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"OneClick IT Consultancy\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@OneclickIT\" \/>\n<meta name=\"twitter:site\" content=\"@OneclickIT\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"OneClick IT Consultancy\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Animating React Native: A Deep Dive into the\u00a0 GIPHY SDK","description":"Explore React Native animation with the GIPHY SDK in this deep dive tutorial. Learn to create captivating mobile app animations.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.oneclickitsolution.com\/blog\/animating-react-native-a-deep-dive-into-the-giphy-sdk","og_locale":"en_US","og_type":"article","og_title":"Animating React Native: A Deep Dive into the\u00a0 GIPHY SDK","og_description":"Explore React Native animation with the GIPHY SDK in this deep dive tutorial. Learn to create captivating mobile app animations.","og_url":"https:\/\/www.oneclickitsolution.com\/blog\/animating-react-native-a-deep-dive-into-the-giphy-sdk","og_site_name":"OneClick IT Consultancy","article_publisher":"https:\/\/www.facebook.com\/oneclickconsultancy","article_published_time":"2023-10-17T09:07:25+00:00","article_modified_time":"2023-10-17T09:07:27+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/www.oneclickitsolution.com\/blog\/wp-content\/uploads\/2023\/10\/animating-react-native.png","type":"image\/png"}],"author":"OneClick IT Consultancy","twitter_card":"summary_large_image","twitter_creator":"@OneclickIT","twitter_site":"@OneclickIT","twitter_misc":{"Written by":"OneClick IT Consultancy","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.oneclickitsolution.com\/blog\/animating-react-native-a-deep-dive-into-the-giphy-sdk#article","isPartOf":{"@id":"https:\/\/www.oneclickitsolution.com\/blog\/animating-react-native-a-deep-dive-into-the-giphy-sdk"},"author":{"name":"OneClick IT Consultancy","@id":"https:\/\/www.oneclickitsolution.com\/blog\/#\/schema\/person\/c2616c0a433427a79a96fe5ca2b34ec3"},"headline":"Animating React Native: A Deep Dive into the\u00a0 GIPHY SDK","datePublished":"2023-10-17T09:07:25+00:00","dateModified":"2023-10-17T09:07:27+00:00","mainEntityOfPage":{"@id":"https:\/\/www.oneclickitsolution.com\/blog\/animating-react-native-a-deep-dive-into-the-giphy-sdk"},"wordCount":438,"publisher":{"@id":"https:\/\/www.oneclickitsolution.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.oneclickitsolution.com\/blog\/animating-react-native-a-deep-dive-into-the-giphy-sdk#primaryimage"},"thumbnailUrl":"https:\/\/www.oneclickitsolution.com\/blog\/wp-content\/uploads\/2023\/10\/animating-react-native.png","keywords":["Animating React Native","React Native","React Native App Development"],"articleSection":["Technology"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.oneclickitsolution.com\/blog\/animating-react-native-a-deep-dive-into-the-giphy-sdk","url":"https:\/\/www.oneclickitsolution.com\/blog\/animating-react-native-a-deep-dive-into-the-giphy-sdk","name":"Animating React Native: A Deep Dive into the\u00a0 GIPHY SDK","isPartOf":{"@id":"https:\/\/www.oneclickitsolution.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.oneclickitsolution.com\/blog\/animating-react-native-a-deep-dive-into-the-giphy-sdk#primaryimage"},"image":{"@id":"https:\/\/www.oneclickitsolution.com\/blog\/animating-react-native-a-deep-dive-into-the-giphy-sdk#primaryimage"},"thumbnailUrl":"https:\/\/www.oneclickitsolution.com\/blog\/wp-content\/uploads\/2023\/10\/animating-react-native.png","datePublished":"2023-10-17T09:07:25+00:00","dateModified":"2023-10-17T09:07:27+00:00","description":"Explore React Native animation with the GIPHY SDK in this deep dive tutorial. Learn to create captivating mobile app animations.","breadcrumb":{"@id":"https:\/\/www.oneclickitsolution.com\/blog\/animating-react-native-a-deep-dive-into-the-giphy-sdk#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.oneclickitsolution.com\/blog\/animating-react-native-a-deep-dive-into-the-giphy-sdk"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.oneclickitsolution.com\/blog\/animating-react-native-a-deep-dive-into-the-giphy-sdk#primaryimage","url":"https:\/\/www.oneclickitsolution.com\/blog\/wp-content\/uploads\/2023\/10\/animating-react-native.png","contentUrl":"https:\/\/www.oneclickitsolution.com\/blog\/wp-content\/uploads\/2023\/10\/animating-react-native.png","width":1200,"height":628,"caption":"animating react native"},{"@type":"BreadcrumbList","@id":"https:\/\/www.oneclickitsolution.com\/blog\/animating-react-native-a-deep-dive-into-the-giphy-sdk#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/www.oneclickitsolution.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Animating React Native: A Deep Dive into the\u00a0 GIPHY SDK"}]},{"@type":"WebSite","@id":"https:\/\/www.oneclickitsolution.com\/blog\/#website","url":"https:\/\/www.oneclickitsolution.com\/blog\/","name":"OneClick IT Consultancy","description":"We Build Brands from Ideas","publisher":{"@id":"https:\/\/www.oneclickitsolution.com\/blog\/#organization"},"alternateName":"OneClick IT Solution","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.oneclickitsolution.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.oneclickitsolution.com\/blog\/#organization","name":"OneClick IT Consultancy","alternateName":"OneClick IT Solution","url":"https:\/\/www.oneclickitsolution.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.oneclickitsolution.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.oneclickitsolution.com\/blog\/wp-content\/uploads\/2022\/10\/oneclick-official-logo.png","contentUrl":"https:\/\/www.oneclickitsolution.com\/blog\/wp-content\/uploads\/2022\/10\/oneclick-official-logo.png","width":100,"height":100,"caption":"OneClick IT Consultancy"},"image":{"@id":"https:\/\/www.oneclickitsolution.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/oneclickconsultancy","https:\/\/x.com\/OneclickIT","https:\/\/www.instagram.com\/oneclick.it.consultancy\/","https:\/\/www.linkedin.com\/company\/one-click-it-consultancy\/","https:\/\/www.pinterest.com\/oneclickitconsultancy\/","https:\/\/www.youtube.com\/channel\/UCsEG6aiwOwvYrcZxMoP5xjg","https:\/\/oneclickit.tumblr.com\/","https:\/\/dribbble.com\/oneclickitconsultancy"]},{"@type":"Person","@id":"https:\/\/www.oneclickitsolution.com\/blog\/#\/schema\/person\/c2616c0a433427a79a96fe5ca2b34ec3","name":"OneClick IT Consultancy","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.oneclickitsolution.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/8169ffe1b63da548d77fb666e94f1aba?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8169ffe1b63da548d77fb666e94f1aba?s=96&d=mm&r=g","caption":"OneClick IT Consultancy"},"description":"OneClick IT Consultancy is the best custom software development company based in India & USA with expertise in BLE, travel, mobile, and web development. With nearly a decade\u2019s experience, we use best practices and development standards to deliver high-performance applications, focused on the user experience.","sameAs":["https:\/\/www.oneclickitsolution.com\/blog\/"],"jobTitle":"Founder","url":"https:\/\/www.oneclickitsolution.com\/blog\/author\/oneclick"}]}},"_links":{"self":[{"href":"https:\/\/www.oneclickitsolution.com\/blog\/wp-json\/wp\/v2\/posts\/59686"}],"collection":[{"href":"https:\/\/www.oneclickitsolution.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.oneclickitsolution.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.oneclickitsolution.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.oneclickitsolution.com\/blog\/wp-json\/wp\/v2\/comments?post=59686"}],"version-history":[{"count":0,"href":"https:\/\/www.oneclickitsolution.com\/blog\/wp-json\/wp\/v2\/posts\/59686\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.oneclickitsolution.com\/blog\/wp-json\/wp\/v2\/media\/59693"}],"wp:attachment":[{"href":"https:\/\/www.oneclickitsolution.com\/blog\/wp-json\/wp\/v2\/media?parent=59686"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.oneclickitsolution.com\/blog\/wp-json\/wp\/v2\/categories?post=59686"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.oneclickitsolution.com\/blog\/wp-json\/wp\/v2\/tags?post=59686"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}