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();