Working on a site and it looks good on the DevTools simulator but whacked on the phone (iPhoneX).
I found some questions about DevTools being off from actual views, a typical answer is "it's a simulator"
But I have also noticed that if I use px as a measurement instead of vh or % I get a more realistic view.
So, the general question is: What is the best way to get the best possible simulation out of DevTools (eg. like using the units as I mentioned above).
Related
LayoutAnimation is a part of React Native that automatically animates components when the view is rendered.
The official documentation is here:
https://reactnative.dev/docs/layoutanimation
However, the examples in the docs do not work. Objects in the examples that are supposed to animate just jump from the starting position to the end position.
Here is an example of one of the Snacks in the documentation that does not appear to animate:
https://snack.expo.io/91MUQd5IH
This would lead one to the conclusion that this API is just not supported or no longer functional.
Is it the case that Layout Animation just does not work? Or if it does work under some circumstances, please share a link containing a working Snack / Gist with an extremely simple but working LayoutAnimation example.
UPDATE: LayoutAnimation possibly does not support web. Does anyone have any knowledge of this or who can refer the reader to an explanation in the docs?
LayoutAnimation is currently not supported properly in react-native-web. You can see that here: https://github.com/necolas/react-native-web#modules and here https://github.com/necolas/react-native-web/issues/1613, https://github.com/necolas/react-native-web/issues/1056. It doesn't seem to be a priority for the project at the moment so I wouldn't count on it being implemented.
On iOS/Android it's a different story. If we look here: https://reactnative.dev/docs/layoutanimation/ you can actually see this working properly by pressing play and selecting iOS for example.
On Android we have support as well but it might not work/crash. If you look over the issues open for react-native, you will see a lot of them mention issues with LayoutAnimation and Android. E.g. it crashes under certain conditions on Android: https://github.com/facebook/react-native/issues/27552 and https://github.com/facebook/react-native/issues/29919.
I don't recommend using LayoutAnimation, especially on Android, as it is highly experimental and might crash on some devices without warning.
If you want to try some more interesting animations with better performance, I recommend you try using the Animated API from ReactNative or the newer react-native-reanimated which is faster, more modern but still in alpha (I'm talking about the current, v2, version).
By my test the given link in the question post works properly:
Also, I test it on my friend's iPhone and it's worked properly too. But many of React Native features don't work properly on Web export. For example animations on RNW (React Native Web) works on Android/iOS exports but not on Web exports.
For such web situations, you should decouple the web component and make a separate file then write the desired animation on it.
I just got notification that my site is now in the mobile first index in Google.
So does this mean that I should change my developing and work at a lower resolution oprimarily and then check "just to make" that it looks OK at higher resolutions?
I would imagine that there's very few people looking at my website on a mobile device due to its nature.
Tablets and smaller PCs maybe though.
I also got notified on Google Search Console.
I don't think that to optimize for it is to lower your website resolution.
Some basic optimization I might suggest are:
Make your website responsive
Avoid using heavy fonts and images
You can declutter your mobile view from the desktop, do not worry if the content will be different, as long that it will still relevant to your desktop.
Make sure your pages are crawlable by search engine robots (Check your javascript)
You can check this timely discussion about optimizing for mobile-first indexing
https://www.propelrr.com/blog/questions-google-mobile-first-indexing
I've to share a mobile screen and display it on a browser using WebRTC. I then have to take control of the mobile screen.
I've researched this and know I can share a screen browser to browser using chrome(with extension) or firefox(after certain flags are set). Some information I've read suggests that screen sharing on mobile is not possible and then another article said it was but I think they meant be sharing through the chrome browser on a mobile.
Some of the the information and posts I read are dating back to 2013/2015/2016 and I wondered if there is any new information on this?
Is screen sharing on mobile devices(android or iOS) possible using webrtc now?
is screen control on mobile devices possible?
Thanks Andrea
I also investigated this topic a few days ago and it seems to me we are on the verge of the next step and the technology hasn't totally settled yet. Screencapture is mostly working with (very) up-to-date browsers and (still) an extension or some kind of white-listing. I could not find any kind of hint that a "remote control" mechanisms are part of webrtc and the getUserMedia implementations. Unfortunately.
ICE seems to work fine for most scenarios (if you don't mind waiting a minute) and Tickled ICE adresses the problem in an interesting way.
Mobile is very confusing indeed as the market is even more heterogeneous.
Maybe we should open a wiki or a chat channel or whatnot they habe nowadays on stackoverflow :-) I think I will have to read about this "community wiki" checkbox down there...
The most promising thing I could find was
https://inthelocus.com/
Still trying it out in different scenarios.
[This might not be an answer...] I was on the same topic and then I noticed there's an existing tool (SDK) to serve the similar purpose: https://cobrowse.io. It works good in both the demo video and the simulator web page. Yet I'm not sure if it utilises WebRTC...
well i've made a responsive website which handles well in mobile devices. Now there are some Phonenumbers on the website which my cliënt would like to be clickable on any Phone so the visitor can call directly. I found that making a link of the phonenumbers works like so:
make a call
This triggers mobilephones to call the number. But it also triggers the webbrowser on any other device to follow the link, which results in "page can't be found"
I'm looking for a good anwser to tackle this problem. I've been searching for a while now but i'm getting a bit tired and frustrated.
I think i've come with a solution but i don't excactly know how to put this in the html.
There are several ways to conditional comment browsers in html. If i could do this with the link part and rule it out:
<!--[if any **none mobile** webrowsers: don't read:]>003164646464
And all mobile browsers read the link.
It seems to me, that this is the most easy way to do this, but i could be wrong...
I hope that someone can give me any pointers, I really appreciate your idea's and help!
THANKS!
There is no easy way to achieve this. You can use different approaches depending how accurate you want to be:
WURFL - most accurate, allows to check user-agent and get browser / device capabilities
You can try parsing user-agent by your own detecting OS - check this answer Detecting a mobile browser
Use css media queries to target devices with small screen
Unfortunately there is no silver bullet for this (at least I don't know one).
i'm planning on working with titanium.
i want to know if "Same origin policy" can be eliminated by using titanium.
are there any drawbacks in titanium?
please recommend some cross-platforms..
please do leave some suggestions..
Thank you,
SOP is especially used for HTTP. So it doesn't concern titanium since it only use javascript as "local" language that is "translated" into xcode. at the end you got an simple xcode-project and an .app file.
i use it for a quite complex app and it works fine. i needed adding some features as module written in objC since the framework isn't as ongoing concering the iphone API as the native objC, but that worked out fine.
Since you are asking for the drawbacks of Titanium.. here it is..
I would not say that it's cross platform. Even my android app will look different in my Mac compared to the one developed in Windows.
Not all functions will work on Android and iPhone. Some will partially work on the other.
Ti is a biased and Android Developer are always left behind.
Also, if you are developing an Android app like me, you will be facing a lot of problems and Kitchen Sink will not always work. Android development in Ti is very bad and expect to find a lot of bugs.
Contacts API is not even complete as of now (Version 1.60) . I can't even get the contacts email and phone number!
No Bluetooth support
I spent a lot of hours "debugging" and waiting for the emulator rather than serious coding.
API refence and the QA will help a bit but there are more questions than answers.
Ti doesn't even have a proper debugging features as well as IDE. Make sure to dedicate a lot of hours in knowing how it works. I have a hard time finding a good resources to start.
Memory Problem and Leaks are very common.
Gradients will not work in Android (use image instead)
and last thing, Documentation really sucks!
(but still I love Ti despite all of the above)