{"id":104,"date":"2017-03-11T15:56:29","date_gmt":"2017-03-11T15:56:29","guid":{"rendered":"http:\/\/simplecode.xyz\/?p=104"},"modified":"2022-01-10T14:48:32","modified_gmt":"2022-01-10T14:48:32","slug":"display-animated-gif-react-native","status":"publish","type":"post","link":"https:\/\/simplecode.com.vn\/?p=104","title":{"rendered":"How to Display an Animated gif in React Native"},"content":{"rendered":"<p>By default the Gif images are not supported in android react native app. You need to set the following code to display the gif images.<\/p>\n<p>Open your android\/app\/build.gradle file add the following code:<\/p>\n<pre><code>open android\/app\/build.gradle add the following  code \r\n\r\ndependencies: { \r\n  ...\r\n     \/\/ For animated GIF support\r\n    compile 'com.facebook.fresco:animated-base-support:0.11.0'  \r\n    \/\/ For WebP support, including animated WebP\r\n    compile 'com.facebook.fresco:animated-gif:0.11.0'  \r\n    compile 'com.facebook.fresco:animated-webp:0.11.0' \r\n    compile  'com.facebook.fresco:webpsupport:0.11.0'  \r\n<\/code><\/pre>\n<p>Then you need to bundle the app again.<\/p>\n<p>References: <a href=\"https:\/\/facebook.github.io\/react-native\/docs\/image.html\">Image component<\/a> <a href=\"http:\/\/stackoverflow.com\/questions\/35594783\/how-do-i-display-an-animated-gif-in-react-native\">stackoverflow.com<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>By default the Gif images are not supported in android react native app. You need to set the following code to display the gif images. Open your android\/app\/build.gradle file add the following code: open android\/app\/build.gradle add the following code dependencies: { &#8230; \/\/ For animated GIF support compile &#8216;com.facebook.fresco:animated-base-support:0.11.0&#8217; \/\/ [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[6],"tags":[8],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v17.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Display an Animated gif in React Native - SimpleCode<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/simplecode.com.vn\/?p=104\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Display an Animated gif in React Native - SimpleCode\" \/>\n<meta property=\"og:description\" content=\"By default the Gif images are not supported in android react native app. You need to set the following code to display the gif images. Open your android\/app\/build.gradle file add the following code: open android\/app\/build.gradle add the following code dependencies: { ... \/\/ For animated GIF support compile &#039;com.facebook.fresco:animated-base-support:0.11.0&#039; \/\/ [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/simplecode.com.vn\/?p=104\" \/>\n<meta property=\"og:site_name\" content=\"SimpleCode\" \/>\n<meta property=\"article:published_time\" content=\"2017-03-11T15:56:29+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-01-10T14:48:32+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"simplecode\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/simplecode.com.vn\/#website\",\"url\":\"https:\/\/simplecode.com.vn\/\",\"name\":\"SimpleCode\",\"description\":\"Simple Code\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/simplecode.com.vn\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/simplecode.com.vn\/?p=104#webpage\",\"url\":\"https:\/\/simplecode.com.vn\/?p=104\",\"name\":\"How to Display an Animated gif in React Native - SimpleCode\",\"isPartOf\":{\"@id\":\"https:\/\/simplecode.com.vn\/#website\"},\"datePublished\":\"2017-03-11T15:56:29+00:00\",\"dateModified\":\"2022-01-10T14:48:32+00:00\",\"author\":{\"@id\":\"https:\/\/simplecode.com.vn\/#\/schema\/person\/b110785905231d29553717dd14b766dc\"},\"breadcrumb\":{\"@id\":\"https:\/\/simplecode.com.vn\/?p=104#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/simplecode.com.vn\/?p=104\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/simplecode.com.vn\/?p=104#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/simplecode.com.vn\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Display an Animated gif in React Native\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/simplecode.com.vn\/#\/schema\/person\/b110785905231d29553717dd14b766dc\",\"name\":\"simplecode\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/simplecode.com.vn\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/22e0b2cc28939e5aecc166195d629442?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/22e0b2cc28939e5aecc166195d629442?s=96&d=mm&r=g\",\"caption\":\"simplecode\"},\"url\":\"https:\/\/simplecode.com.vn\/?author=1\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Display an Animated gif in React Native - SimpleCode","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:\/\/simplecode.com.vn\/?p=104","og_locale":"en_US","og_type":"article","og_title":"How to Display an Animated gif in React Native - SimpleCode","og_description":"By default the Gif images are not supported in android react native app. You need to set the following code to display the gif images. Open your android\/app\/build.gradle file add the following code: open android\/app\/build.gradle add the following code dependencies: { ... \/\/ For animated GIF support compile 'com.facebook.fresco:animated-base-support:0.11.0' \/\/ [&hellip;]","og_url":"https:\/\/simplecode.com.vn\/?p=104","og_site_name":"SimpleCode","article_published_time":"2017-03-11T15:56:29+00:00","article_modified_time":"2022-01-10T14:48:32+00:00","twitter_card":"summary","twitter_misc":{"Written by":"simplecode"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/simplecode.com.vn\/#website","url":"https:\/\/simplecode.com.vn\/","name":"SimpleCode","description":"Simple Code","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/simplecode.com.vn\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/simplecode.com.vn\/?p=104#webpage","url":"https:\/\/simplecode.com.vn\/?p=104","name":"How to Display an Animated gif in React Native - SimpleCode","isPartOf":{"@id":"https:\/\/simplecode.com.vn\/#website"},"datePublished":"2017-03-11T15:56:29+00:00","dateModified":"2022-01-10T14:48:32+00:00","author":{"@id":"https:\/\/simplecode.com.vn\/#\/schema\/person\/b110785905231d29553717dd14b766dc"},"breadcrumb":{"@id":"https:\/\/simplecode.com.vn\/?p=104#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/simplecode.com.vn\/?p=104"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/simplecode.com.vn\/?p=104#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/simplecode.com.vn\/"},{"@type":"ListItem","position":2,"name":"How to Display an Animated gif in React Native"}]},{"@type":"Person","@id":"https:\/\/simplecode.com.vn\/#\/schema\/person\/b110785905231d29553717dd14b766dc","name":"simplecode","image":{"@type":"ImageObject","@id":"https:\/\/simplecode.com.vn\/#personlogo","inLanguage":"en-US","url":"https:\/\/secure.gravatar.com\/avatar\/22e0b2cc28939e5aecc166195d629442?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/22e0b2cc28939e5aecc166195d629442?s=96&d=mm&r=g","caption":"simplecode"},"url":"https:\/\/simplecode.com.vn\/?author=1"}]}},"_links":{"self":[{"href":"https:\/\/simplecode.com.vn\/index.php?rest_route=\/wp\/v2\/posts\/104"}],"collection":[{"href":"https:\/\/simplecode.com.vn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/simplecode.com.vn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/simplecode.com.vn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/simplecode.com.vn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=104"}],"version-history":[{"count":10,"href":"https:\/\/simplecode.com.vn\/index.php?rest_route=\/wp\/v2\/posts\/104\/revisions"}],"predecessor-version":[{"id":114,"href":"https:\/\/simplecode.com.vn\/index.php?rest_route=\/wp\/v2\/posts\/104\/revisions\/114"}],"wp:attachment":[{"href":"https:\/\/simplecode.com.vn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=104"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/simplecode.com.vn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=104"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/simplecode.com.vn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=104"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}