{"id":32834,"date":"2024-02-21T07:00:00","date_gmt":"2024-02-21T15:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=32834"},"modified":"2025-04-29T11:35:44","modified_gmt":"2025-04-29T18:35:44","slug":"react-native-video-experiences-mobile-apps","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/react-native-video-experiences-mobile-apps","title":{"rendered":"Using React Native for Engaging Video Experiences on Mobile Apps"},"content":{"rendered":"\n<p>Video helps drive user engagement. When you&#8217;re building an app, you can use video to showcase products, provide users with in-depth guides, and encourage customers to share their own reviews. React Native is the tool of choice.<\/p>\n\n\n\n<p>Why React Native, you ask? Well, it\u2019s like a superhero for app developers:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>One code to rule them all<\/strong>. With React Native, you write code once and use it on both Android and iOS. No need for separate codes \u2014 that\u2019s just extra work we can do without!<\/li>\n\n\n\n<li><strong>Fast and furious development<\/strong>. Speedy development is the name of the game. With React Native, you can create apps fast, saving you time and resources.<\/li>\n\n\n\n<li><strong>Loads of cool stuff<\/strong>. React Native has prebuilt goodies and tools. It\u2019s like a treasure chest for app developers, especially when adding awesome features like video playback.<\/li>\n\n\n\n<li><strong>Budget-friendly<\/strong>. Developing for both platforms at once? That means less cash and effort. Who doesn\u2019t love saving money?<\/li>\n<\/ol>\n\n\n\n<p id=\"8817\">But there are a few challenges:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Devices are like snowflakes<\/strong>. React Native apps run on devices of all shapes and sizes. We have to make sure videos play smoothly on each one.<\/li>\n\n\n\n<li><strong>Internet surprise party<\/strong>. People connect to the internet in all sorts of ways. We need to make sure videos don\u2019t glitch out, no matter the network.<\/li>\n\n\n\n<li><strong>Video formats<\/strong>. Videos come in different shapes and sizes, too. We need to make sure they all play nice with our app.<\/li>\n<\/ol>\n\n\n\n<p id=\"ae43\">Now, for the fun part. Let\u2019s get technical! If you\u2019re a React Native wizard wanting to add video magic to your app, check out the&nbsp;<code>AdvancedVideo<\/code>class. It\u2019s like the secret sauce from the&nbsp;<code>cloudinary_react_native<\/code>&nbsp;SDK, making video integration a breeze. Your users will get a kick out of watching videos seamlessly on any device. Cheers to making your React Native app the star of the show!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 1: Installation<\/h2>\n\n\n\n<p id=\"46bb\">You can install the&nbsp;<code>cloudinary_react_native<\/code>&nbsp;package using <\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">code<\/span>&gt;<\/span>npm:npm install cloudinary-react-native<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">code<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p id=\"dace\">Or<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">code<\/span>&gt;<\/span>yarn:yarn add cloudinary-react-native --save<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">code<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h2 class=\"wp-block-heading\">Step 2: Initialize Cloudinary<\/h2>\n\n\n\n<p id=\"42cc\">Create your Cloudinary account and set it up in your app. All you need is your cloud name.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">import<\/span> {Cloudinary} <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@cloudinary\/url-gen'<\/span>;\n\n<span class=\"hljs-keyword\">const<\/span> myCld = <span class=\"hljs-keyword\">new<\/span> Cloudinary({\n<span class=\"hljs-attr\">cloud<\/span>: {\n<span class=\"hljs-attr\">cloudName<\/span>: <span class=\"hljs-string\">\"&lt;your_cloud_name&gt;\"<\/span>,\n},\n});<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h2 class=\"wp-block-heading\">Step 3: Create <code>AdvancedImage<\/code><\/h2>\n\n\n\n<p id=\"0c8b\">First, we\u2019ll need to create our video object.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">import<\/span> {AdvancedVideo} <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"cloudinary-react-native\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> {Video} <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'expo-av'<\/span>;\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">createMyVideoObject<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n<span class=\"hljs-keyword\">const<\/span> myVideo = cld.video(<span class=\"hljs-string\">'sea_turtle'<\/span>)\n<span class=\"hljs-keyword\">return<\/span> myVideo\n};<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p id=\"0c8b\">Our&nbsp;<code>publicId<\/code>&nbsp;is sea_turtle, we\u2019ll now send this video object to our video player.<\/p>\n\n\n\n<p id=\"bc44\">We\u2019ll also have to init the video ref using:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">const<\/span> videoPlayer = useRef&lt;Video&gt;(<span class=\"hljs-literal\">null<\/span>);<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p id=\"581a\">Now, let\u2019s create an instance of&nbsp;<code>AdvancedImage<\/code>&nbsp;and set it&nbsp;<code>publicId<\/code> to the video you want to play.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">AdvancedVideo<\/span>\n<span class=\"hljs-attr\">ref<\/span>=<span class=\"hljs-string\">{(ref)<\/span> =&gt;<\/span> (videoPlayer.current = ref ? ref : null)}\ncldVideo={createMyVideoObject()}\nvideoStyle={styles.video}\n\/&gt;<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p id=\"581a\">You can also send a URL instead of publicId:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">AdvancedVideo<\/span>\n<span class=\"hljs-attr\">ref<\/span>=<span class=\"hljs-string\">{(ref)<\/span> =&gt;<\/span> (videoPlayer.current = ref ? ref : null)}\nvideoUrl={\"<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">your_video_url\"}<\/span>\n<span class=\"hljs-attr\">videoStyle<\/span>=<span class=\"hljs-string\">{styles.video}<\/span>\n\/&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h2 class=\"wp-block-heading\">Features<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Adaptive Bitrate<\/h3>\n\n\n\n<p id=\"2b1a\">The\u00a0<code>AdvancedVideo<\/code>\u00a0supports adaptive bitrate (ABR) mechanism. This means it automatically receives a manifest file in the\u00a0<code>.m3u8<\/code>\u00a0format and select the most appropriate playback link for your video.<\/p>\n\n\n\n<p id=\"32a8\">If you want to turn on the ABR you\u2019ll need to add a transformation to the video initialization:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">createMyVideoObject<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n<span class=\"hljs-keyword\">const<\/span> myVideo = cld.video(<span class=\"hljs-string\">'sea_turtle.m3u8'<\/span>).transcode(streamingProfile(<span class=\"hljs-string\">\"auto\"<\/span>))\n<span class=\"hljs-keyword\">return<\/span> myVideo\n};<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p id=\"8e95\">The streaming profile auto transformation will enable ABR.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Transformations<\/h3>\n\n\n\n<p id=\"18a1\">Take your video playback to the next level by combining different enhancements such as trimming, overlaying images, normalizing audio, and more, all while utilizing the automatic streaming profile. Keep in mind that these transformations should be applied sequentially in a chained manner. For more details, check out additional information&nbsp;<a href=\"https:\/\/cloudinary.com\/documentation\/adaptive_bitrate_streaming#combining_transformations_with_automatic_streaming_profile_selection\" rel=\"noreferrer noopener\" target=\"_blank\">here<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p id=\"3961\">More people are watching videos on their phones now, especially through social networks. Thanks to the CLDVideoPlayer class in the&nbsp;<code>cloudinary_react_native<\/code>&nbsp;SDK, you can easily add cool video features to your apps. This means you can give your users an engaging video experience, keeping them hooked on your app. Join the mobile video trend and let it boost your React Native app to greater success. <a href=\"https:\/\/cloudinary.com\/\">Learn more<\/a> about how Cloudinary can help.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Video helps drive user engagement. When you&#8217;re building an app, you can use video to showcase products, provide users with in-depth guides, and encourage customers to share their own reviews. React Native is the tool of choice. Why React Native, you ask? Well, it\u2019s like a superhero for app developers: But there are a few [&hellip;]<\/p>\n","protected":false},"author":87,"featured_media":32836,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[246,263,303],"class_list":["post-32834","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-react","tag-sdk","tag-video"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Video Magic: React Native for Engaging Experiences on Mobile Apps<\/title>\n<meta name=\"description\" content=\"Leverage React Native to add video to showcase products, provide users with in-depth guides, and encourage customers to share their own reviews.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/medium.com\/@adi.mizrahi\/react-native-and-cool-videos-ed66cd2a36ad\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using React Native for Engaging Video Experiences on Mobile Apps\" \/>\n<meta property=\"og:description\" content=\"Leverage React Native to add video to showcase products, provide users with in-depth guides, and encourage customers to share their own reviews.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/medium.com\/@adi.mizrahi\/react-native-and-cool-videos-ed66cd2a36ad\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2024-02-21T15:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-29T18:35:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1708551415\/react_and_video-blog\/react_and_video-blog-jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1100\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"melindapham\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/medium.com\/@adi.mizrahi\/react-native-and-cool-videos-ed66cd2a36ad#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/react-native-video-experiences-mobile-apps\"},\"author\":{\"name\":\"melindapham\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\"},\"headline\":\"Using React Native for Engaging Video Experiences on Mobile Apps\",\"datePublished\":\"2024-02-21T15:00:00+00:00\",\"dateModified\":\"2025-04-29T18:35:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/react-native-video-experiences-mobile-apps\"},\"wordCount\":603,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/medium.com\/@adi.mizrahi\/react-native-and-cool-videos-ed66cd2a36ad#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1708551415\/react_and_video-blog\/react_and_video-blog.jpg?_i=AA\",\"keywords\":[\"React\",\"SDK\",\"Video\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2024\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/react-native-video-experiences-mobile-apps\",\"url\":\"https:\/\/medium.com\/@adi.mizrahi\/react-native-and-cool-videos-ed66cd2a36ad\",\"name\":\"Video Magic: React Native for Engaging Experiences on Mobile Apps\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/medium.com\/@adi.mizrahi\/react-native-and-cool-videos-ed66cd2a36ad#primaryimage\"},\"image\":{\"@id\":\"https:\/\/medium.com\/@adi.mizrahi\/react-native-and-cool-videos-ed66cd2a36ad#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1708551415\/react_and_video-blog\/react_and_video-blog.jpg?_i=AA\",\"datePublished\":\"2024-02-21T15:00:00+00:00\",\"dateModified\":\"2025-04-29T18:35:44+00:00\",\"description\":\"Leverage React Native to add video to showcase products, provide users with in-depth guides, and encourage customers to share their own reviews.\",\"breadcrumb\":{\"@id\":\"https:\/\/medium.com\/@adi.mizrahi\/react-native-and-cool-videos-ed66cd2a36ad#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/medium.com\/@adi.mizrahi\/react-native-and-cool-videos-ed66cd2a36ad\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/medium.com\/@adi.mizrahi\/react-native-and-cool-videos-ed66cd2a36ad#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1708551415\/react_and_video-blog\/react_and_video-blog.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1708551415\/react_and_video-blog\/react_and_video-blog.jpg?_i=AA\",\"width\":2000,\"height\":1100},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/medium.com\/@adi.mizrahi\/react-native-and-cool-videos-ed66cd2a36ad#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Using React Native for Engaging Video Experiences on Mobile Apps\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\",\"name\":\"melindapham\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"caption\":\"melindapham\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Video Magic: React Native for Engaging Experiences on Mobile Apps","description":"Leverage React Native to add video to showcase products, provide users with in-depth guides, and encourage customers to share their own reviews.","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:\/\/medium.com\/@adi.mizrahi\/react-native-and-cool-videos-ed66cd2a36ad","og_locale":"en_US","og_type":"article","og_title":"Using React Native for Engaging Video Experiences on Mobile Apps","og_description":"Leverage React Native to add video to showcase products, provide users with in-depth guides, and encourage customers to share their own reviews.","og_url":"https:\/\/medium.com\/@adi.mizrahi\/react-native-and-cool-videos-ed66cd2a36ad","og_site_name":"Cloudinary Blog","article_published_time":"2024-02-21T15:00:00+00:00","article_modified_time":"2025-04-29T18:35:44+00:00","og_image":[{"width":2000,"height":1100,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1708551415\/react_and_video-blog\/react_and_video-blog-jpg?_i=AA","type":"image\/jpeg"}],"author":"melindapham","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/medium.com\/@adi.mizrahi\/react-native-and-cool-videos-ed66cd2a36ad#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/react-native-video-experiences-mobile-apps"},"author":{"name":"melindapham","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9"},"headline":"Using React Native for Engaging Video Experiences on Mobile Apps","datePublished":"2024-02-21T15:00:00+00:00","dateModified":"2025-04-29T18:35:44+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/react-native-video-experiences-mobile-apps"},"wordCount":603,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/medium.com\/@adi.mizrahi\/react-native-and-cool-videos-ed66cd2a36ad#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1708551415\/react_and_video-blog\/react_and_video-blog.jpg?_i=AA","keywords":["React","SDK","Video"],"inLanguage":"en-US","copyrightYear":"2024","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/react-native-video-experiences-mobile-apps","url":"https:\/\/medium.com\/@adi.mizrahi\/react-native-and-cool-videos-ed66cd2a36ad","name":"Video Magic: React Native for Engaging Experiences on Mobile Apps","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/medium.com\/@adi.mizrahi\/react-native-and-cool-videos-ed66cd2a36ad#primaryimage"},"image":{"@id":"https:\/\/medium.com\/@adi.mizrahi\/react-native-and-cool-videos-ed66cd2a36ad#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1708551415\/react_and_video-blog\/react_and_video-blog.jpg?_i=AA","datePublished":"2024-02-21T15:00:00+00:00","dateModified":"2025-04-29T18:35:44+00:00","description":"Leverage React Native to add video to showcase products, provide users with in-depth guides, and encourage customers to share their own reviews.","breadcrumb":{"@id":"https:\/\/medium.com\/@adi.mizrahi\/react-native-and-cool-videos-ed66cd2a36ad#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/medium.com\/@adi.mizrahi\/react-native-and-cool-videos-ed66cd2a36ad"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/medium.com\/@adi.mizrahi\/react-native-and-cool-videos-ed66cd2a36ad#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1708551415\/react_and_video-blog\/react_and_video-blog.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1708551415\/react_and_video-blog\/react_and_video-blog.jpg?_i=AA","width":2000,"height":1100},{"@type":"BreadcrumbList","@id":"https:\/\/medium.com\/@adi.mizrahi\/react-native-and-cool-videos-ed66cd2a36ad#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Using React Native for Engaging Video Experiences on Mobile Apps"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9","name":"melindapham","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","caption":"melindapham"}}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1708551415\/react_and_video-blog\/react_and_video-blog.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/32834","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/87"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=32834"}],"version-history":[{"count":7,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/32834\/revisions"}],"predecessor-version":[{"id":37553,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/32834\/revisions\/37553"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/32836"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=32834"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=32834"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=32834"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}