how do i change the color and center the text of my alert box in react native.
Here is my code.
Alert.alert(
'Edit Profile',
'User Save Succesful!',
[
{text: 'OK', onPress: () => console.log('OK Pressed')},
],
{ cancelable: false }
)
Related
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);
},
},
]);
}
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 }
);
}
I have this small segment of code
const createTwoButtonAlert = () =>
Alert.alert(
"Delete from store",
"Are you sure you want to delete the product?",
[
{
text: "Cancel",
onPress: () => console.log("Cancel Pressed"),
style: "cancel",
},
{ text: "OK", onPress: () => deleteProduct() },
],
{ cancelable: false }
);
And just wanna apply styles on
"Delete from store", this line. Here is what I want to do :
style={{
fontFamily: allFont.SFUI,
color: allColor.blue,
fontSize: wp(4.5),
}}
Your help will be highly appreciated.
Alert,Toast are native components that have limited styling on the js side of react native if you are insisting on using those you have to change Native code. my advise is either use a custom alert component or use react-native-modal
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}),
},
]
);
}
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 }
)