how can show multiple alert together on ios mobile phone - react-native

for(let i=1;i<=4;i++) {
console.log("hello ", i);
Alert.alert( "Alert Title", "My Alert Msg", [{ text: "OK", onPress: () => console.log("OK Pressed") }] );
}

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);
},
},
]);
}

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 }
)
})
}

Is it possible to add checkbox in sweetAlert box?

I can set inputType as password. What are the other input Types supported..?
swal({
title: "Are you sure?",
type: "input",
inputType: "checkbox",
showCancelButton: true,
closeOnConfirm: true,
}, function () {
swal("", "You did it", "success");
});
the checkbox inputType is not supported in swal..

There's a nice way to use checkbox modal type in SweetAlert2:
Swal.fire({
title: 'Do you have a bike?',
input: 'checkbox',
inputPlaceholder: 'I have a bike'
}).then((result) => {
if (result.isConfirmed) {
if (result.value) {
Swal.fire({icon: 'success', text: 'You have a bike!'});
} else {
Swal.fire({icon: 'error', text: "You don't have a bike :("});
}
} else {
console.log(`modal was dismissed by ${result.dismiss}`)
}
})
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#11"></script>
PS. notice that SweetAlert2 is a little bit different from SweetAlert, check the simple migration guide: https://github.com/sweetalert2/sweetalert2/wiki/Migration-from-SweetAlert-to-SweetAlert2

React native AlertIOS callback

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}),
},
]
);
}