Name: Create a Skeleton Placeholder for your App Content
Uploaded: 2021-09-11T05:32:18-05:00
Description: How to create a skeleton placeholder for dynamically loaded content in your app.

Create Linear Gradients in React Native Using React Native Linear Gradient

Using React Native Linear Gradient for Making White Text Visible on Light Images

Mask UI Elements in React Native With React Native Masked View

Using Animated Style from Reanimated 2 to Animate a View

Create a Skeleton Placeholder for your App Content

Animating a Skeleton Loader using Reanimated 2

Building a Customizable Animated Skeleton Loader in React Native

How to create a skeleton placeholder for dynamically loaded content in your app.

https://app.egghead.io/api/v1/lessons/react-native-create-a-skeleton-placeholder-for-your-app-content/subtitles

Kadi Kraman: [0:00] We start with a React Native app that renders a list of fruits. All of our fruit data is in this data file. We've got the key, name, image URL, and details. Then we have an item list file, which consists of a flat list that takes in the data array.

[0:16] For each item in the array, it renders the image, the name, and the details for the item. Finally, in our app.js, we just have a safe area view with the item list inside.

[0:30] To emulate the effect of it being loaded from an API, when this component gets loaded, we wait for two seconds and then display it. If I reload the app, we'll see a loading indicator for two seconds before the data gets loaded in.

[0:44] To replace the activity indicator with a skeleton loader, we first need to create an item list that roughly mimics the format of the rendered data. Let's create a new file and let's call it item list loader. Import React from React. Export const item list loader.

[1:01] Let's just return a view for now. We also need to import view from React Native. As we're building this, let's just go to our app.js and import item list loader. Let's just comment out this bit and just render the item list loader.

[1:18] To build this out, we can actually use the item list styles as a reference so we'll know what kind of spacing we need to use. We can see that the container has a 20-point padding.

[1:30] Let's go to the item list loader, import style sheet from React Native, and let's create a style sheet at the bottom. Const styles = styles sheet create. We'll do a container and let's give it a padding of 20. Let's apply this to the view. Style = styles.container.

[1:51] Next for the image, you can see that it's got a height and width of 100. Let's do a image height 100 and width 100. Let's do a background color of light gray. Inside this view, let's add another view for the image. We'll do style = styles.image.

[2:16] Now this gets rendered to the middle of the page. If we go to our app.js, we can remove this justify content center so it goes to the top of the page. Let's wrap this image in a view, which would make the item row. Let's give this a style styles.row.

[2:32] The row style will just be flex direction row. Let's give this a style styles.row. The row style will just be flex direction row. Let's add some lines next to the image. Let's do a view with a view inside. Let's do style = styles.line.

[2:49] For the line style, let's do a height of 20, margin bottom of 10, and background color of light gray again. For the width of this, let's import use window dimensions from React Native. In here, let's destructure the width from use window dimensions.

[3:09] In the line styles, let's convert this into an array and let's do width is window width * .6 Now I can copy this line twice and make the second one * .4, so 40 percent of the window, and the last one .2, so 20 percent of the window.

[3:28] Lastly, we'll need some spacing next to the image. Going back to the item list, I can see that this has a margin right of 10. Let's just copy this and add it to the image style. Finally, we'll need some margin underneath each row.

[3:42] Going to the item list again, we'll see that this has a margin button of 40. In a row style, let's add a margin button 40 here. Now we just need to create enough of these to fill the page. Let's copy this view with the row inside.

[3:58] Let's make a new React component underneath here. Let's call it item. We'll also need to copy the window dimensions in here. In the container, let's do a new array. Let's do a 10 item array. Then let's fill this with null, just so we could map over it.

[4:18] Now we can map and we don't care about the actual value, we just care about the index. We will return this item and the key will be the index. Now saving this, we'll have the whole page full of these placeholder items.

[4:34] Going back to our app.js, we can uncomment this if statement and replace the activity indicator with our item list loader. Now when we reload, we'll see our placeholder content for two seconds before the actual content gets loaded in.

Create a Skeleton Placeholder for your App Content

Share this video with your friends

Course

Building a Customizable Animated Skeleton Loader in React Native