Transparent tooltip and modals on iOS - javascript

I am trying to build tooltip and modals for an iOS app using react-native. Issue I am facing is that background of tooltips and modals is not transparent. However its showing fine on android version of the app.
Is there some setting I am missing?
I have used different libraries like react-native-elements(tooltip, overlay), react-native date-time-picker and other dropdown and picker libraries of react-native but all are having black(solid color background) and actual layout is not being displayed.
Pasting a sample tooltip code as well,
<Tooltip withOverlay={true} overlayColor={Colors.unselected} backgroundColor={Colors.grey} width={250} height={'auto'}
ModalComponent={Modal}
popover={<EditMenu />}>
<Icon name={'downcircle'} family={'ant'} color={Colors.grey} size={18} />
</Tooltip>

You can achieve this by using RGBA background color with a fractional alpha channel value:
<Tooltip backgroundColor="rgba(0, 0, 0, 0.1)" />

Issue was fixed when I updated xcode and used iOS 13. Previously I was using iOS 12. Also tested it on physical device and there modals and tooltips are working fine.

Related

Android app icon / ic_launch icon has white padding

Generated an app icon using
https://appicon.co/
Ive used this before for other apps and its working great but this time my app icon has white padding on android OS, , any idea why ?
Im using react native & already added assets to android native side
app icon
How icon looks on android home
icon on android
Try using this website to generate icons before uploading the image here make sure your icon doesn't have any transparent padding.
I've used this website multiple times works perfectly.
Turns out the issue is because the icon I'm using has transparent background. IOS did add white bg by default and handled it, android handled it by rapping the icon with white padding also.
Fixed after changing background to be white.

Responsive Design Mode on desktop does not behave the same on the actual device

I am having a frustrating CSS problem. I am building a a single page JS map application and am trying to synchronize styles across browsers/devices. I thought I did a successful job using Responsive Design Mode in Safari/Firefox. It looks the same to me when I switch between iPad/Galaxy/iPhone/desktop in the browser emulator.
However, when I actually open the page on my phone in Firefox/Safari, it does not appear the same. Specifically, the ? button is wider than the rest of the buttons below it. I specifically have the width property explicitly set to 40 pixels in the CSS.
What is happening here? Why is the ? button wider?
Here are some screenshots of what I mean:
Desktop
Desktop/Responsive Mode iPad
Desktop/Responsive Mode iPhone
My actual iPhone
I tried connecting my phone using Remote Debug but I don't really know how to use it without visualizing the actual phone screen so I can't see what I'm editing. Anyone have any ideas?
I found the problem. For some reason, padding was being added in iPhone and not in responsive mode or other browsers. Adding padding:0 to the button fixed the problem.

React-native item is cropped by container

I have problem with android layout and don't know how to solve it. The code is here https://rnplay.org/apps/XD0WGw on iOS all working fine, but on Android the half of circle "avatar" is hidden by "infContainer", this is image. I tried to use z-index but it's not working.Circle part should be visible on infContainer. Please help :)

Phonegap : layout breaks when keyboard is shown

I am experiencing UI issues when the keyboard is opened. When the keyboard is opened,style of all the elements having position : fixed breaks. They appear to be scrolling with the content. Please help me to fix this problem.
The issue exists in iOS 6.1, 7.1
As per documentation link of phonegap build version 3.1, we need to use "KeyboardShrinksView" preferences in config.xml. Set to true to scale down the webview when the keyboard appears, overriding the default beavior that shrinks the viewport vertically. This matches the default behaviour for Android apps.
<preference name="KeyboardShrinksView" value="true"/>
Good luck!

JQuery mobile button icons out of crop

I have a bunch of buttons on my Mobile website, all of which with default icons like these :
http://jquerymobile.com/test/docs/buttons/buttons-icons.html
Everything seems fine when looking at the website on chrome, but on ipod touch or iphone and even Android, the icons seem out of crop like on the next picture. Anyone know how this could be arranged ?
Is this a known bug ?
Thanks !
Replace the png images with the new ones.
It's not a bug, if you updated from an earlier version of jquery mobile then you will need to update the 18px and 36px icon sprites. In your case, it is probably the 36px (high dpi) icon set which is scaled in the css with background-size:

Categories