Undefined is not a function on react-native app login screen

Question

Hi Team

I am creating a user registration on react-native, using android on expo go. Now i am tring to call function on press its throwing this exception "undefined is not a function on TouchableOpacity tag atrribute. How can i fix this issue on below code?

import React, { useState } from 'react'
import { Touchable, TouchableOpacity } from 'react-native'
import { KeyboardAvoidingView, StyleSheet, Text, TextInput, View } from 'react-native'
import { auth } from '../firebase'
import { getAuth, createUserWithEmailAndPassword } from 'firebase/auth'

const LoginScreen = () => {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')

  // creating authentication with password and login using firebase.

 const handleSignUp = () => {
    auth.createUserWithEmailAndPassword(email, password).then(userCredential=>{
      const user = userCredential.user;
      console.log(user.email);
    }).catch(error=>alert(error.message))

 }


  // creating registering users.

  



  return (
      <KeyboardAvoidingView
        style={styles.container}
        behavior="padding"> 
        <View style={styles.inputContainer}>
          <TextInput
            placeholder="Email"
            value={email}
            onChangeText={text=>setEmail(text)}
            style={styles.input}
          />

        <TextInput
          placeholder="Password"
          value={password}
          onChangeText={text=>setPassword(text)}
          style={styles.input}
          secureTextEntry
        />

        </View> 
        <View style={styles.buttonContainer}>
        <TouchableOpacity
          onPress={()=> {}}
          style={styles.button}
          > 
          <Text style={styles.buttonText}>Login</Text>
        </TouchableOpacity>
        <TouchableOpacity
          onPress={handleSignUp} // undefined is not a function
          style={[styles.button, styles.buttonOutline]}
        > 
        <Text style={styles.buttonOutlineText}>Register</Text>
        </TouchableOpacity>
        </View>
      </KeyboardAvoidingView>
    
  )
}

export default LoginScreen

const styles = StyleSheet.create({
  container:{
    flex:1,
    justifyContent:'center',
    alignItems:'center',

  },
  
inputContainer:{
  width:'80%'
},

input:{
  backgroundColor:'white',
  paddingHorizontal:15,
  paddingVertical:10,
  borderRadius:10,
  marginTop:5
},
buttonContainer:{
  width:'60%',
  justifyContent:'center',
  alignItems:'center',
  marginTop:40
},
button:{
  backgroundColor:'#0782F9',
  width:'100%',
  padding:15,
  borderRadius:10,
  alignItems:'center'
},
buttonOutline:{
  backgroundColor:'white',
  marginTop:5,
  borderColor:'#0782F9',
  borderWidth:2
},
buttonOutlineText:{
  color:'#0782F9',
  fontWeight:'700',
  fontSize:16
},
buttonText:{
  color:'white',
  fontWeight:'700',
  fontSize:16
}
  
})

// firebase js file

// Import the functions you need from the SDKs you need

import {initializeApp} from 'firebase/app';
import {getFirestore} from 'firebase/firestore';
import {getAuth} from 'firebase/auth';

// TODO: Add SDKs for Firebase products that you want to use


// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "AI***",
  authDomain: "eshopmobile-fb508.firebaseapp.com",
  projectId: "eshopmobile-fb508",
  storageBucket: "eshopmobile-fb508.appspot.com",
  messagingSenderId: "734223583165",
  appId: "1:734223583165:web:6849ecf86323894686b4d4"
};



  // initialize firebase
const app = initializeApp(firebaseConfig);

export const db = getFirestore(app);
export const auth = getAuth();

Tuhin Paul · Answer

The error message undefined is not a function suggests that the onPress attribute you're trying to call is not a function or is undefined. In your code the onPress attribute of the first TouchableOpacity is empty which could be the cause of the error message. Try replacing the onPress attribute with a function that will handle the login

Guest User · Answer

Hi Tuhin onPress is handle by function called but i am still experience this undefined is not function issue. Swain i have remove Touchable and i using correct package TouchableOpacity const handleSignUp = () => { auth.createUserWithEmailAndPassword(email password).then(userCredential=>{ const user = userCredential.user; console.log(user.email); }).catch(error=>alert(error.message)) }

Rajkiran Swain · Answer

The error undefined is not a function on the TouchableOpacity component might be because of a typo or incorrect import of the Touchable component from react-native module. Here are the steps you can follow to resolve the issue: Check the import statement at the top of your file to ensure that you are importing the TouchableOpacity component correctly from the react-native module. import { TouchableOpacity } from 'react-native'; Remove the Touchable import as it is not used in the code. import React { useState } from 'react'; import { TouchableOpacity } from 'react-native'; // change the import statement // ... Check if the handleSignUp function is defined before it is used in the onPress event of the TouchableOpacity component. Register With these changes your code should work as expected. If the issue persists you can try clearing the cache of your Expo Go app and restarting the app.