react-native

Warning: Failed prop type: Invalid props.style key `0` supplied to `Image`

I was following Multiplatform Mobile App Development with React Native course at Coursera and in that course the instructor use a Card component. But I got warning when I exactly use the same code in my project. 

Warning: Failed prop type: Invalid props.style key `0` supplied to `Image`.

here is the full warning message. I think the following code causes the warning,

import React from 'react';
import { Text, View } from 'react-native';
import { Card } from 'react-native-elements';

function RenderDish(props) {
  const dish = props.dish;

  if (dish != null) {
    return (
      <Card
        featuredTitle={dish.name}
        image={require('./images/uthappizza.png')}
      >
        <Text style={{ margin: 10 }}>{dish.description}</Text>
      </Card>
    );
  } else {
    return <View></View>;
  }
}
function Dishdetail(props) {
  return <RenderDish dish={props.dish} />;
}
export default Dishdetail;

But I didn't get why this warning was given? I didn't pass any prop which is related with style then why this occur? I heartily thank if anyone help me to figure out this.

As @Maycon Mesquita said, I tried <Card style={{ width: 150, height: 150 }}> as a prop in the Card but the warning is still there.

Solution

  • The <Card /> component is passing an array's element as a style's prop to Image. This is wrong.

    Try to set a width/height to card.

    However, without knowing the card's code, i would try a generic style prop:

    Option A: style={{ width: 150, height: 150 }}

    Option B: containerStyle={{ width: 150, height: 150 }}

    Otherwise, you will need to post the Card's component code, to we the Image prop's name.