I just wanted to add an <ImageBackground> to my React Native project, but I always get the error message: "TypeError: undefined is not an object (evaluating style.width)". Error located at ImageBackground (at index.js:31).

I have another project where it works perfectly like this. Could it be a problem of the React Native version?

import React, {Component} from 'react'
import {
StyleSheet,
View,
TouchableOpacity,
Text,
AsyncStorage,
Dimensions,
ImageBackground
} from 'react-native'
import * as Colors from '../../themes/colors'
import {getNavigationOptions} from '../../utils/navigation'
import * as ducks from '../../ducks'
import {connect} from 'react-redux'

class LoginScreen extends Component{
  login(){
    const {updateCurrentUser} = this.props
    updateCurrentUser({name: 'Mauricio'})
    console.log('login', this.props.currentUser)
  }

olvidarContraseña(){
   console.log('olvidar contraseña')
}

render(){
return (
  <View style={styles.container}>
    <View style={[styles.input, {borderColor: Colors.primary}]}>
      <ImageBackground>
        style={styles.backgroundImage}
        source={require('./trigo_background.jpg')}>
        {/* <TouchableOpacity
          style={styles.btnSubmit}
          onPress={() => this.login()}
        >
          <Text style={{textAlign: 'center', color: Colors.primary}}>
            Iniciar Sesión
          </Text>
        </TouchableOpacity> */}
      </ImageBackground>
    </View>
  </View>
)
}
}

const styles = StyleSheet.create({
 container: {
  flex: 1,
  justifyContent: 'center',
  alignItems: 'center',
  backgroundColor: '#F5FCFF'
},
backgroundImage: {
 width: Dimensions.get('window').width,
 height: Dimensions.get('window').height,
 position: 'absolute',
 top: 0,
 left: 0
},
btnSubmit: {
 justifyContent: 'center',
 padding: 10,
 flexDirection: 'row'
},
input: {
 height: 40,
 paddingHorizontal: 10,
 borderWidth: 1,
 borderRadius: 5
 }
})

LoginScreen.navigationOptions = ({navigation}) =>
  getNavigationOptions('Login', Colors.primary, 'white')

const mapStateToProps = store => ({
   currentUser: store.currentUser
})

const mapDispatchToProps = {
  updateCurrentUser: ducks.updateCurrentUser
}

export default connect(mapStateToProps, mapDispatchToProps)(LoginScreen)

I just wanted to add an <ImageBackground> to my React Native project, but I always get the error message: "TypeError: undefined is not an object (evaluating style.width)". Error located at ImageBackground (at index.js:31).

I have another project where it works perfectly like this. Could it be a problem of the React Native version?

import React, {Component} from 'react'
import {
StyleSheet,
View,
TouchableOpacity,
Text,
AsyncStorage,
Dimensions,
ImageBackground
} from 'react-native'
import * as Colors from '../../themes/colors'
import {getNavigationOptions} from '../../utils/navigation'
import * as ducks from '../../ducks'
import {connect} from 'react-redux'

class LoginScreen extends Component{
  login(){
    const {updateCurrentUser} = this.props
    updateCurrentUser({name: 'Mauricio'})
    console.log('login', this.props.currentUser)
  }

olvidarContraseña(){
   console.log('olvidar contraseña')
}

render(){
return (
  <View style={styles.container}>
    <View style={[styles.input, {borderColor: Colors.primary}]}>
      <ImageBackground>
        style={styles.backgroundImage}
        source={require('./trigo_background.jpg')}>
        {/* <TouchableOpacity
          style={styles.btnSubmit}
          onPress={() => this.login()}
        >
          <Text style={{textAlign: 'center', color: Colors.primary}}>
            Iniciar Sesión
          </Text>
        </TouchableOpacity> */}
      </ImageBackground>
    </View>
  </View>
)
}
}

const styles = StyleSheet.create({
 container: {
  flex: 1,
  justifyContent: 'center',
  alignItems: 'center',
  backgroundColor: '#F5FCFF'
},
backgroundImage: {
 width: Dimensions.get('window').width,
 height: Dimensions.get('window').height,
 position: 'absolute',
 top: 0,
 left: 0
},
btnSubmit: {
 justifyContent: 'center',
 padding: 10,
 flexDirection: 'row'
},
input: {
 height: 40,
 paddingHorizontal: 10,
 borderWidth: 1,
 borderRadius: 5
 }
})

LoginScreen.navigationOptions = ({navigation}) =>
  getNavigationOptions('Login', Colors.primary, 'white')

const mapStateToProps = store => ({
   currentUser: store.currentUser
})

const mapDispatchToProps = {
  updateCurrentUser: ducks.updateCurrentUser
}

export default connect(mapStateToProps, mapDispatchToProps)(LoginScreen)

• javascript
• react-native

Share Improve this question Follow edited Apr 9, 2018 at 18:00 Benjamin Heinke asked Apr 9, 2018 at 15:45 Benjamin HeinkeBenjamin Heinke 2,99211 gold badge1919 silver badges3131 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

The error is in your code snippet

<ImageBackground> <== Here
        style={styles.backgroundImage}
        source={require('Valcereal/assets/trigo_background.jpg')}>
        {/* <TouchableOpacity
          style={styles.btnSubmit}
          onPress={() => this.login()}
        >
          <Text style={{textAlign: 'center', color: Colors.primary}}>
            Iniciar Sesión
          </Text>
        </TouchableOpacity> */}
      </ImageBackground>

You've closed the tag and adding lines of code after it which would throw an error since it is not valid jsx

The correct code is

<ImageBackground
            style={styles.backgroundImage}
            source={require('Valcereal/assets/trigo_background.jpg')}>
            {/* <TouchableOpacity
              style={styles.btnSubmit}
              onPress={() => this.login()}
            >
              <Text style={{textAlign: 'center', color: Colors.primary}}>
                Iniciar Sesión
              </Text>
            </TouchableOpacity> */}
          </ImageBackground>

At the top of your file destructor the height and width property like

const { width, height } = Dimensions.get('window');

In our styles object replace BackgroundImage object with

backgroundImage: {
   width: width,
   height: height,
   position: 'absolute',
   top: 0,
   left: 0
},

Another alternative to setting a backgroundImage in React native is to set the height and width to 100%.

backgroundImage: {
   width: 100%,
   height: 100%,
},

Despite the wrong format you have provided, you'll also get the same results/error. so the style of ImageBackground should be like this:

{ width: undefined, height: undefined } 

Provided in the doc's of react-native ImageBackground