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 }
)
Related
Hey so i need to check if the user device is older version
if yes i will show alert that tell to update
and if press on button "UPDATE"
i want to take to the screen of the OS to UPDATE.
thanks for anyone who can help!
export const CheckOsVersion: FC = () => {
useEffect(() => {
const currentOS = Platform.OS;
const currentVersion = Number(Platform.Version);
const LATEST_VERSION_ANDROID = 34;
const LATEST_VERSION_IOS = 13;
const MAX_DIFF_VERSION = 2;
if (currentOS === 'android') {
if (LATEST_VERSION_ANDROID - currentVersion > MAX_DIFF_VERSION) {
Alert.alert(
'text',
'“text.',
[
{
text: 'NOT NOW',
onPress: () => console.log('Cancel Pressed'),
style: 'cancel',
},
{
text: 'Update',
onPress: () => console.log('Update Pressed'),
},
],
{ cancelable: false },
);
}
} else if (currentOS === 'ios') {
if (LATEST_VERSION_IOS - currentVersion > MAX_DIFF_VERSION) {
Alert.alert(
'text',
'“text.',
[
{
text: 'NOT NOW',
onPress: () => console.log('Cancel Pressed'),
style: 'cancel',
},
{
text: 'Update',
onPress: () => console.log('Update Pressed'),
},
],
{ cancelable: false },
);
}
}
}, []);
so the solution that i found is that you need to write a bridge in native
and use that
something like : Limk
there is example too here and they explain what is it in Kotlin
that what i did in the
File: SettingsUpdateModule.kt
package com.att.fn.android.missioniq.modules.settingsRedirect
import android.content.Intent
import androidx.core.content.ContextCompat.startActivity
import com.facebook.react.bridge.*
class SettingsUpdateModule(private val reactContext: ReactApplicationContext): ReactContextBaseJavaModule() {
override fun getName(): String = SettingsUpdateModule::class.java.simpleName
#ReactMethod
public fun updateOs() {
val i =Intent("android.settings.SYSTEM_UPDATE_SETTINGS",)
i.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK)
startActivity(this.reactContext, i, null);
}
}
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 }
);
}
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 }
)
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}),
},
]
);
}