Home REACT-NATIVE ERROR: ERROR TypeError: Cannot read property 'container' of undefined

Questions

REACT-NATIVE ERROR: ERROR TypeError: Cannot read property 'container' of undefined

January 10, 2024

Every time I Try to the script it gives me this error. I tried multiple options to solve the problem, but I think I made it worse.

i tried changing directory, I tried revisiting the code but found nothing. reinstalled dependencies updated the environment and everything but no result.

here is the code. and also at the bottom you will find full error description.

// AdminLogin.js
import React, { useRef, useEffect, useState } from 'react';
import { View, Text, TextInput, Button, Alert } from 'react-native';
import { loginStyles } from './styles/loginStyle.js'; // Import login styles

const AdminLogin = ({ onLogin }) => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = () => {
    // Basic validation: Check if username and password are not empty
    if (username.trim() !== '' && password.trim() !== '') {
      // Successful login, trigger the onLogin callback
      onLogin();
    } else {
      // Display an alert for invalid credentials
      Alert.alert('Invalid Credentials', 'Please enter a valid username and password.');
    }
  };

  return (
    <View style={loginStyles.container}>
      <Text style={loginStyles.header}>Admin Login</Text>
      <TextInput
        style={loginStyles.input}
        placeholder="Username"
        onChangeText={(text) => setUsername(text)}
      />
      <TextInput
        style={loginStyles.input}
        placeholder="Password"
        secureTextEntry
        onChangeText={(text) => setPassword(text)}
      />
       <TouchableOpacity style={loginStyles.loginButton} onPress={handleLogin}>
        <Text style={loginStyles.loginButtonText}>Login</Text>
      </TouchableOpacity>
    </View>
  );
};

export default AdminLogin;

// loginStyles.js
import { StyleSheet } from 'react-native';

const default StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff', // Background color
    alignItems: 'center',
    justifyContent: 'center',
  },
  logo: {
    width: 120,
    marginBottom: 30,
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    borderRadius: 8,
    paddingHorizontal: 10,
    marginBottom: 20,
  },
  loginButton: {
    backgroundColor: '#007bff',
    paddingVertical: 10,
    paddingHorizontal: 20,
    borderRadius: 8,
  },
  loginButtonText: {
    color: '#fff',
    fontSize: 16,
    textAlign: 'center',
  },
});

export default loginStyle;

ERROR TypeError: Cannot read property ‘container’ of undefined

This error is located at:
in AdminLogin (created by AdminDashboard)
in RCTView (created by View)
in View (created by AdminDashboard)
in AdminDashboard
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in eastt(RootComponent), js engine: hermes
ERROR TypeError: Cannot read property ‘container’ of undefined