How to Add Videos to your Expo React Native Apps - Video File in Source Code and URL

Hi everyone!

Today I want to show you how to add videos to your expo react native app using the expo-av package for audio and videos. I will show you how to set play from a certain position which will be useful if displaying a video where a user may want to skip to a certain chapter and will also show you how to get a reference to the video component to call certain functions. I will also cover looping and using native controls to play, pause and rewind the video as well as making it fullscreen.

The full code for this tutorial can be found on GitHub:

And the full expo documentation for video can be found here:

And the full expo documentation for expo-av can be found here:

You’ve clearly come here to learn and a free audible trial allows you to increase your learning potential in situations where you may be hands free like at the gym or on your commute. It allows you to spend more time on theory when you aren’t able to watch a screen, so that you can maximise your screen time to pick up technical skills. Try it for free today:

// ABOUT ME
My name is Chelsea and I started studying software engineering in 2010. I have been working commercially full time since 2014 and have been in various positions from graduate developer to tech lead to solution architect.
I'm a full stack developer with a lot of experience in C# and Javascript but my passion is for mobile development; specifically native iOS development and cross platform using React Native.

I always have many things on the go and am always trying out a new side hustle and failing at it; perhaps you can learn from my mistakes!

Please like and subscribe if you enjoyed this video and want to see more like it!
Have any suggestions on topics you would like to learn more about? Please suggest them in the comments... I would love to help you out while doing a bit of learning myself!

// PRODUCTS USED
I use the following products in the creation of my videos:

A reasonable quality and reasonably sturdy but cost effective microphone that can be used by both DSLR cameras, mobile phones and laptops

A kit lens but a decent quality lens for beginners getting used to a DSLR

This is the kit I started with it includes the lens linked above and is a great starter camera.

I love Apple devices... These are the ones I use for my channel content creation:

A good all round phone, good for Apple development and recording videos with enough high quality features but at a cheaper price point than the pro versions.

A nice portable computer for working from anywhere and perfect for iOS development

Really easy to use for graphic design if required for logos as part of my app development or editing the videos on the go.

For logo and icon design in Affinity Designer app for iPad

Adds keyboard and touchpad to iPad Air, making it easier to use for writing code/eBooks etc. on the go!

DISCLAIMER: Links included in this description might be affiliate links. If you purchase a product or service with the links that I provide I may receive a small commission. There is no additional charge to you! Thank you for supporting my channel so I can continue to provide you with free content each week!

//CONTACT:

//CRAVING MORE:

[hdadpool]

Out of all videos and tutorials available online, your video is the only thing that helped me! I think expo-av is not as prominently used as react-native-video and that package just doesn't get configured with expo. Thank you for this video, it deserves more views!

[shafigaming]

Finally, you saved my final year project .
A big thanks to you ma'am

[aliciapak]

Thank you so much! I'm very grateful! I've been trying to render a video in react native for hours. I tried different methods from various documentations and videos, but I couldn't; and then I watched this video and magically it works. I have videos in my app now. Thanks!

[techkrab]

Well I subscribe only when I find great content and this is amazing. Thanks miss Coding

[growzoneco]

I'm having problems processing videos in our application. On iOS, the videos play 100%, but at expo, some videos do and some don't, can you tell why?

[Sparrow-tnjj]

Thank you very much. Your videos always help me.

[newmankramer]

How to play YouTube video, I can't seem to play it?

[nathannelson]

I enjoyed the lesson, however I have a small issue going on. I am wondering how to get the video to stop playing the sound after you leave the view/tab. My issue is that I have a feed running like TikTok and the video stops but the sound continues when I leave the view. Any idea how to fix this small issue?

[fedaaaljelani]

how can i add multiple video files in loop ? the require doesn't take dynamic variable

[aaojetimi]

It's amazing and simple, kudos to you 👌

[ambrosebeavers]

Thanks a lot MissCoding. Can you do a video on how to get Expo Video's progress bar at the bottom. Gosh, I think I've searched everywhere

[EvertonFalcaoadv]

how would you play the video if you turn the device?

[Zicrus]

When I write video.current.playFromPositionAsync(5000), it says "Object is possibly 'null'.ts(2531)" with a red line under video.current

[southredmondtoxik]

My vedio already played but it doesn't appear. Why is that?

[rohdrigohsubtil]

Hello Miss, how do I click a button I created, written "Watch the video" and the video after the click, open directly in full screen?

[bnacadmin]

Great tutorial! Have you tried this to eas build? I'm using SDK 45, I always got an error expo Error: Cannot find native module 'ExpoVideoView'

[luc-szth]

can someone teach me how to play m3u8 files 😢

[ImranKhan-nywt]

thanks you very much I watched your video, It worked for me, but there is a problem, when I make apk from the app, it doesn't play the video

[jayreyes]

Thanks Miss. Do you have experience with developing controls to replace the native ones?

[pablolarade]

cool but how to add thumble image or image before the user play the vids