React Native TouchableHighlight ignores the first click event - android

I am using TouchableHighlight for making buttons, but it seems the first click event on the button does not trigger the onPress event on the TouchableHighlight element. It works when it is clicked again.
The code looks like:
return (
<TouchableHighlight
onPress={this.props.onPress}
style={btnStyles}
underlayColor="#a30000"
activeOpacity={1}>
<Text style={styles.buttonText}>{this.props.children}</Text>
</TouchableHighlight>
);
This is the link to the button I created: https://github.com/uiheros/react-native-redux-todo-list/blob/master/app/components/shared/Button.js
Does anyone know how to fix it? or what caused the problem?
Edit: currently the problem happens to me on both ios simulator and android simulator. I have not tested in real devices yet.

I think you are using an emulator to test the app (genymotion?) same thing happened to me and I got confused but rest assured that the issue is not with you app but emulator or operation system(sometimes the first click is just to bring the emulator into focus) I am positive that if you try it on the physical device it'll work properly.
Hope I was helpful

Related

Problem with onClick in React. On desktops works very well, on mobile doesnt work

just like up, i have problem with onClick it doesnt work on mobile.
{buttonSkills.map((item, i) =>
<Button key={i} variant={item.variant} onClick={() => filterIcons(`${item.className}`)}>{item.name}</Button>
)}
you may see this https://retupk.github.io/presentation/#/
click F12 and see that on mobile buttons ("Wszystko", "Front-End" etc..) in section skills at the very bottom doesnt work
here is full code of my skills section: https://github.com/RetupK/presentation/blob/master/src/containers/skills/Skills.js
Anybody know why my onClick doesnt work on mobile?
You have a container with the following css over the entire page, which gets all the click events:
.header-main-container {
z-index: 9999
}
If you'll remove it you clicking would work.

react-native-modalbox crashes react native app without error log

When a button is clicked to open the modal, it works for the first time. Upon the second attempt, the app crashes without any error log.
React Native version: 0.61
The trick is to place the Modal tag as a child component in the KeyboardAvoidingView and not otherwise.
like so:
<KeyboardAvoidingView>
<Text> Please upvote! </Text>
<Modal ... >
</Modal>
</KeyboardAvoidingView>
This worked for me.
Hope it helps.

C++ Builder Tokyo 10.2.3 FMX Android application crash if I dont click on Next button on virtual keyboard

I use C++ Builder Tokyo 10.2.3 and trying to do something very simple on Android like typing some text into an Edit box.
If I press Next or Done key on virtual keyboard everything is fine.
If I press an Exit Button to go back the previous form it looks it is fine but then if I press Android Back button application crash.
It took me hours to identify the problem but couldn't find any solution but trying to disable all other objects when user clicks in an Edit box and enable them if user click on Next..
It seems to me a bug but need to make sure before report it to Embarcadero.
Thanks
I found the problem and a solution. In short, there is a bug in C++ Builder Tokyo 10.2.3 as if virtual keyboard on Android hide/close because of focus change on a form virtual keyboard doesn't take it as it is hidden properly.. FormVirtualKeyboardHidden working fine but I don't know somehow application crashes.
So, the solution is to using platform services. Just hide the keyboard manually on FormFocusChanged event.
void __fastcall TForm1::FormFocusChanged(TObject *Sender)
{
di_IFMXVirtualKeyboardService VirtualKeyboardService;
if(TPlatformServices::Current->SupportsPlatformService(__uuidof(IFMXVirtualKeyboardService), &VirtualKeyboardService))
{
VirtualKeyboardService->HideVirtualKeyboard();
}
}

Closing Bootstrap modals in android with phonegap

I am using this bootstrap modals (popups) and they work great in my browser. The problem is, when I launch them on android using phonegap, they do not close when the close button is pressed. When I click on the ovelay next to the popup, everything seems to be working alright ;/ I am very confised...
EDIT: I use exactly the same code as in the example and something goes wrong...
I added this function to my angular.js controller:
$scope.closeModal = function (idOfModal) {
$(idOfModal).modal('hide');
}
And also to the confirm/save buttons of modals, after the controller's function is executed, at the very end again I add $(idOfModal).modal('hide');, where I also pass idOfModal to the function ;)

jQuery.mobile popup immediately hides after showing

I have a small phonegap application with jquery mobile and backbone.
I'm trying to show popup to user by manually calling .popup() method.
Everything works fine on iOS but on android I got strange issue: popup is showing for few moments and than disappear.
Here the actual code:
var PostView = Backbone.View.extend({
events: {
'touchend .add-comment-button': 'addComment'
},
addComment: function() {
this.$(".comment-popup").popup('open', { history: false });
return false; // Stop bubbling.
}
});
I'm using history: false because this popup is actualy part of subpage.
The code looks very simple, I'm just can't understand why it can disappear, and why this happen only on android devices.
Thanks, and sorry for my bad english.
I spent hours trying to fix this problem.
Finally I ended up doing the following two things that seemed to fix the problem.
1 - Use the uncompressed jqm file. i.e jquery.mobile.1.2.0.js
2 - I was triggering the popup programatically using the 'tap' option - once changed to the 'click' option it worked.
$('.option').live('click', function() {
$('#popup-div').popup('open');
});
I spent hours trying to fix this problem.
Finally I ended up doing the following two things that seemed to fix the problem.
this code snippet may help you ->
$('#testBtn').on('tap',function(e){
console.log("button clicked");
e.preventDefault();
$('#testPOPUP').popup("open");
});
Please note i have used e.perventDefault().
I didn't feel like changing my .tap() events to the click event and I didn't have a case where I could use preventDefault()so I just added a timeout to the popup('open') line. My hoverdelay in jqm is set to 150 so I set this timeout to 600 just to be on the safe side. Works fine, doesn't feel sluggish for the user.
One way to 'fix' it is by setting data-history="false" on the popup div
See also this question
JQuery Mobile popup with history=false autocloses
I have the exact same problem when trying to use popup('open') on an android 2.3 device (both in native browser and in firefox) and it works just fine on browsers on other devices. I'm also using backbone event management to open my popup (used the tap event and no aditionnal options to popup).
What I did to 'correct' the problem is that I removed the backbone event management for this event and added a listener in the render function. In your case this would look something like this :
events: {
// 'touchend .add-comment-button': 'addComment'
},
render: function() {
$(this.el).html(this.template(this.model));
$(this.el).find('.add-comment-button').tap(function(el){
this.addComment(el);
return false;
}.bind(this));
}
I have no idea where the problem comes from (must be some incompatibility between backbone and jquery mobile) and why we only see it on android but for the moment with this workaround my app seems to work fine on any device.
Edit: oops, it turns out that in my case the problem was I was missing "return false;" in the function dealing with the event.
Now that I added it, it works correctly with the backbone event management.
Sadly that doesn't explain why you have the issue and why I was seeing it only on android.
In case it helps anyone, I had the same problem occurring with Bing Maps, with the Microsoft.Maps.Events.addHandler(pin, 'click', callback) method.
Not particularly nice, but instead I stored an ID in pushpin._id and did the following:
$("#page").on('vclick', function (event) {
if (event.target.parentElement.className === "MapPushpinBase") {
$("#stopPopup").popup('open');
}
});
One brute force option is to check whether popup was hidden and reopen it.
In a loop, because the exact time the popup becomes hidden seems to be varied.
var hidden = $('#' + id + '-popup') .hasClass ('ui-popup-hidden')
if (hidden) $('#' + id) .popup ('open')
A working example: http://jsfiddle.net/ArtemGr/hgbdv9s7/
Another option could be to bind to popupafterclose:
var reopener = function() {$('#' + id) .popup ('open')}
$('#' + id) .on ('popupafterclose', reopener)
$('#' + id) .popup ('open')
Like here: http://jsfiddle.net/ArtemGr/gmpczrdm/
But for some reason the popupafterclose binding fails to fire on iPhone 4 half of the time.

Categories

Resources