React Native -- TouchableOpacity takes time to navigate - reactjs

Question

I have created an app in which if I am using TouchableOpacity to perform any action or navigate but the issue is that I need to click button multiple times also it takes time to navigate to next place. I am writing simple piece of code but don't know why it causing this issue. Please help.
Code to navigate to Login Screen
goToLogin = () => {
navigation.replace('SignIn');
};
UI Code
<KeyboardAvoidingView
style={{
display: 'flex',
height: Dimensions.get('window').height,
width: Dimensions.get('window').width,
}}
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
<ScrollView
style={{
flex: 1,
backgroundColor: !darkTheme
? Colors.light.backgrounColor
: Colors.dark.backgrounColor,
}}>
<View
style={{flex: 0.15, alignItems: 'center', justifyContent: 'center', marginTop:height*0.1}}>
{!darkTheme ? (
<Image
source={require('../assets/images/logo.png')}
resizeMode="contain"
/>
) : (
<Image
source={require('../assets/images/logo-white.png')}
resizeMode="contain"
/>
)}
</View>
<View style={{alignItems:'center', justifyContent:'center', flex: 0.875,}}>
<View
style={{
alignSelf: 'center',
marginTop:height*0.02
}}>
<View
style={{
width: width * 0.9,
borderRadius: 20,
marginHorizontal: width * 0.015,
marginBottom: height * 0.05,
padding: width * 0.03,
shadowColor: '#49494966',
shadowOffset: {
width: -9,
height: -9,
},
shadowRadius: 16,
shadowOpacity: 0.5,
}}>
<View>
<Text
style={{
color: !darkTheme
? Colors.light.textColor
: Colors.dark.textColor,
fontFamily: 'FiraSans-Medium',
fontSize: 20,
}}>
Sign Up
</Text>
{/* Your Name */}
<View
style={{
flexDirection: 'row',
marginTop: height * 0.04,
width: width,
alignItems: 'center',
}}>
{!darkTheme ? (
<Image
source={require('../assets/images/name.png')}
resizeMode="contain"
/>
) : (
<Image
source={require('../assets/images/name-white.png')}
resizeMode="contain"
/>
)}
<TextInput
style={{
fontSize: 16,
fontFamily: 'OpenSans-Regular',
paddingHorizontal: width * 0.01,
color: !darkTheme ? Colors.light.black : Colors.light.white,
borderColor: !darkTheme
? Colors.light.textInputLine
: Colors.light.white,
borderBottomWidth: 1,
width: width * 0.75,
}}
value={yourName}
onChangeText={value => {
setYourName(value);
}}
clearButtonMode="always"
placeholder="Your Name"
placeholderTextColor={
!darkTheme
? Colors.light.placeholderColor
: Colors.light.white65
}
autoCapitalize="none"
/>
</View>
{/* Date of Birth */}
<TouchableOpacity onPress={showDatepicker}>
<View
style={{
flexDirection: 'row',
marginTop: height * 0.04,
width: width,
alignItems: 'center',
}}>
{!darkTheme ? (
<Image
source={require('../assets/images/dob.png')}
resizeMode="contain"
/>
) : (
<Image
source={require('../assets/images/dob-white.png')}
resizeMode="contain"
/>
)}
<View
style={{
borderColor: Colors.light.textInputLine,
borderBottomWidth: 1,
}}>
<Text
style={{
fontSize: 16,
fontFamily: 'OpenSans-Regular',
paddingHorizontal: width * 0.01,
color: dateSelected
? Colors.light.textColor
: Colors.light.placeholderColor,
width: width * 0.75,
}}>
{dateSelected ? dob : ' Date of Birth'}
</Text>
</View>
</View>
</TouchableOpacity>
{show && (
<DatePicker
modal
open={show}
date={startDate}
mode="date"
textColor={Colors.light.text}
display="inline"
onConfirm={date => {
setShow(false);
setDate(date);
setDateSelected(true);
setDOB(moment(date).format('MM-DD-YYYY'));
}}
onCancel={() => {
setShow(startDate);
}}
/>
)}
{/* parent name */}
<View
style={{
flexDirection: 'row',
marginTop: height * 0.04,
width: width,
alignItems: 'center',
}}>
{!darkTheme ? (
<Image
source={require('../assets/images/parent-name.png')}
resizeMode="contain"
/>
) : (
<Image
source={require('../assets/images/parent-name-white.png')}
resizeMode="contain"
/>
)}
<TextInput
style={{
fontSize: 16,
fontFamily: 'OpenSans-Regular',
paddingHorizontal: width * 0.01,
color: !darkTheme ? Colors.light.black : Colors.light.white,
borderColor: !darkTheme
? Colors.light.textInputLine
: Colors.light.white,
borderBottomWidth: 1,
width: width * 0.75,
}}
value={parentName}
onChangeText={value => {
setParentName(value);
}}
clearButtonMode="always"
secureTextEntry={false}
placeholder="Parent Name"
placeholderTextColor={
!darkTheme
? Colors.light.placeholderColor
: Colors.light.white
}
autoCapitalize="none"
/>
</View>
{/* Email */}
<View
style={{
flexDirection: 'row',
marginTop: height * 0.04,
width: width,
alignItems: 'center',
}}>
{!darkTheme ? (
<Image
source={require('../assets/images/email.png')}
resizeMode="contain"
/>
) : (
<Image
source={require('../assets/images/email-white.png')}
resizeMode="contain"
/>
)}
<TextInput
style={{
fontSize: 16,
fontFamily: 'OpenSans-Regular',
paddingHorizontal: width * 0.01,
color: !darkTheme ? Colors.light.black : Colors.light.white,
borderColor: !darkTheme
? Colors.light.textInputLine
: Colors.light.white,
borderBottomWidth: 1,
width: width * 0.75,
}}
value={email}
onChangeText={value => {
setEmail(value);
}}
onSubmitEditing={() => onEmailSubmit()}
clearButtonMode="always"
placeholder="Email"
placeholderTextColor={
!darkTheme
? Colors.light.placeholderColor
: Colors.light.white
}
autoCapitalize="none"
/>
</View>
{/* UserName */}
<View
style={{
flexDirection: 'row',
marginTop: height * 0.04,
width: width,
alignItems: 'center',
}}>
{!darkTheme ? (
<Image
source={require('../assets/images/username.png')}
resizeMode="contain"
/>
) : (
<Image
source={require('../assets/images/username-white.png')}
resizeMode="contain"
/>
)}
<TextInput
style={{
fontSize: 16,
fontFamily: 'OpenSans-Regular',
paddingHorizontal: width * 0.01,
color: !darkTheme ? Colors.light.black : Colors.light.white,
borderColor: !darkTheme
? Colors.light.textInputLine
: Colors.light.white,
borderBottomWidth: 1,
width: width * 0.75,
}}
value={userName}
onChangeText={value => {
setUserName(value.toLowerCase());
}}
clearButtonMode="always"
secureTextEntry={false}
placeholder="Username"
placeholderTextColor={
!darkTheme
? Colors.light.placeholderColor
: Colors.light.white
}
autoCapitalize="none"
/>
</View>
{/* Password */}
<View
style={{
flexDirection: 'row',
marginTop: height * 0.04,
width: width,
alignItems: 'center',
}}>
{!darkTheme ? (
<Image
source={require('../assets/images/password.png')}
resizeMode="contain"
/>
) : (
<Image
source={require('../assets/images/password-white.png')}
resizeMode="contain"
/>
)}
<TextInput
style={{
fontSize: 16,
fontFamily: 'OpenSans-Regular',
paddingHorizontal: width * 0.01,
color: !darkTheme ? Colors.light.black : Colors.light.white,
borderColor: !darkTheme
? Colors.light.textInputLine
: Colors.light.white,
borderBottomWidth: 1,
width: width * 0.7,
}}
value={password}
onChangeText={value => {
setPassword(value);
}}
onSubmitEditing={() => checkPassword(password)}
secureTextEntry={securePwd}
placeholder="Password"
placeholderTextColor={
!darkTheme
? Colors.light.placeholderColor
: Colors.light.white
}
autoCapitalize="none"
/>
<TouchableOpacity onPress={() => setSecurePwd(!securePwd)}>
{securePwd ? (
!darkTheme ? (
<Image
source={require('../assets/images/eye-close.png')}
resizeMode="contain"
style={{width: 30, height: 20}}
/>
) : (
<Image
source={require('../assets/images/eye-close-white.png')}
resizeMode="contain"
style={{width: 30, height: 20}}
/>
)
) : !darkTheme ? (
<Image
source={require('../assets/images/eye-open.png')}
resizeMode="contain"
style={{width: 30, height: 20}}
/>
) : (
<Image
source={require('../assets/images/eye-open-white.png')}
resizeMode="contain"
style={{width: 30, height: 20}}
/>
)}
</TouchableOpacity>
</View>
<View
style={{
flexDirection: 'row',
alignItems: 'center',
marginTop: height * 0.01,
}}>
<Text
style={{
color: !darkTheme
? Colors.light.placeholderColor
: Colors.light.white65,
fontFamily: 'OpenSans-Regular',
fontSize: 16,
marginRight: width * 0.03,
marginLeft: width * 0.01,
textAlign: 'justify',
}}>
{strings.tNc}
<Text
style={{
color: Colors.light.blueColor,
fontFamily: 'OpenSans-Regular',
fontSize: 16,
}}>
{strings.terms}
</Text>
<Text
style={{
color: !darkTheme
? Colors.light.placeholderColor
: Colors.light.white65,
fontFamily: 'OpenSans-Regular',
fontSize: 16,
}}>
{strings.and}
</Text>
<Text
style={{
color: Colors.light.blueColor,
fontFamily: 'OpenSans-Regular',
fontSize: 16,
}}>
{strings.privacyPolicy}
</Text>
</Text>
</View>
{/* sign Up button */}
<View
style={{
width: width * 0.3,
height: height * 0.05,
alignItems: 'center',
justifyContent: 'center',
alignSelf: 'center',
borderRadius: 25,
marginTop: height * 0.04,
backgroundColor: Colors.light.buttonBackground,
marginBottom: height * 0.04,
}}>
<TouchableOpacity
onPress={() => {
validateSignUp();
}}>
<View>
{!loader ? (
<Text
style={{
color: Colors.dark.textColor,
fontFamily: 'FiraSans-Regular',
fontSize: 17,
}}>
{strings.signUp}
</Text>
) : (
<ActivityIndicator color={Colors.light.white} />
)}
</View>
</TouchableOpacity>
</View>
</View>
</View>
</View>
<View
style={{
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
flex: 0.07,
}}>
<Text
style={{
fontFamily: 'OpenSans-Regular',
fontSize: 16,
color: !darkTheme
? Colors.light.placeholderColor
: Colors.light.white65,
marginRight: width * 0.01,
}}>
{strings.alreadyUser}
</Text>
<TouchableOpacity onPress={goToLogin}>
<Text
style={{
fontFamily: 'OpenSans-Regular',
fontSize: 16,
color: Colors.light.blueColor,
}}>
{strings.login}
</Text>
</TouchableOpacity>
</View>
</View>
</ScrollView>
</KeyboardAvoidingView>
Login Button Code
<TouchableOpacity onPress={goToLogin}>
<Text
style={{
fontFamily: 'OpenSans-Regular',
fontSize: 16,
color: Colors.light.blueColor,
}}>
{strings.login}
</Text>
</TouchableOpacity>
Could anyone please help me in this issue as I got fed up with this issue.
Thanks in advance