Expo - alert wywołuje się przy każdym renderze

Witam,

Piszę pierwszą aplikację w expo. Robię próbną stronę logowania. Aplikacja powinna wyświetlić alert przy próbie logowania w przypadku gdy mail lub haslo jest błędne. Problem polega na tym, że alert wyświetla się przy każdym renderze tj na wejściu i po każdej zmianie litery w polu mail lub haslo. Co można z tym zrobić?

Dodatkowo po kilku próbach zmienienia kodu, dostaje jeszcze błąd:

App.js (128:1)
Parsing error: 'import' and 'export' may only appear at the top level
(ESLint)
126 | });
127 |

128 | export defaulf function App();
| ^
129 |
130 | (null)

App.js

import React, { useState } from "react";
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { View, Text, StyleSheet, Image, TextInput, Button, TouchableOpacity, Alert } from 'react-native';
import { StatusBar } from "expo-status-bar";


function LoginScreen({navigation}) {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  
  return (
    <View style={styles.container}>
      <Image style={styles.image} source={require("./LV.jpg")} />
 
      <StatusBar style="auto" />
      <View style={styles.inputView}>
        <TextInput
          style={styles.TextInput}
          placeholder="Email."
          placeholderTextColor="#003f5c"
          onChangeText={(email) => setEmail(email)}
        />
      </View>
 
      <View style={styles.inputView}>
        <TextInput
          style={styles.TextInput}
          placeholder="Password."
          placeholderTextColor="#003f5c"
          secureTextEntry={true}
          onChangeText={(password) => setPassword(password)}
        />
      </View>
 
      <TouchableOpacity>
        <Text style={styles.forgot_button}>Forgot Password?</Text>
      </TouchableOpacity>
 
      <TouchableOpacity
      style={styles.loginBtn}
      onPress={(email == "marcin" && password == "123" ) ? () => navigation.navigate('Main') : Alert.alert('Wrong email or password')}>
        <Text style={styles.loginText}>LOGIN</Text>
      </TouchableOpacity>
    </View>
  )};




function MainScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
};




const Stack = createNativeStackNavigator();

function App ()  {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name='Login'
          component={LoginScreen}
        />
        <Stack.Screen 
          name="Main" 
          component={MainScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
 
  image: {
    marginBottom: 40,
    width: 150,
    height: 150
  },
 
  inputView: {
    backgroundColor: "#24C1BB",
    borderRadius: 30,
    width: "70%",
    height: 45,
    marginBottom: 20,
 
    alignItems: "center",
  },
 
  TextInput: {
    height: 50,
    flex: 1,
    padding: 10,
    marginLeft: 20,
  },
 
  forgot_button: {
    height: 30,
    marginBottom: 30,
  },
 
  loginBtn: {
    width: "80%",
    borderRadius: 25,
    height: 50,
    alignItems: "center",
    justifyContent: "center",
    marginTop: 40,
    backgroundColor: "#24C1BB",
  }
});

export default function App();

Chyba błąd masz tu:

onChangeText={(email) => setEmail(email)}

powinno być:

onChangeText={(e) => setEmail(e.target.value)}

Co do drugiego błędu prawdopodobnie nie zamknąłeś jakiegoś nawiasu:
https://stackoverflow.com/questions/52148510/reactjs-whats-wrong-import-and-export-may-only-appear-at-the-top-level

Tutaj do końca nie jestem pewien, ale wydaje mi się, że zamiast:

export default function App();

powinno być:

export default App;

Jeśli chodzi o błąd z alertem to ten fragment

Glt87 napisał(a):

<TouchableOpacity
 style={styles.loginBtn}
 onPress={(email == "marcin" && password == "123" ) ? () => navigation.navigate('Main') : Alert.alert('Wrong email or password')}>
  <Text style={styles.loginText}>LOGIN</Text>
</TouchableOpacity>

powinieneś zmienić raczej zmienić jakoś tak

<TouchableOpacity
  style={styles.loginBtn}
  onPress={() => {
    if (email == "marcin" && password == "123" ) {
      return navigation.navigate('Main');
    }
  
    Alert.alert('Wrong email or password')
  }>
    <Text style={styles.loginText}>LOGIN</Text>
</TouchableOpacity>

bo teraz w Twojej wersji Alert.alert('Wrong email or password') jest poza funkcją i nie czeka na kliknięcie w przycisk.

Rozwiązanie problemu.

https://stackoverflow.com/questions/42329240/react-native-onpress-being-called-automatically