Fairly new with React-Native and JS. I’ve been creating a simple login screen, used to work and bundle in my phone with expo go app but after modifying a bit the App.js file when I type “npm start” it simple stays bundling forever unless I close VS code.
There are no additional dependencies or modifications besides what comes default when you create a folder with the npx create-expo-app@latest <name> command.
This is my App.js code
import { StyleSheet, Text, View, TextInput, Button, Image, KeyboardAvoidingView, Platform } from 'react-native';
import { useState } from 'react';
export default function App() {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [errors, setErrors] = useState({});
const [isPosting, setIsPosting] = useState(false)
const validateForm = () => {
let errors = {}
if (!email) errors.email = "Email is required"
if (!password) errors.password = "Password is required"
setErrors(errors)
return Object.keys(errors).length === 0;
}
const handleSubmit = async () => {
if(validateForm()) {
setIsPosting(true)
console.log(email, password)
const response = await fetch("IP", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
email: email,
password: password
})
})
console.log("Submitted:", email, password)
const newP = await response.json()
console.log(newP)
setEmail("");
setPassword("");
setErrors({});
setIsPosting(false)
}
}
return (
// makes the keyboard not interferre with the container that hass the username and apssswords
<KeyboardAvoidingView
behavior="padding"
keyboardVerticalOffset={Platform.OS === 'ios' ? 100 : -170}
style={styles.container}
>
<View style={styles.form}>
<Image source={require("C:UsersJan-PCDocumentsCodesJS CodesPasswordVaultassetsadaptive-icon.png")} style={styles.image} />
<Text style={styles.label}>E-mail</Text>
<TextInput
style={styles.input}
placeholder='Enter your E-mail'
value={email}
onChangeText={setEmail}
/>
{
errors.email ? <Text style={styles.errorText}>{errors.email}</Text> : null
}
<Text style={styles.label}>Passsword</Text>
<TextInput
style={styles.input}
placeholder='Enter your password'
secureTextEntry
value={password}
onChangeText={setPassword}
/>
{
errors.password ? <Text style={styles.errorText}>{errors.password}</Text> : null
}
<Button title={isPosting ? "Logging in..." : "Login"} onPress={handleSubmit} />
</View>
</KeyboardAvoidingView>
);
}
const styles = StyleSheet.create({
container: {
flex:1,
justifyContent: "center",
paddingHorizontal: 20,
backgroundColor: "f5f5f5"
},
form: {
backgroundColor: "white",
padding: 20,
borderRadius: 10,
shadowColor: "black",
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5,
},
label: {
fontSize: 16,
marginBottom: 5,
fontWeight: "bold",
},
input: {
height: 40,
borderColor: "#ddd",
borderWidth: 1,
marginBottom: 15,
padding: 10,
borderRadius: 5,
},
image: {
width: 200,
height: 200,
alignSelf: "center",
marginBottom: 50,
},
errorText: {
color: "red",
marginBottom: 10,
},
});
How it looks in VS Code, will stay bundling as long as VS Code is open while consuming processing power. Every time it gets stuck at a different %
Tried deleting the “node_modules” and “package-lock.json” files and then running npm install but still nothing.
Still quite new so don’t know exactly all the tools I have available to find the source of the problem
