React native AlertIOS callback - react-native

When I click the Cancel button, it shows "undefined is not an object". code shown as follow.
Update:
componentWillMount() {
PushNotificationIOS.addEventListener('notification', this._onRemoteNotification);
}
_onRemoteNotification(notification) {
AlertIOS.alert(
'Push Notification Received',
'Alert message: ' + notification.getMessage(),
[{
text: 'OK',
onPress: null,
},
{
text: 'Cancel',
onPress: ()=>this.setState({key: value}),
},
]
);
}
}

If you want you can also simply bind your function and externalize it like that:
onAlertCancel() {
this.setState({key: value});
}
AlertIOS.alert(
'Push Notification Received',
'Alert message: ' + notification.getMessage(),
[{
text: 'OK',
onPress: null,
},
{
text: 'Cancel',
onPress: this.onAlertCancel.bind(this),
},
]
);
}
Also don't forget to bind the main function to allow them to access to this, so:
this._onRemoteNotification became this._onRemoteNotification.bind(this)

You are receiving this error because this is not defined inside AlertIOS.alert. You must reference your component before function call. Your code will look like this:
var self = this;
AlertIOS.alert(
'Push Notification Received',
'Alert message: ' + notification.getMessage(),
[{
text: 'OK',
onPress: null,
},
{
text: 'Cancel',
onPress: ()=>self.setState({key: value}),
},
]
);
}

Related

React Native, running an Alert on Startup of App

Building an internal company app, I need to ask a question before the app renders to determine fields.
I have this code.
useEffect(() => {
if (startup) {
console.log('Display Alert');
{
createTwoButtonAlert;
}
}
}, []);
For my useEffect, then here is my alert
const createTwoButtonAlert = () =>
Alert.alert('Title', 'Here is my Question?', [
{
text: 'Yes',
onPress: () => {
setQuestion(false), setStartup(false);
},
},
{
text: 'No',
onPress: () => {
setQuestion(true), setStartup(false);
},
},
]);
This alert is not displaying on startup with the current code.
Try putting the alert code directly inside useEffect inside the root (App) component. It will run only once when the component mounts.
useEffect(() => {
Alert.alert('Title', 'Here is my Question?', [{
text: 'Yes',
onPress: () => {
setQuestion(false), setStartup(false);
},
},
{
text: 'No',
onPress: () => {
setQuestion(true), setStartup(false);
},
},
]);
}, [])
Ok, while Grabriel's response did work. This was one of those stupid mistakes.
I forgot to inclose my alert in {}
a simple fix.
const createTwoButtonAlert = () => {
Alert.alert('Title', 'Here is my Question?', [
{
text: 'Yes',
onPress: () => {
setQuestion(false), setStartup(false);
},
},
{
text: 'No',
onPress: () => {
setQuestion(true), setStartup(false);
},
},
]);
}

how to navigation when onpress inside an alert

i trying to make a navigation to another screen when press a button on alert but i keep getting erro " [Error: TransformError SyntaxError: D:\one\HomeScreen.js: Unexpected token, expected "," (63:82) "
below is my code
please help me thank you guys
some random words so i can post this question
class HomeScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
input: {
username: null,
email: null,
password: null,
confirm_password: null,
},
errors: {
username: null,
email: null,
password: null,
confirm_password: null,
},
};
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit = (event) => {
//event.preventDefault();
if (this.validate()) {
alert('ok');
console.log(this.state);
this.setState((prevState) => {
let input = Object.assign({}, prevState.input);
input.username = null;
input.password = null;
input.email = null;
input.confirm_password = null;
return { input };
});
this.setState((prevState) => {
let errors = Object.assign({}, prevState.errors);
errors.username = null;
errors.password = null;
errors.email = null;
errors.confirm_password = null;
return { errors };
});
Alert.alert('Đã Đăng Ký',
'Xin Hãy Đăng Nhập',
[
{text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style={styles.container}},
{text: 'OK', onPress: () => this.props.navigation.navigate('List'), //code to navigate}
],
{ cancelable: false });
}
}
Nvm i did it just remove one "," here is code in alert
Alert.alert('Đã Đăng Ký',
'Xin Hãy Đăng Nhập',
[
{text: 'Thoat', onPress: () => console.log('Cancel Pressed')},
// {text: 'OK', onPress: () => this.props.navigation.navigate('List'), //code to navigate}
{text: 'Tien Len', onPress: () => this.props.navigation.navigate('List')}
],
{ cancelable: false });

React native buttons.slice is not a function

I'm trying to print a variable using Alert.alert it might be me but I'm not able to do it Here's my code
const [reg, setRegion] = useState('');
Alert.alert(
"Confirm",
"this is just a " + {reg},
[
{
text: "Cancel",
onPress: () => console.log("Cancel Pressed"),
style: "cancel"
},
{ text: "OK", onPress: () => console.log("OK Pressed") }
],
{ cancelable: false }
);
}
How can I print {reg} variable with a string?
If you getting this while using Alert in React native below solution worked for me.
Alert.alert("Error", "Enter an item", [{ text: "OK" }]);
const [reg, setRegion] = useState('');
Alert.alert(
"Confirm",
`this is just a ${reg}`,
[
{
text: "Cancel",
onPress: () => console.log("Cancel Pressed"),
style: "cancel"
},
{ text: "OK", onPress: () => console.log("OK Pressed") }
],
{ cancelable: false }
);
}

Alert in react native

I am setting error in state true/false and if error = true then want to show alert
So i did this.
constructor() {
super()
this.state = {
email: "",
password: "",
error: false
}
this.handleSignUp = this.handleSignUp.bind(this)
}
and function
handleSignUp() {
fetch('http://myIp:9999/signUp', {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify(this.state),
})
.then((res) => {
console.log("here")
console.log(res)
this.setState({error: false})
}).catch((e) => {
if (e) {
console.log('e')
console.log(e.status)
this.setState({error: true})
}
})
}
and render method as
render() {
var alert1 = alert(
"User exist",
"User with same Email exist. Try some to login or use other Email",
[
{text: "Ok", style: 'cancle', onPress: () => this.setState({error: false})}
]
)
return (
<View style={styles.container}>
{this.state.error ? alert1 : ""}
<Header function1={() => this.props.navigation.openDrawer()}/>
....
</View>
)
}
and the result is no matter if error is true or false when i open this screen then alert appears and then error
so I change alert1.
var alert1 = (<View>
alert(
"User exist",
"User with same Email exist. Try some to login or use other Email",
[
{text:"Ok",style:'cancle',onPress:()=> this.setState({error:false})}
]
)
</View>)
and now error is resolved but on screen load alert is appearing.
handleSignUp() {
fetch('http://myIp:9999/signUp', {
...
})
.then((res) => {
//insted of this line => this.setState({error: false}) call Alert directly
Alert.alert(
'Alert Title',
'My Alert Msg',
[
{text: 'Ask me later', onPress: () => console.log('Ask me later pressed')},
{text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
{text: 'OK', onPress: () => console.log('OK Pressed')},
],
{ cancelable: false }
)
})
}

How to set alert box title in React-Native's alert?

I cannot set the title of an Alert box with React-Native
import React, { Component } from 'react';
import ReactNative,{
StyleSheet,
Text,
View,
Alert,
} from 'react-native';
...
alert("myTitle","my message");
Title shows as "Alert" instead of as "myTitle"
The syntax is different:
Alert.alert("myTitle", "my message");
Reference: http://facebook.github.io/react-native/docs/alert.html#examples
Alert.alert(
'Alert Title',
'My Alert Msg',
[
{text: 'Ask me later', onPress: () => console.log('Ask me later pressed')},
{text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
{text: 'OK', onPress: () => console.log('Ok Pressed')},
],
{ cancelable: false }
)