CODEWITHSUNDEEP
javascriptreact-native
Benjamin Heinke
Benjamin Heinke

Reputation: 2992

TypeError: undefined is not an object (evaluating style.width) react native

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)

Upvotes: 2

Views: 9026

Answers (3)

codereview
codereview

Reputation: 334

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

Upvotes: 0

Pritish Vaidya
Pritish Vaidya

Reputation: 22209

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>

Upvotes: 3

packability
packability

Reputation: 384

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%,
},

Upvotes: 1

Related Questions