If you're having trouble with the expo initial configuration with Expo v51, run this command:
npx create-expo-app@latest ./ --template blank
Be the first to share your thoughts and start the conversation.
By logging in, you'll unlock full access to this and other free tutorials on JSM Pro.
Why? Logging in lets us personalize your learning experience, track your progress, and keep you in the loop with new workshops, coding tips, and platform updates.
You'll also be the first to know about upcoming launches, events, and exclusive discounts.
No spam—just helpful content to level up your skills.
If that sounds fair, go ahead and log in to continue →
Enter your name and email to get instant access
00:00:00Â Do you know where we have to go to start working on these latest videos?
00:00:04Â Well, it's going to be within our flat list and within our trending component right here.
00:00:11Â To it, we could pass the same posts that we are getting from the top, like posts, but let's create a different fetch function so we get some different
00:00:20Â posts to show right here.
00:00:22Â I'm going to go back to AppRight.
00:00:25Â And instead of getAllPosts, we're going to create a new function called getLatestPosts.
00:00:31Â But for now, I'm going to start with it by duplicating the getAllPosts one.
00:00:35Â There we go.
00:00:36Â We have it right here.
00:00:38Â I'm going to collapse this one and rename this one to getLatestPosts.
00:00:44Â You can call it getLatestVideos as well.
00:00:46Â Everything is going to be the same besides an additional query that you can pass right here.
00:00:52Â dot order descending and you pass a function of $ created at, and we're going to query a limit of only seven because we only want to show the latest few videos.
00:01:10Â That's it.
00:01:11Â So now let's go back to home and let me show you how easily we can fetch those posts now that we have created this reusable custom hook.
00:01:21Â You basically just duplicate it.
00:01:24Â We can rename posts to something like latest posts, and we don't need a refetch from that.
00:01:30Â And to it, you pass get-latest-posts coming from blip-appride.
00:01:36Â And that's going to give you a completely different set of posts in just a single line.
00:01:42Â So let's now use those latest posts and pass them over to our trending component.
00:01:49Â There we go.
00:01:50Â Now, we can navigate into the trending and we can implement the structure and the presentation of how we want these elements to show.
00:01:58Â Of course, the end product being something like this.
00:02:01Â First things first, we're going to install this great package called React Native Anima Table.
00:02:06Â It allows you to add animations to your React Native applications.
00:02:10Â And installing it is quite simple.
00:02:13Â We can just go to our clean terminal and run npm install.
00:02:17Â react-native-animatable.
00:02:20Â And while we're here, we're going to also install another package that allows us to play videos within our application.
00:02:26Â It's called expo-av.
00:02:29Â I think that stands for audio video.
00:02:32Â And let's press enter.
00:02:34Â First things first, we can import everything as animatable.
00:02:39Â from React Native Anima Table.
00:02:42Â And then we can create a new component right here.
00:02:45Â const trendingItem is equal to a React arrow function where we can return a new animatable.view, which basically is a view that allows you to do animations
00:03:00Â within it.
00:03:01Â Let's properly close it.
00:03:03Â And instead of rendering a text for each one of our elements, we can now render the trending item.
00:03:09Â And to it, we can pass a couple of things.
00:03:12Â We can pass the currently active item, which will come from the state.
00:03:16Â So we can declare a new use state snippet called active item, set active item, at the start set to posts zero.
00:03:25Â So the first post out there.
00:03:27Â And then we can pass the active item and we can pass the item as well.
00:03:33Â Moving back, we have to import use state from React.
00:03:37Â and we can get access to our active item as well as the item.
00:03:43Â Within this anima table view, we can give it a class name equal to margin right of 5, and we can declare an animation, which will be equal to essentially
00:03:54Â an object which we want to declare.
00:03:56Â And that object looks something like this.
00:03:59Â const zoomIn is equal to an object, and we can provide multiple different states.
00:04:04Â 0 state with a scale of 0.9, and then we can add a 1 state with a scale of 1. Similarly, we can duplicate this and create another animation called zoom out,
00:04:22Â where at the start, we're going to start from a scale of 1 and move to a scale of 0.9, which will basically zoom it out.
00:04:30Â Now, within this animation, if the active item is equal to item.$id, so if we're currently with that item, we want to zoom it in,
00:04:42Â else we want to zoom it out.
00:04:44Â And we want to do that with a duration of 500 milliseconds.
00:04:48Â Then as we have done before, we have to ensure whether we're playing the video or showing its thumbnail.
00:04:55Â So let's create a new use state snippet called play.
00:04:59Â Set play at the start, set to false.
00:05:02Â And then if play is turned on, we can return something like, let's do a text that will say playing.
00:05:12Â Let's also give it a class name equal to text-white.
00:05:17Â Else, if we're not playing, we want to create a touchable opacity like before that will allow us to play something.
00:05:25Â So let's create a new touchable opacity coming from React Native with a class name equal to relative justify center And items center,
00:05:42Â active opacity will be 0.7. And on press, we want to have a callback function that will set play to true.
00:05:52Â Within it, we're going to use a new component we haven't used before, which is the image background.
00:05:59Â So we're not using just the image, we're using the image background that will have a source equal to URI of item.thumbnail.
00:06:10Â Let's also give it a class name equal to W of 52, H of 72, because it has more height as it's a portrait, rounded dash 35 pixels.
00:06:23Â margin Y of 5, overflow of hidden, shadow-lg, and shadow-black-40 to make it appear like it's floating.
00:06:36Â And there we go.
00:06:37Â You can start seeing those portrait images.
00:06:40Â Let's also give it a resize mode equal to cover.
00:06:44Â Now, as it's a flat list and as it's a horizontal flat list, you can immediately just use your finger, I was about to say mouse,
00:06:53Â to swipe through them.
00:06:55Â And if you go back to trending, I think that's right here.
00:06:59Â If we move this horizontal, you can notice that they should start appearing vertically.
00:07:06Â There we go.
00:07:06Â Although it's quite hard to see them.
00:07:09Â There we go.
00:07:09Â That's better.
00:07:10Â But of course we want this first one to be horizontal and then we want the bottom one to be vertical.
00:07:17Â Great.
00:07:18Â Below it, let's also add an image with a source equal to icons coming from the icons constants dot play.
00:07:30Â And of course we have to import image from react native.
00:07:35Â Let's also give it a class name equal to W12, H12, and absolute.
00:07:42Â So it shows on top of the image background with a resize mode of contain.
00:07:47Â That is looking great.
00:07:50Â Now, as you scroll over them, you can see that looks good.
00:07:54Â But for some reason, it looks like it's not applying this animation because if I just go for zoom in right here, You can see that they're all enlarged,
00:08:06Â but right now it doesn't seem like any of them is.
00:08:09Â And keep in mind, this is the UI we're going for.
00:08:12Â So let's check the active item by giving us a console.log, active item.
00:08:20Â And let's also console log the item that dollar sign ID like this.
00:08:26Â Now we can compare the two by pressing R to reload.
00:08:30Â We get all of this data from before, but somewhere on top of it, we should be able to see just those IDs I'm after.
00:08:37Â Let's first remove the other console log that I think we have right here within the homepage or maybe within the use app,
00:08:44Â right?
00:08:44Â Let's see.
00:08:46Â No, that's not it.
00:08:47Â Where is this console log hiding?
00:08:49Â Let's search for it.
00:08:50Â Console.log.
00:08:52Â We have one right here in trending, which is the one we created right now.
00:08:56Â We have the error and then we have error and error.
00:08:59Â Okay, that's good.
00:09:00Â So we don't have any additional console logs.
00:09:02Â Maybe these are just old ones, but no, they seem to appear every time, which is quite interesting.
00:09:09Â Oh, maybe that's because this is this active item.
00:09:12Â Yeah, the active item could be the actual element.
00:09:14Â So we might need to do active item dot and then dollar sign ID.
00:09:19Â Let's try that.
00:09:21Â There we go.
00:09:22Â That's good.
00:09:23Â So now we get this ID and we get the second ID.
00:09:26Â And only for the one that matches, we should make it enlarge.
00:09:30Â So let's see if we try doing active item dot dollar sign ID.
00:09:36Â There we go, now that one is big, and if we switch over it...
00:09:42Â Additional ones don't change, so we want to actually change this as we swipe.
00:09:47Â And maybe at the start, we make the second one bigger by changing the active item to 1 right here.
00:09:54Â That way, it's more similar to what we have in the design.
00:09:58Â But how do we actually use this setActiveItem so that they modify once we scroll?
00:10:03Â Well, let's create a new function, constViewable, Items changed.
00:10:10Â This is pretty amazing.
00:10:11Â You're basically given this handler immediately by the flat list.
00:10:16Â I mean, what doesn't the flat list do?
00:10:18Â So you can say on viewable items changed.
00:10:22Â And basically this is called when the viewability of rows changed defined by the viewable row.
00:10:27Â So let's say on viewable items changed, we call our viewable items change function.
00:10:33Â And let's say changed, not changes.
00:10:35Â There we go.
00:10:36Â As the parameter, we are getting the item so we can destructure the viewable items from it.
00:10:44Â And we want to say, if viewableItems.length is greater than zero, meaning if we have more, we want to set activeItem to be equal to viewableItems 0.key.
00:10:59Â Right below it, we also want to modify the viewability config.
00:11:04Â where we can give it the item visible percent threshold of about 70. And we can give it the content offset to figure out when do we actually apply that
00:11:17Â visibility percentage by saying like X is about 170 pixels.
00:11:23Â Now, if we go back, the active items are not what they used to be.
00:11:28Â Now they should be the actual key of that item.
00:11:31Â So here we no longer have to use the ID that I added before.
00:11:37Â And if I save it, you can see now the middle one is enlarged.
00:11:41Â But if I scroll, they actually change.
00:11:44Â And in case you want to make it even larger, you can modify the scale even more.
00:11:49Â For example, scale 1.1 or even 1.2. And you can see how it looks like right now.
00:11:56Â I think 1.1 might be the most we can go for.
00:12:00Â This is actually great.
00:12:01Â Perfect.
00:12:02Â So now we have also implemented some animations to our application.
00:12:06Â But the question is, how do we now click on it and play it?
00:12:11Â Right now, we get nothing.
00:12:13Â We have to implement this part right here.
00:12:15Â When the playing is true, we have to use this new package we have installed called Expo AV that will allow us to play videos.
00:12:24Â So right here, let's use their video component, just like so.
00:12:29Â It will be self-closing and it's coming from the top by saying import.
00:12:37Â And another thing we'll use is the resize mode, also coming from ExpoAV.
00:12:45Â Within this video, we want to add a source of the video, which will be equal to URI, which will be equal to the source of the video.
00:12:52Â item.video, but that's not enough on its own.
00:12:56Â Let's also apply a class name of w of 52, h of 72, so the same size as the actual container, rounded-35 pixels.
00:13:09Â margin top of three and background white over 10. There we go.
00:13:14Â So now we can see the video right here.
00:13:17Â This one is horizontal.
00:13:18Â So it looks a bit different on the vertical view, but that's okay.
00:13:22Â We can add a resize mode.
00:13:26Â Equal to, and now we can use this special component called resize mode coming from the Expo AV and use the .contain functionality.
00:13:36Â We can also say use native controls as well as should play.
00:13:42Â So the video should play and that way it plays immediately once you click on it.
00:13:48Â And we can also say on playback status update.
00:13:52Â We get access to the status.
00:13:54Â And if status.didJustFinish, I like the naming of these variables.
00:14:00Â It's very descriptive.
00:14:02Â If it did just finish, we set play to false, which should bring us back to the view of the actual thumbnail.
00:14:10Â There we go.
00:14:10Â It's easier than we thought, right?
00:14:12Â So now if we go here, if I click on it, the video loads and it starts playing.
00:14:18Â This one looks better as it is in vertical view.
00:14:22Â And it looks amazing.
00:14:24Â You can also zoom it in and go full screen.
00:14:29Â I mean, how cool is that?
00:14:31Â Your own video sharing platform.
00:14:35Â These are just short shorts.
00:14:36Â Let's try with this one.
00:14:38Â There we go.
00:14:39Â You can also zoom it in.
00:14:40Â You can play audio.
00:14:42Â I'm going to mute it for now and play.
00:14:45Â Rule number six.
00:14:46Â If the plan doesn't work, change the plan, but never the goal.
00:14:50Â Yep.
00:14:50Â I hope your goal is to become a professional developer, which is exactly why you're watching this video.
00:14:56Â And here we have another one where we can also go to the start, expand it.
00:15:02Â And the coolest thing is you can actually rotate your phone and see it in full screen if it's horizontal.
00:15:09Â This is great.
00:15:10Â And this is a pretty cool video generated by Sora using AI.
00:15:16Â So this is a beautiful latest video section.
00:15:20Â Now let's focus on trying to play these videos below.
00:15:24Â We can do that by copying this video component, closing all the currently open files, moving back to home and going right here within our video card and
00:15:37Â going to the part where we actually play something.
00:15:39Â We can paste this video component.
00:15:42Â We can modify it a bit.
00:15:44Â URI will simply be video.
00:15:46Â Class name will be full width this time, so WFull, H60, rounded XL, and margin top three.
00:15:58Â We don't need the background in this case.
00:16:02Â The resize mode will be contained.
00:16:04Â Don't forget to import the resize mode from Expo AV, as well as the video also coming from Expo AV.
00:16:10Â We can do that at the top.
00:16:14Â We can use the native controls, should play, and then we also use the same on PlayBake status update.
00:16:21Â So now if we save it and if we play, let's do this horizontal video and click play, it actually opens up.
00:16:30Â And as you know, you have full controls and you can turn your phone around as you normally would with any kind of application that you're already used to,
00:16:38Â to view it in full screen.
00:16:40Â This is great.
00:16:42Â We can also do something like that for these videos right here.
00:16:46Â Perfect.
00:16:46Â Let's see what happens if I click on another one.
00:16:50Â Okay.
00:16:50Â That one is now playing and make sure to mute it as there's loud audio coming from this YouTube short.
00:16:57Â But these videos are also playing from before, which is totally okay.
00:17:01Â We can have multiple videos playing on this screen.
00:17:04Â This is looking great.
00:17:07Â And I especially love these portraits right here at the top with this slight animation.
00:17:12Â For some reason, they disappeared now, which is a bit weird, but I do think they're coming back.
00:17:17Â And don't forget, if you reload, if you pull it to the top, it will refetch all of these videos at the bottom.
00:17:23Â There might be some tweaks which we can still modify and improve, but for now, this is amazing.
00:17:29Â I am very happy with the homepage that we have created.
00:17:33Â If there are some tweaks we might need to make, we can do that soon.
00:17:36Â Next pages that we have to implement are the search page.
00:17:40Â So once you search for something, you want to actually show the screen showing only the videos matching that search term.
00:17:48Â And then also there is the profile page to which you go to if you click this J or another avatar right here, whatever your name is.
00:17:56Â And of course, there's the create page, which is basically one large form that will allow us to manually upload those videos and not only view those that
00:18:05Â we have created from AppRide.
00:18:07Â So let's do the search and the profile next, because I want to show you how easily we can reuse these video components we have created so far.
00:18:16Â And then after that, we can focus on the create.
00:18:18Â Phenomenal job so far.
00:18:20Â Leave a comment down below if you're watching until this part of the video.
00:18:24Â Keep it up.