Use Placeholder Image if the item.image is null (React Native)

Use Placeholder Image if the item.image is null (React Native)

react native image
react native image placeholder
react-native-image-fallback
react native image lazy load
react native image local file path
react native display multiple images
react native preload images
static image in react native

I'm using FlatList to render multiple Images on the Screen. I want to render placeholder Image when item.img is null (items are fetched from react-redux).

Problems:

  1. I want to use placeholder image using 'require'. And it's using single curly brace. <Image source={ require('../assets/images/robot-prod.png') } style={styles.palceholderImage}/>. While normal Image rendering use two curly braces {{uri: item.img}}.

  2. Should I inline if(item.img) operator?

Here is _renderItem function.

 _renderItem = ({item}) => {
    let imgUrl = item.img;

    return (
      <TouchableWithoutFeedback
        onPress={() => this._handleCategoryPress(item.id)}>
        <Image
          key={item.id}
          source={{uri: item.img}}
          style={styles.rowImage}
          resizeMode="cover"
        />
      </TouchableWithoutFeedback>
    );
  }

This is API response

[
    {
        "id": 1,
        "name": "Gym",
        "image": "www.aws.blahblahblah"
    },
    {
        "id": 2,
        "name": "School",
        "image": null
    },
    {
        "id": 3,
        "name": "hollymo",
        "image": "www.aws.blahblahblah"
    },

Thanks


You're looking for a full React component. An easy way of controlling rendering based on a completed API call is to use it as a promise and .then using this.setState If you're well versed in promises:

apiPromise = () => new Promise((resolve, reject)=> {
  apiData = myApiCall()
  resolve(apiData)
}

class StuffToRender extends Component {
constructor(props) {
  super(props)
  this.state = {
    loaded: false
  }
}
componentWillMount() {
  apiPromise().then (() => {
    this.setState({loaded: true})
  })
}

render() {
  return (
    <div>
      {this.state.loaded ? myContent : myContentWhileLoading}
    </div>
  )
}
}

Also, as a side note, the error you received from the other user's solution has nothing to do with the API/loading logic. It's the fact that you tried to return more than 1 html or component element:

render() {
  return (
    <div>
      stuff
    </div>
    <div>
      stuff2
    </div>
  ) //two sets of div elements expose
}

Here you are render 2 sets of items. This is what 'multiple children' means. But it's an easy fix. Just wrap the items in one single, larger container.

render() {
  return (
    <div>
      <div>
        stuff
      </div>
      <div>
        stuff2
      </div>
    </div>
  ) //everything wrapped into one single div
}

Use Placeholder Image if the item.image is null (React Native), I'm using FlatList to render multiple Images on the Screen. I want to render placeholder Image when item.img is null (items are fetched from react-redux). buildImages() will at that point use the data to configure the images to the proper URLs. The last thing to think about is that we must set the defaultSource prop for the <Image/> component to the placeholder. This allows the <Image/> components to fetch the image assets, while allowing to display something for the user.


Try this

       item.image &&      
        <Image
          key={item.id}
          source={{uri: item.img}}
          style={styles.rowImage}
          resizeMode="cover"
        />

       !item.image &&      
        <Image
          key={item.id}
          source={require('../assets/images/robot-prod.png')}
          style={styles.palceholderImage}
          resizeMode="cover"
        />

Adding image placeholders in react native the right way, When developing applications in react native we often use image element which load images from some url. On faster networks and simple  Image source:Pixabay. When developing applications in react native we often use image element which load images from some url. On faster networks and simple applications the images load gracefully


We can handle it better in react native by following approach.

As, base64 images render in react native out of the box.

So for your case,

  1. Get the base64 data for your placeholder image.

  2. In your component,

    const placeholderBase64image = "data:image/png;base64 [yourbase64imagedata]"

  3. Inside View, use it as:

    <Image source={{ uri: yourImageUri ? yourImageUri : placeholderBase64image }}/>

mitogh/react-native-image-placeholder: Load images , Contribute to mitogh/react-native-image-placeholder development by creating Then import the Component where you have plans to use it, for example: Object, true, null, The styles applied to the container View of the placeholder image. Import the file as specified on the installation steps. Then import the Component where you have plans to use it, for example: import ImagePlaceholder from 'react-native-image-with-placeholder'. And inside of the render method of your component add the component with the properties you require.


add place holder image in react native Image. use defaultSource tag

<Image source={{ uri: require('../images/dummy.png')}} style={styles.itemImage} defaultSource={images.dummy} />

Change the source uri if image not exists · Issue #22 · oblador/react , I'm trying with onError method but the image still loading. Thanks! oblador / react-native-image-progress undefined is not an object (evaluating this.refs[​myid]. Convert Image source prop to use src if uri is broken. TextInput has by default a border at the bottom of its view. This border has its padding set by the background image provided by the system, and it cannot be changed. Solutions to avoid this is to either not set height explicitly, case in which the system will take care of displaying the border in the correct position, or to not display the border by setting underlineColorAndroid to trans


Stable image component with placeholder in React, To build React apps with such an image component, there are several things to consider… are several things to consider from both React and DOM aspect of view. null} <img src={src} style={!loaded ? { visibility: 'hidden' } : {}} Since React 16.3, using createRef is the recommended way. the ref object  A React component for displaying different types of images, including network images, static resources, temporary local images, and images from local disk, such as the camera roll. This example shows fetching and displaying an image from local storage as well as one from network and even from data provided in the 'data:' uri scheme.


How To Use Placeholder Images in React Native, setState() with an updated state object containing the image objects as a member labeled data, forcing a refresh of the render cycle. Now that we  Placeholder.com is a free image placeholder service for web designers, serving billions and billions of images each year. You can specify image size & format (.GIF, .JPG, .PNG, .WEBP) , background color & text color, as well as the text.


react-image, React Image is an <img> tag replacement and hook for React.js, When using the component, you can specify any React element to be used  In most case, showing placeholders during loading images is a good idea, especially for slow network/devices. To build React apps with such an image component, there are several things to consider from both React and DOM aspect of view. In this article, I will describe how to implement such a component by showing examples written in ES6.