Why is gatsby-plugin-image missing image prop? - reactjs

Question

I am working on improving my image sizes and noticed that gatsby image was deprecated so I decided to try on the gatsby-plugin-image. On static images like this:
<StaticImage
src="../images/image.png"
alt="software design"
layout={'fullWidth'}
formats={['auto', 'webp']}
/>
is working fine. But when working on the images from netlify cms I get that following error Missing image prop even I have following:
<GatsbyImage
image={refImage}
alt={refImage}
layout={'fullWidth'}
formats={['auto', 'webp']}
/>
The whole file is as follows.
import React from 'react'
import PropTypes from 'prop-types'
import { GatsbyImage, getImage } from 'gatsby-plugin-image'
import * as S from './styled'
import './postitem.css'
const ReferenceItem = ({
slug,
background,
category,
date,
title,
description,
image,
timeToRead,
}) => {
const refImage = getImage(image)
return (
<S.BlogColumn>
<article className="post" key={slug}>
<S.BlogColumn>
{image && (
<GatsbyImage
image={refImage}
alt={refImage}
layout={'fullWidth'}
formats={['auto', 'webp']}
/>
/* <img
style={{
display: 'block',
width: '100%',
height: 'auto',
}}
src={`/${image}`}
alt={image}
/> */
)}
{!image && (
<img
style={{
display: 'block',
width: '100%',
height: 'auto',
}}
src={require('../../../static/assets/img/cover.webp')}
alt="cover"
/>
)}
</S.BlogColumn>
<S.BlogColumn>
<div className="post-content">
<h2 className="post-title">{title}</h2>
<p className="post-item-description">{description}</p>
<span className="post-date">
{date} —
</span>
<span className="post-words">
{timeToRead} minute read
</span>
</div>
</S.BlogColumn>
</article>
</S.BlogColumn>
)
}
ReferenceItem.propTypes = {
slug: PropTypes.string.isRequired,
background: PropTypes.string,
category: PropTypes.string,
date: PropTypes.string.isRequired,
timeToRead: PropTypes.number.isRequired,
title: PropTypes.string.isRequired,
description: PropTypes.string,
}
export default ReferenceItem

Answer 1

The image needs to be of type GatsbyImageData as processed by gatsby-plugin-sharp or another source plugin that generates the correct format.
Additionally, the props you're passing to GatsbyImage will not work. StaticImage takes props, GatsbyImage needs that information to be passed to the sharp query that generates the images. For example,
{
image {
childImageSharp {
gatsbyImageData(layout: FULL_WIDTH)
}
}
}

Answer 2

They both can take props but Static Image can't get passed props from another component. No passing down to static image. The documentation for the plugin lists which props are for both, and which aren't.
The one that can take the passing down props is Dynamic one, GatsbyImage.

Answer 3

It seems that problem was react native version 0.65 where the `headerTransparent: true makes the button not work properly in android device. And is fixed in the next version.