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

Question

Hello there I am trying to learn the basics of react navigation and I am setting up a background image for my simple application. I want my background image to fit in the background and I used ImageBackground so I can use components inside of it. The problem is that I keep getting this error TypeError:undefined is not an object ( evaluating style.width )

    class loginScreen extends React.Component {
render() {
    return (
        <ImageBackground
            source={require('./app/img/epicCat.jpg')}
            Style={styles.backgroundImage}
        >

            <View Style={styles.parentContainer}>
                <View Style={styles.usernameContainer}>
                    <Text Style={styles.usernameTextDesign}>USERNAME</Text>
                    <TextInput
                        Style={styles.usernameTextInput}
                        underlineColorAndroid='red'
                    >

                    </TextInput>



                    <Text Style={styles.passwordTextDesign}>PASSWORD</Text>
                    <TextInput Style={styles.passwordTextInput}
                        underlineColorAndroid='red'
                    >

                    </TextInput>



                    <Button Style={styles.loginButton}
                        title="LOG-IN"

                    >

                    </Button>
                </View>

            </View>
        </ImageBackground>
        );
    }
}





const styles = StyleSheet.create({

parentContainer: {
    flex: 1,
    fontFamily: "Montserrat",
    fontSize: 70,
    alignItems: 'center',
    justifyContent: 'center',
},

backgroundImage: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    height: '100%',
    width: '100%',
},

标签： react-nativereact-native-android

Answer 1

Looking from the code, I think you have a typo, instead ofStyle={...} it should be style={...}