React Native (0.63) Alert disappear automatically in IOS - ios

I am using RN 0.63 and i am facing issue in React Native core alert.It popup and disappear automatically with second.I want alert should disappear when i click on OK button.
Alert.alert(
'Alert Title',
msg, // <- this part is optional, you can pass an empty string
[
{text: 'OK', onPress: () => console.log('OK Pressed')},
],
{cancelable: false},
);

I ran into the same issue and was able to avoid the "automatically disappearing" Alert popup after finding a loading prop was being passed down into a child component and was being (unnecessarily, in my case) consumed.
So I resolved the issue by simply removing the prop and handling the "loading" logic in the parent component.
Please double check that there are no unintentional re-renders of your component that may cause the Alert to be dismissed.

Probably you are showing dialog right after setState. You need to show dialog once the state update is completed. If this is not doable, it's not a good idea but a workaround then simply wrap dialog within setTimeout.
setTimeout(() => {
Alert.alert(
"Title",
"Message",
[
{
text: "OK",
onPress: () => {},
},
],
{ cancelable: false }
);
}, 100);

Related

NativeScript 8.2 : [Presentation] Attempt to present UIAlertController on UIImagePickerController whose view is not in the window hierarchy

Blockquote
I am using NativeScript 8.2, I am trying to display an alert after capturing a photo in IOS.
capturePhoto(): void {
this.photoService.requestPermissions()
.then(result => camera.takePicture({
height: this.imageHeightWidth, width: this.imageHeightWidth,
keepAspectRatio: true, saveToGallery: true
})).then(picture => { ImageSource.fromAsset(this.imageProvider.current).then((imageSource) => {
if(---"some condition"----) {
Dialogs.alert({title: "Error",message: "Error Message", okButtonText: "OK",}).then(() => {});
return;
}
});
});
}
First time when i call the function capturePhoto() , the camera opens and after taking the picture, the alert displays fine.
But when i try it for more than once, the camera opens and i am able to take the picture but i get this error message and the alert does not display.
Not sure what i am missing and how can i show the alert every time i call the function.
[Presentation] Attempt to present UIAlertController on UIImagePickerController whose view is not in the window hierarchy.
I was able to fix the issue by Wrapping it in the setTimeout Function
capturePhoto(): void {
this.photoService.requestPermissions()
.then(result => camera.takePicture({
height: this.imageHeightWidth, width: this.imageHeightWidth,
keepAspectRatio: true, saveToGallery: true
})).then(picture => { ImageSource.fromAsset(this.imageProvider.current).then((imageSource) => {
if(---"some condition"----) {
setTimeout(()=>{
Dialogs.alert({
title: "Error",
message: "Error Message",
okButtonText: "OK",
}).then(() => {});
},1000);
}
});
});
}

How to process events from the application menu in the renderer

The main process of an electron application receives the events when a user select a menu option
const menu = {
label: 'Foo',
submenu: [
{
label: 'Bar',
click: () => {
// execute function in render process
},
},
]
});
Menu.setApplicationMenu(Menu.buildFromTemplate(menu));
and this should execute a function in the render process.
How would I intercept the menu events in the render process or alternatively execute a function in the render process from the main process?
You can send a message to the renderer when the menu item is clicked, then do what you want when the renderer receives the message.
This communication is called IPC, Inter Process Communication
Here's what the menu item would look like:
{
label: 'Bar',
click: () => {
win.webContents.send('menuItemClicked', 'Clicked!');
},
},
Then add this code to your renderer:
var ipcRenderer = require('electron').ipcRenderer;
ipcRenderer.on('menuItemClicked', function (evt, message)
{
console.log(message); // Outputs: Clicked!
// Do your renderer stuff here.
});
And voila!

Why does my Sweetalert disappear when it appears

I want to use sweetalert on my page. The problem is that following the successful operation, the sweetalert appears which is below, and when the OK button is clicked, the page must to be reload (). However, with sweetalert disappears as it appears and the page is reload (). therefore, I don't want the page to be reload () before I click the OK button. What should I do?
Edit Note: I'm using ckeditor on my page. I think the problem stems from ckeditor's editing of textareas. but still i don't know how to solve it.
success: function (response) {
if (response.Result) {
Swal.fire({
title: 'Ok',
text: response.Mesage,
type: 'success',
showCancelButton: false,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Ok'
}).then(
function () {
window.location.reload();
}
)
}
else {
Swal.fire(
'Error',
response.Message,
'error')
}
I think it's because your 'then' is firing regardless of the 'result' from the click.
Swal.fire({
title: 'Are you sure?',
text: "You won't be able to revert this!",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then((result) => {
if (result.value) {
window.location.reload(); //i.e. if 'confirm' is pressed
}
})
source: https://sweetalert2.github.io/

Using select2 how can I collapse/expand optgroups?

I'm using select2 (v 4.0.3) with Bootstrap 3 and I have to display several hundreds of alternatives per optgroup. Now I wish to collapse/expand the optgroups on click to make it a bit more manageable. I couldn't find any info on this so I thought I'd post a question.
I found an approach to this problem but I couldn't get it to work (it seems a bit outdated issue #730). The basic problem with that approach now is that in the current version of select2 elements aren't created until they are needed. Also, the class names seem to have changed a bit, as have apparently the names of events in the move to the latest version.
So far I've managed to get the collapse/expand functionality to work for the optgroups, but issues arise when the user provides text input (check the fiddle).
$(function () {
var data = [
{
text: "Group 1",
children: [
{ id: 'A1', text: 'a1'},
{ id: 'B2', text: 'b2'},
{ id: 'C3', text: 'c3'}]
},
{
text: "Group 2",
children: [
{ id: 'A2', text: 'a2'},
{ id: 'B3', text: 'b3'},
{ id: 'C1', text: 'c1'}
]
}];
$('#mySelect')
.select2({data: data, placeholder : 'Select one' });
// Toggle group on click
$('.select2')
.on('click', function(){
$('.select2-results__option').on('click', function(){
$(this).find('.select2-results__options--nested').toggle();
});
});
});
When the text input is used select2 runs the search and the events I've registered are dropped. My plan was to capture text input and check if the input field is empty or not, based on which I can decide to recreate the optgroup listeners or show all optgroups. Any help in this direction would be appreciated.

React Native onStartShouldSetResponder and onResponderRelease?

I've created a button that I want to have call a function on click and then again on release. A normal TouchableOpacity or other will trigger a function upon release of a click only, I need functions on both click AND release.
<View
style={styles.touchbutton}
onStartShouldSetResponder={() => this.clickOn()}
onResponderRelease={() => this.clickRelease()}>
<Text style={styles.dark}>Button</Text>
</View>
The above code works on click but not on release. I also tried onResponderReject but that doesn't work either. Hard to find what the command should be.
Had the same problem. onStartShouldSetResponder needs to return true.
onStartShouldSetResponder={(e) => {
/*do whatever*/;
return true
}}
Please Try This code For your click event it works for me :
clickOn(){
Alert.alert(
'Test Demo',
'Please Enter Valid Data',
[
//{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 }
)
}
}
Put these two lines it works for me when you release
onStartShouldSetResponder={() => true}
onResponderRelease={() => this.onRowTap()}

Resources