I'm trying to use the touch event position when clicking a image to start animating a image from that location and to the center of the screen.
When react native is taking the full screen this is not a issue. But when React Native is running in a hybrid app and the screen that is rendered by React Native is not taking up the whole screen (like in a split view mode, or in a popup view on iPad) the nativeEventcoordinates are all relative to the view where React Native is rendering, and not the actual screen.
I would like to get the actual screen coordinates where the touch is happening. Is there any workaround to make this happen?
From the documentation of the Gesture Responder System all the events are relative to the root element. And I assume this means the root element of react native.
I did some experimenting and the react native Dimensions do give me the correct screen size. I was first thinking of using that to calculate the offset of where the React Native screen is being rendered. But I can't really know how much spacing is at the top/bottom/left/right of the view with just this data.
Figured it out.
I can use measureInWindow to figure out the actual screen coordinates when React Native is running in a subview of a hybrid app.
onPress = () => {
this.refs.button.measureInWindow((x, y, width, height) => {
console.log("x", x, "y", y);
})
}
render() {
<TouchableOpacity ref="button" onPress={this.onPress}>
...
</TouchableOpacity>
}
Related
I'm making a react-native based app, and I can partially use Swift code by react-native's NativeModule feature.
My app will be used as Split view / Slide over mode in iPad, and I want to know if my app is in the left-side, right-side, or Slide-over.
I could get width and height, also origin (CGPoint) by this code.
let window = UIApplication.shared.windows.first
// Then getting X, Y like this...
window.frame.origin.x
Now my app has only one webview, made by react-native-webview.
So I guess, since the webview is the whole content of the app, and it fills app 100%, so it always returns app.
I want to know, not in webView's perspective, but in app's perpective, the POSITION relative to the screen.
For example, if my iPad width is 1400, and if my app is on the half right side, x should be 700.
And if it is on left side, it should be 0.
I really struggled this, but couldn't find any solution.
FYI, I drawed a diagram for this question.
As I wrote on the above, I tried UIApplication.shared.windows.first.frame.
But it only show the CGPoint of webview, not app relative to the screen.
There is no API for getting 'X' or 'LEFT' in react-native-dimension too.
onLayout also not helpful.
I am trying to build a simple messaging view in ionic. My view looks as follows:
Initial screenshot
My problem is when I focus the input on iOs, the keyboard covers the input, however on an Android device, the input moved along with the appearing keyboard as expected.
My understanding that if I use position: fixed and indicate bottom value (say, bottom: 16px) the input should appear 16px above the page fold both when the keyboard is open and when it isn't.
For reference, this is the result I get when I try to focus the input on an actual iOs device.
On-screen keyboard covers up input
I had this problem with ion-textarea. I'm using ionic 4 beta 17 - ionic keyboard 2.1.3
I am still not using native keyboard, but maybe will try.
What I did is hookup the keyboardDidShow event and scrolled the active document into view. Look at this code:
ngOnInit() {
window.addEventListener('keyboardDidShow', () => {
const el = document.getElementById('myElement');
//myElement would be the input you have. Or you can just scroll into view the active element, like
// document.activeElement.scrollIntoView();
if (document.activeElement === el)
el.scrollIntoView();
});
}
I have been trying to center a PickerIOS, but I am probably missing the underlying logic behind a Picker, because I just want its width to be full screen.
I can manage to do that with iPhone 4s / 5s, but when I run it on the iPhone 6, the Picker seems to be on the left, with some space on the right side.
I have been trying to use alignItem:'center' with a wrapper around the picker, but that just makes it disappear. I have also tried alignSelf, but still doesn't work.
I thought that Picker, by default, had its width to full screen or does it adapt according to the length of the elements?
Do I have to place it in a Flexbox in order to get it centered with a full screen width?
mask1: {
height:120,
overflow:'hidden',
justifyContent:'space-around',
marginTop:50
}
I find out that the style of PickerIOSItem cannot change, and only works fine in NavigatorIOS. I review the example of UIExplorer and there is no more style binding to the Item. Maybe it's a bug.
On Phonegap application, is there any way to prevent page scrolling when a text-input is focused and the soft keyboard shows?
In case of no way, Is there any way to scroll the page to the position of text input instead of 'bring' the text input onto center of screen?
in phonegap 2.6 there is a new option to prevent scrolling by resizing the webview. take a look at the documentation and find the KeyboardShrinksView option.
cheers
I've used this javascript code with some success. It overrides the window.scrollTo function and cancels it out...
window.oldScrollTo = window.scrollTo;
window.scrollTo = function (x, y) {
console.log("window.scrollTo");
return;
};
So I have created an App that has a different menu when it is held portrait, but changes when held landscape.
I can get the navigation to work, However I am unsure how to design landscape pages inside Flash?
My stage is set to the standard 640x960 air for iOS, which gives me perfect portrait pages, But when I tilt my phone to landscape the screen obviously changes, and it looks weird. Im hoping someone can tell me how i can get this view inside Flash, while still having the portrait screens too?
I want to have both Portrait and Landscape in the same app, and am currently so confused how I can design this inside flash?
I hope this makes sense, and that someone could throw some help my way!
It's not easy, but you can do it. First, you have to wait until stage is initialized and set it's scaling property to no scale (this will stop resizing page to fill screen). Then you have to listen to stage's resizing (it trigger's every time you rotate iPhone) and to move/scale your display objects in proper way in the listener handler.
addEventListener(Event.ADDED_TO_STAGE, init); //Wait for stage initialization
private function init(e:Event):void { //init handler
removeEventListener(Event.ADDED_TO_STAGE, init); //remove listener, which won't be used more
stage.scaleMode = StageScaleMode.NO_SCALE; //set null scaling and top-left align
stage.align = StageAlign.TOP_LEFT;
stage.addEventListener(Event.RESIZE, resize); //add handler for resizing
}
private function resize(e:Event):void { //triggers every time iPhone being rotated
//Move/scale your objects here
}