I need to send an email in react native at the press of a button, but the player should not notice that it has been sent. He should only get an alert saying that the email has been sent, but everything should have been done in the background.
I want to fire it when the button, in the end, is pressed.
I have tried linking, 3rd party libraries, and much other stuff. I have been suffering from this problem for over a year now.
Here's the code that I am currently using (please don't laugh at it):
import React, {useState} from 'react';
import {
Button,
View,
TextInput,
Alert,
Image,
Dimensions,
Text,
StyleSheet,
TouchableOpacity,
ScrollView,
BackHandler,
} from 'react-native';
import DropDownPicker from 'react-native-dropdown-picker';
import { sendEmail } from './sendEmail'
function sendMail() {
sendEmail(
'[email protected]',
'Greeting!',
'I think you are up how many letters you get.'
).then(() => {
console.log('Our email successful provided to device mail ');
});
}
class Appointment extends React.Component {
constructor(props) {
super(props);
this.handleBackButtonClick = this.handleBackButtonClick.bind(this);
this.state = {
purp: '',
date: '',
place: '',
name: '',
adress: '',
city: '',
desc: '',
isDatePickerVisible: false,
purpErr: '',
dateErr: '',
placeErr: '',
nameErr: '',
adressErr: '',
cityErr: '',
descErr: '',
};
}
componentWillMount() {
BackHandler.addEventListener(
'hardwareBackPress',
this.handleBackButtonClick,
);
}
componentWillUnmount() {
BackHandler.removeEventListener(
'hardwareBackPress',
this.handleBackButtonClick,
);
}
handleBackButtonClick() {
this.props.navigation.goBack(
this.props.navigation.navigate('Menu'),
);
return true;
}
showDatePicker = () => {
// this.setState({isDatePickerVisible: true});
};
hideDatePicker = () => {
// setDatePickerVisibility(false);
};
handleConfirm = (date) => {
// console.warn('A date has been picked: ', date);
// hideDatePicker();
};
sendMessage = () => {
};
purpVal = () => {
if (this.state.purp == '') {
this.setState({purpErr: 'Purpose feild cannot be empty'});
} else {
this.setState({purpErr: ''});
}
};
dateVal = () => {
if (this.state.date == '') {
this.setState({dateErr: 'Date feild cannot be empty'});
} else {
this.setState({dateErr: ''});
}
};
placeVal = () => {
if (this.state.place == '') {
this.setState({placeErr: 'Place feild cannot be empty'});
} else {
this.setState({placeErr: ''});
}
};
nameVal = () => {
if (this.state.name == '') {
this.setState({nameErr: 'Name feild cannot be empty'});
} else {
this.setState({nameErr: ''});
}
};
adressVal = () => {
if (this.state.adress == '') {
this.setState({adressErr: 'Adress feild cannot be empty'});
} else {
this.setState({adressErr: ''});
}
};
cityVal = () => {
if (this.state.city == '') {
this.setState({cityErr: 'City feild cannot be empty'});
} else {
this.setState({cityErr: ''});
}
};
descErr = () => {
if (this.state.desc == '') {
this.setState({descErr: 'Description feild cannot be empty'});
} else {
this.setState({descErr: ''});
}
};
submitCheck = () => {
if (this.state.purp == '') {
this.setState({purpErr: 'Purpose feild cannot be empty'});
} else {
this.setState({purpErr: ''});
}
if (this.state.date == '') {
this.setState({dateErr: 'Date feild cannot be empty'});
} else {
this.setState({dateErr: ''});
}
if (this.state.name == '') {
this.setState({nameErr: 'Name feild cannot be empty'});
} else {
this.setState({nameErr: ''});
}
if (this.state.adress == '') {
this.setState({adressErr: 'Adress feild cannot be empty'});
} else {
this.setState({adressErr: ''});
}
if (this.state.city == '') {
this.setState({cityErr: 'City feild cannot be empty'});
} else {
this.setState({cityErr: ''});
}
if (this.state.desc == '') {
this.setState({descErr: 'Description feild cannot be empty'});
} else {
this.setState({descErr: ''});
}
// purp: '',
// date: '',
// place: '',
// name: '',
// adress: '',
// city: '',
// desc: '',
Alert.alert('Your Appointment has been fixed we will contact you');
this.textInputName.clear();
this.textInputDesc.clear();
this.textInputCity.clear();
this.textInputPurp2.clear();
this.textInputPurp.clear();
this.textInputDate.clear();
};
sendEmail = () => {
};
static navigationOptions = {
title: 'Appointments',
};
render() {
const {isDatePickerVisible} = this.state;
const {navigate} = this.props.navigation;
const {width} = Dimensions.get('window').width;
const {height} = Dimensions.get('window').height;
return (
<ScrollView style={styles.conatiner}>
<View style={styles.logo}>
<Image
style={{width: 180, height: 180, marginLeft: 20, borderRadius: 150}}
source={require('../../Components/Images/home.jpg')}
/>
</View>
<View>
<Text
style={{
fontSize: 35,
fontWeight: 'bold',
textAlign: 'center',
marginTop: 10,
color: '#fff',
}}>
Satej Patil
</Text>
<Text
style={{
fontSize: 20,
textAlign: 'center',
marginTop: 5,
color: '#fff',
}}>
Fix Appointment
</Text>
</View>
<TextInput
placeholder="Place"
// keyboardType="number-pad"
placeholderTextColor="#fff"
style={{
marginTop: 45,
borderColor: '#fff',
borderBottomWidth: 2,
color: 'white',
width: 340,
alignSelf: 'center',
}}
onChangeText={(value) => this.setState({purp: value})}
value={this.state.purp}
ref={(inputP2) => {
this.textInputPurp2 = inputP2;
}}
/>
<View style={styles.loginForm}>
{/* <Text style={{fontSize: 23, marginLeft: 70, marginTop: 20}}>Its Time To Login!</Text> */}
<View style={styles.inputs}>
<View style={styles.inputs}>
<TextInput
placeholder="Purpose"
// keyboardType="number-pad"
placeholderTextColor="#fff"
style={{
marginTop: 45,
borderColor: '#fff',
borderBottomWidth: 2,
color: 'white',
}}
onBlur={() => this.purpVal()}
onChangeText={(value) => this.setState({purp: value})}
value={this.state.purp}
ref={(inputP) => {
this.textInputPurp = inputP;
}}
/>
<Text style={{color: 'red'}}>{this.state.purpErr}</Text>
<TextInput
placeholder="DD - MM - YYYY"
// keyboardType="number-pad"
placeholderTextColor="#fff"
style={{
marginTop: 45,
borderColor: '#fff',
borderBottomWidth: 2,
color: 'white',
height: 150,
}}
onBlur={() => this.descErr()}
onChangeText={(value) => this.setState({date: value})}
value={this.state.desc}
ref={(inputD) => {
this.textInputDesc = inputD;
}}
/>
<Text style={{color: 'red'}}>{this.state.dateErr}</Text>
<TextInput
placeholder="Enter Citizen Name Here"
// keyboardType="number-pad"
placeholderTextColor="#fff"
style={{
marginTop: 45,
borderColor: '#fff',
borderBottomWidth: 2,
color: 'white',
height: 150,
}}
onBlur={() => this.descErr()}
onChangeText={(value) => this.setState({name: value})}
value={this.state.desc}
ref={(inputD) => {
this.textInputDesc = inputD;
}}
/>
<Text style={{color: 'red'}}>{this.state.nameErr}</Text>
<TextInput
placeholder="City"
// keyboardType="number-pad"
placeholderTextColor="#fff"
style={{
marginTop: 45,
borderColor: '#fff',
borderBottomWidth: 2,
color: 'white',
}}
onBlur={() => this.cityVal()}
onChangeText={(value) => this.setState({city: value})}
value={this.state.city}
ref={(inputC) => {
this.textInputCity = inputC;
}}
/>
<Text style={{color: 'red'}}>{this.state.cityErr}</Text>
<TextInput
placeholder="Description"
// keyboardType="number-pad"
placeholderTextColor="#fff"
style={{
marginTop: 45,
borderColor: '#fff',
borderBottomWidth: 2,
color: 'white',
height: 150,
}}
onBlur={() => this.descErr()}
onChangeText={(value) => this.setState({desc: value})}
value={this.state.desc}
ref={(inputD) => {
this.textInputDesc = inputD;
}}
/>
<Text style={{color: 'red'}}>{this.state.descErr}</Text>
</View>
</View>
<View style={styles.loginButton}>
<Button
color="#B5B9BD"
title="Send"
onPress={sendMail()}
/>
</View>
<Text></Text>
</View>
</ScrollView>
);
}
}
const styles = StyleSheet.create({
conatiner: {
flex: 1,
backgroundColor: '#3F4243',
},
logo: {
marginLeft: 80,
marginTop: 20,
},
loginForm: {
marginTop: 35,
marginLeft: 25,
},
loginButton: {
marginRight: 20,
marginTop: 25,
},
info: {
marginLeft: 45,
marginTop: 10,
},
inputs: {
marginRight: 25,
},
options: {
flexDirection: 'row',
marginTop: 30,
// marginRight: 20
},
signUp: {
marginLeft: 75,
width: 130,
},
loginAsGuest: {
width: 130,
},
});
export default Appointment;
CodePudding user response：
The browser is designed to PREVENT you sending an email silently
... because that would be a security risk for the end-user, wouldn't it?
Instead, you should send a notification to your server, and have the server send the email.
CodePudding user response：
You can not send an email from user's phone without noticing them. this would be a Malware (short for “malicious software”).
You should have a backend server and use API to send an email from the server. and simply call the API in your APP.