Type error:undefined is not an object(evaluating 'style.width')

Question

I want to put a car image over a background image, thats all.

import React, { Component } from 'react';
import {
...
  Animated,
  ImageBackground
} from 'react-native';


export default class App extends Component {
  render() {
    return (
      <ImageBackground imageStyle={styles.container} source={require('./src/assets/img/road1.jpg')}>
       <Animated.Image style={styles.car} source={require('./src/assets/img/car2.png')}>
       </Animated.Image>
      </ImageBackground>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    position: 'relative',
    resizeMode: 'cover'
  },
  car:{
    position:'absolute',
    width:100,
    height:50
  }
});

When I run this code here is the error screen; actually message is clear;

Type error:undefined is not an object(evaluating 'style.width')

ok but why it needs 'style.width' even I used resizeMode:'cover' I also set width and heigth attributes in style object still same error.. how can I fix this?

Answer 1

Your Error is coming from ImageBackground.js.

You are supplying a container style as prop to ImageBackground which requires width to be present in there.

You are supplying style by invalid prop imageStyle. It should be supplied as style

try:

<ImageBackground style={styles.container} source={require('./src/assets/img/road1.jpg')}>
       <Animated.Image style={styles.car} source={require('./src/assets/img/car2.png')}>
       </Animated.Image>
</ImageBackground>