Build React Native WordPress App [Expo way] #6 : image and content placeholder
Tags: reactnative
Published: 2020-02-17 16:20:49

---
title: Build React Native WordPress App [Expo way] #6 : image and content placeholder
published: true
description: this chapter we want to inform user for content being load and will show soon with Rnplaceholder
tags: react-native
cover_image: https://cdn-images-1.medium.com/max/3840/0*d5lPU-n-Vvye4tVK.png
series: Build React native Wordpress client app with Expo 
canonical_url: http://kriss.io/build-react-native-wordpress-app-expo-way-6-image-and-content-placeholder/
---


This series intends to show how I build an app to serve content from my WordPress blog by using react-native. Since we successfully build an app on the React Native CLI path., for the next step, we try to develop this app again but using Expo. We will discover the Expo ecosystem that makes our lives comfortable and help us avoid dealing with Native modules to learn how to deal with WordPress APIs. Here, the most prominent features talked about in the book are the dark theme, offline mode, infinite scroll, in-app purchase, and many more. You can discover much more in this series. this inspiration to do this tutorial series came from the [React Native Templates](http://instamobile.io) from instamobile

this chapter we want to inform user for content being load and will show soon with Rnplaceholder package then we add image place holder again with react-native-image-placeholder is simple and need a little work but make good user experience take they not seen a blank screen

#### Content placeholder

import package to Home.js

```
import {
  Placeholder,
  PlaceholderMedia,
  PlaceholderLine,
  Fade
} from "rn-placeholder";
```

then change render function

```
render() {
    if (this.state.isLoading) {
      return (
        <View style={{ marginTop: 23, padding: 33 }}>
          <RNPlaceHolder />
        </View>
      );
    } else {
```

while isLoading equal true we display placeholder we can adjust placeholder style whatever your want all example available on [snack](https://snack.expo.io/@mfrachet/84bb31)

![](https://cdn-images-1.medium.com/max/700/0*cUKAZCL5fRowG5pt.gif)

your will see simple demo for make nice we can add more row like that

![](https://cdn-images-1.medium.com/max/700/0*zeliSJbYE61L6rlP.gif)

but we got a lot of repeats code

```
<View style={{ marginTop: 23, padding: 33 }}>
                   <Placeholder
                       Animation={Fade}
                       Left={PlaceholderMedia}
                       Right={PlaceholderMedia}
                   >
                       <PlaceholderLine width={80} />
                       <PlaceholderLine />
                       <PlaceholderLine width={30} />

                   </Placeholder>
                   <Placeholder
                       Animation={Fade}
                       Left={PlaceholderMedia}
                       Right={PlaceholderMedia}
                   >
                       <PlaceholderLine width={80} />
                       <PlaceholderLine />
                       <PlaceholderLine width={30} />

                   </Placeholder>
                   <Placeholder
                       Animation={Fade}
                       Left={PlaceholderMedia}
                       Right={PlaceholderMedia}
                   >
                       <PlaceholderLine width={80} />
                       <PlaceholderLine />
                       <PlaceholderLine width={30} />

                   </Placeholder>
                   <Placeholder
                       Animation={Fade}
                       Left={PlaceholderMedia}
                       Right={PlaceholderMedia}
                   >
                       <PlaceholderLine width={80} />
                       <PlaceholderLine />
                       <PlaceholderLine width={30} />

                   </Placeholder>

                   <Placeholder
                       Animation={Fade}
                       Left={PlaceholderMedia}
                       Right={PlaceholderMedia}
                   >
                       <PlaceholderLine width={80} />
                       <PlaceholderLine />
                       <PlaceholderLine width={30} />

                   </Placeholder>
                   <Placeholder
                       Animation={Fade}
                       Left={PlaceholderMedia}
                       Right={PlaceholderMedia}
                   >
                       <PlaceholderLine width={80} />
                       <PlaceholderLine />
                       <PlaceholderLine width={30} />

                   </Placeholder>
                   <Placeholder
                       Animation={Fade}
                       Left={PlaceholderMedia}
                       Right={PlaceholderMedia}
                   >
                       <PlaceholderLine width={80} />
                       <PlaceholderLine />
                       <PlaceholderLine width={30} />

                   </Placeholder>
                   <Placeholder
                       Animation={Fade}
                       Left={PlaceholderMedia}
                       Right={PlaceholderMedia}
                   >
                       <PlaceholderLine width={80} />
                       <PlaceholderLine />
                       <PlaceholderLine width={30} />

                   </Placeholder>
```

we can separate to component

```
import React, { Component } from 'react'
import { Text, View } from 'react-native'
import { Placeholder, PlaceholderMedia, PlaceholderLine, Fade } from "rn-placeholder";

export class ContentPlaceholder extends Component {
    render() {
        return (
            <View style={{ marginTop: 23, padding: 33 }}>
                <Placeholder
                    Animation={Fade}
                    Left={PlaceholderMedia}
                    Right={PlaceholderMedia}
                >
                    <PlaceholderLine width={80} />
                    <PlaceholderLine />
                    <PlaceholderLine width={30} />

                </Placeholder>
                <Placeholder
                    Animation={Fade}
                    Left={PlaceholderMedia}
                    Right={PlaceholderMedia}
                >
                    <PlaceholderLine width={80} />
                    <PlaceholderLine />
                    <PlaceholderLine width={30} />

                </Placeholder>
                <Placeholder
                    Animation={Fade}
                    Left={PlaceholderMedia}
                    Right={PlaceholderMedia}
                >
                    <PlaceholderLine width={80} />
                    <PlaceholderLine />
                    <PlaceholderLine width={30} />

                </Placeholder>
                <Placeholder
                    Animation={Fade}
                    Left={PlaceholderMedia}
                    Right={PlaceholderMedia}
                >
                    <PlaceholderLine width={80} />
                    <PlaceholderLine />
                    <PlaceholderLine width={30} />

                </Placeholder>

                <Placeholder
                    Animation={Fade}
                    Left={PlaceholderMedia}
                    Right={PlaceholderMedia}
                >
                    <PlaceholderLine width={80} />
                    <PlaceholderLine />
                    <PlaceholderLine width={30} />

                </Placeholder>
                <Placeholder
                    Animation={Fade}
                    Left={PlaceholderMedia}
                    Right={PlaceholderMedia}
                >
                    <PlaceholderLine width={80} />
                    <PlaceholderLine />
                    <PlaceholderLine width={30} />

                </Placeholder>
                <Placeholder
                    Animation={Fade}
                    Left={PlaceholderMedia}
                    Right={PlaceholderMedia}
                >
                    <PlaceholderLine width={80} />
                    <PlaceholderLine />
                    <PlaceholderLine width={30} />

                </Placeholder>
                <Placeholder
                    Animation={Fade}
                    Left={PlaceholderMedia}
                    Right={PlaceholderMedia}
                >
                    <PlaceholderLine width={80} />
                    <PlaceholderLine />
                    <PlaceholderLine width={30} />

                </Placeholder>
            </View>
        )
    }
}

export default ContentPlaceholder
```

last, add back to Home.js

```
import ContentPlaceholder from '../components/ContentPlaceholder'
```

then replace old code

```
if (this.state.isFetching) {
         return <ContentPlaceholder />;
     } else {
```

now we can use on another screen for the next chapter

#### Image placeholder

next, we add another placeholder for image even another component showing after content placeholder disappear but an image will not load success for this we add another [image placeholder](https://github.com/mfrachet/rn-placeholder) package

```
npm i --save react-native-image-placeholder
```

then import package

```
import ImageLoad from 'react-native-image-placeholder';
```

and replace old card cover component

```
<ImageLoad
    style={{ width: '100%', height: 300 }}
    loadingStyle={{ size: 'large', color: 'blue' }}
    source={{ uri: item.jetpack_featured_media_url }}
/>
```

your will see result

![](https://cdn-images-1.medium.com/max/700/0*gp8N-M0s2WP1GyH9.gif)

next your can add for every screen that wants to initial make HTTP request

#### Conclusion

we successfully add a placeholder to our app that makes look nice and better for the next chapter. We will implement a single post screen to show individual post

---

_Originally published at [Kriss](https://kriss.io/build-react-native-wordpress-app-expo-way-6-image-and-content-placeholder/)._