I'm trying to make an app similar to a chatting service in react-native. I have 3 files: fpLogin(Login page), ChatsScreen(The screen where you can see all of your active chats), ChatsComponent(I'm passing chats in chatsScreen as chatsComponent as it seems more efficient to me)

It's still a work in progress but I keep getting stuck on this one error which says: "Cannot read properties of undefined (reading 'width')

Would be much appreciated if someone could help me out here as I am stuck on this for about 3 days now...

fpLogin

import React, { useState } from "react";
import {
  Text,
  View,
  Button,
  StyleSheet,
  TextInput,
  ImageBackground,
} from "react-native";

const fpLogin = ({ navigation }) => {
  const [username, setUsername] = useState("");
  const [password, setPasword] = useState("");
  const flag = false;
  return (
    <ImageBackground
      style={styles.background}
      source={require("../../assets/background.jpg")}
    >
      <View>
        <Text style={styles.mid}>Login page</Text>
        <TextInput
          style={styles.textBox}
          placeholder={"Enter Username"}
          autoCapitalize="none"
          autoCorrect={false}
          value={username}
          onChangeText={(newValue) => setUsername(newValue)}
        />
        <TextInput
          style={styles.textBox}
          placeholder={"Enter Password"}
          autoCapitalize="none"
          autoCorrect={false}
          secureTextEntry={true}
          value={password}
          onChangeText={(newValue) => setPasword(newValue)}
        />
        <Button title="Login" onPress={() => navigation.navigate("Chat")} />
      </View>
    </ImageBackground>
  );
};

styles = StyleSheet.create({
  mid: {
    fontSize: 50,
    textAlign: "center",
  },
  textBox: {
    fontSize: 30,
    textAlign: "center",
    borderWidth: 3,
    borderColor: "black",
    margin: 20,
  },
  background: {
    flex: 1,
    width: null,
  },
});

export default fpLogin;

ChatsScreen

import React from "react";
import { View, Text, Button, StyleSheet, ImageBackground } from "react-native";
import ChatsComponent from "../components/ChatsComponent";

const ChatsScreen = () => {
  return (
    <View>
      <ImageBackground
        source={require("../../assets/background.jpg")}
        style={styles.background}
      />
      <ChatsComponent name="Jannet" />
      <ChatsComponent name="Mike" />
      <ChatsComponent name="Adam" />
      <ChatsComponent name="Ofek" />
      <ChatsComponent name="Matti" />
      <ChatsComponent name="Yaniv" />
      <ChatsComponent name="Shani" />
      <ChatsComponent name="Noy" />
      <ChatsComponent name="Paul" />
      <ChatsComponent name="Daniel" />
    </View>
  );
};

styles = StyleSheet.create({
  background: {
    flex: 1,
  },
});

export default ChatsScreen;

ChatsComponent

import React from "react";
import { View, Text, Button, StyleSheet, TouchableOpacity } from "react-native";

const Chats = ({ name }) => {
  return (
    <View>
      <TouchableOpacity style={styles.buttonFacebookStyle}>
        <Text style={styles.nameStyle}>{name}</Text>
      </TouchableOpacity>
    </View>
  );
};

styles = StyleSheet.create({
  buttonFacebookStyle: {
    flexDirection: "row",
    alignItems: "center",
    backgroundColor: "#485a96",
    borderWidth: 0.5,
    borderColor: "#fff",
    height: 40,
    width: null,
    borderRadius: 4,
    margin: 5,
  },
  nameStyle: {
    alignContent: "center",
  },
});

export default Chats;

This is the ERROR screen I am getting on my npm

https://i.stack.imgur.com/INV6P.jpg

Thanks in advance to anyone who is willing to help :)

CodePudding user response：

I think you need to explicitely set the size of ImageBackground try:

 <ImageBackground
      style={styles.background}
      source={require("../../assets/background.jpg")}
    >
    ...
    ...

background: {
  flex: 1,
  width: '100%',
  height: '100%',
  resizeMode: 'cover'}

CodePudding user response：

You are not declaring styles as constant.

Try to use it like this:

const styles = StyleSheet.create({

    `enter your style here`

}) 

Also, you can use width directly without calling on style prop. ImageBackground has width and height API.

<ImageBackground
    width={'100%'}
    height={'100%'}>
`you can use width and height`
</ImageBackground>