I've got a react native app -> I've currently noticed that the text on my screen overlaps on iphone 10+ devices. How would I create a safearea for the new devices?
I've tried to add a tag to wrap my stack.navigator for the home screen but had no luck so far.
Is this something I would target on my react native or in xcode?
enter image description here
use
import { SafeAreaView } from 'react-native';
to handle safe area I have shown in below code how to handle safe area for iPhone 10 plus device
in below code I have divided the safe area in two-part one is for top safe area and another is the bottom safe area and you place your all component in bottom safe area
render() {
return (
<View style={{flex: 1} >
<SafeAreaView style={{flex: 0}} />
<SafeAreaView style={{flex: 1}}>
//here you can place your component
</SafeAreaView>
</View>
)
}
Is there a goto way to handle the status bar on iOS? For my app, I just want everything to be below the status bar.. but it looks like the only way to do that is to go to every single component and add padding? I would guess theres a way to do it in xcode but I have no clue!
Thanks!
There is already a component in react-native for the StatusBar
You just need to add it as
<YourParentWrapper style={{flex: 1}}>
<View style={{ height, backgroundColor }}>
<StatusBar { ...props } />
</View>
// ... Your navigation or the child components
</YourParentWrapper>
where the height is
Platform.OS === 'ios' ? 20 : StatusBar.currentHeight
This will handle your components below the default status bar for all the devices
I'm using Appcelerator Studio 4.7 with SDK 5.4.0GA.
I want to use swipe back gesture to return to previous view controller, but instead my touch just moves ScrollableView views even though I start my gesture at the left edge of the screen. Swipe back gesture works fine if it's not over ScrollableView.
Everything was fine when I have used Titanium Studio 3.4. It's not possible to use it at the moment, because it's not supported and you can't even log in.
This issue is because of Appcelerator Studio, not because of SDK version. I have tried to use Titanium Studio and Appcelerator Studio with the same SDK version and only Appcelerator Studio had this issue. That was the reason I stuck with Titanium Studio a year ago, but now it's not possible.
Here is the related topic without solution: https://archive.appcelerator.com/topic/581/swipe-right-from-the-edge-to-go-back-to-the-previous-window-doesn-t-work-anymore-in-ios-using-sdk-3-5-1-ga-and-4-0-0-ga/4
EDIT. How to reproduce it in 2 minutes:
1) File->New->Mobile App Project->Default Alloy Project
2) Add new controller named scrollable
scrollable.xml:
<Alloy>
<Window class="container">
<ScrollableView>
<ScrollView>
<View height="5000" backgroundColor="#DBD6D6">
<Label top="20">View1</Label>
</View>
</ScrollView>
<ScrollView>
<View height="5000" backgroundColor="#FED2FB">
<Label top="20">View2</Label>
</View>
</ScrollView>
<ScrollView>
<View height="5000" backgroundColor="#DCEFD7">
<Label top="20">View3</Label>
</View>
</ScrollView>
</ScrollableView>
</Window>
</Alloy>
index.js:
function doClick(e) {
var scrollableController = Alloy.createController('scrollable',{
});
var view = scrollableController.getView();
$.index.openWindow(view);
}
$.index.open();
index.xml:
<Alloy>
<NavigationWindow>
<Window class="container" id="index">
<Label id="label" onClick="doClick">Press me</Label>
</Window>
</NavigationWindow>
</Alloy>
3) That's all!
First of all, I have tried your code on Appcelerator Studio so I am not sure what used to happened on Titanium Studio in this scenario.
Now, since the Ti.UI.Window swipeToClose property does not exist until Ti SDK 5.2.0.GA, so you can make sure whether it's really Studio error or the SDK feature. I am sure that it's not an issue, but just a mis-understanding.
Coming to your query, there are two ways (as far as I know) to provide the Swipe to Previous Window (let's say SPW) feature along with Scrollable feature, that, leave some padding between the ScrollableView and its parent view, like this:
-Method 1-
<Alloy>
<Window class="container" backgroundColor="white">
<ScrollableView backgroundColor="blue" clipViews="false" left="20" right="20">
<View backgroundColor="red">
<Label>View1</Label>
</View>
<View backgroundColor="green">
<Label>View2</Label>
</View>
<View backgroundColor="cyan">
<Label>View3</Label>
</View>
</ScrollableView>
</Window>
</Alloy>
These are the changes I did in your code:
Added left + right padding of 20dp which will enable the SPW feature, but the ScrollableView will be of less width.
Set clipViews property to show the adjacent views for better UI. If you set this property to true even, then also the SPW feature works.
-Method 2- it works only if you know the exact dimension of ScrollableView by using hitRect property
// replace the line in Method 1 with this one and apply the tss on it
<ScrollableView backgroundColor="blue" id="SC">
scrollable.tss
"#SC" : {
// (x,y) is top-left corner of hitRect and height/width will determine its dimension where user can swipe the scrollable view
// on remaining area, you can perform SPW feature
hitRect : {
x : 100,
y : 100,
height : 200,
width : 200
}
}
Since you have seen both ways how you can achieve both features, I hope you find it useful.
I'm trying to implement two text inputs. I'm not sure if the best practice is to wrap these inside a scroll view or not. However, when I do it as shown below, I just see a single line in the middle.
If I remove the scroll view and just leave a single Text Input, it displays a box with input that I can interact with. Though I'm still unable to get the keyboard to display on the simulator. But I can manually type in and change state.
Any idea on how to allow more than one text input, as well as how to show the native keyboard that pops up from the bottom?
render() {
return (
<ScrollView>
<TextInput
style={{height: 40, borderColor: 'gray', borderWidth: 1}}
placeholder="Enter item 1"
value={this.state.text}
onChangeText={this.onChange} />
<TextInput
style={{height: 40, borderColor: 'gray', borderWidth: 1}}
placeholder="Enter item 2"
value={this.state.text}
onChangeText={this.onChange} />
</ScrollView>
);
}
1 - For the iOS Simulator there is an option Hardware -> Keyboard -> Toggle Software Keyboard (which is unchecked by default). Checking this option should solve your issue of displaying the native keyboard.
2 - Regarding multi-line text input. Yes this is an issue, but there is a work around shared in this answer below. I'll attach the link to the answer for your reference.
P.s: I haven't tried it myself, but the answer has been marked to have solved the issue!
Multi-Line TextInput Hack - https://stackoverflow.com/a/31759113/5783646
Display keyboard in iOS Simulator: Hardware -> Keyboard -> Toggle Software Keyboard
Show more than one text input: My guess is that there are styles applied (or not applied) to a parent element or elsewhere that is preventing the TextInput from rendering at a useable size.
I created an example on RN Playground that demonstrates what you are asking for: https://rnplay.org/apps/ldlfWw
In recently testing a web application on Windows/Mac desktop browsers - and then on an iPad I noticed various differences in Safari that I wasn't expecting. Even though the version # is the same.
I'd like to compose a list of those differences (for myself and others) to have as a developer reference.
e.g. in Safari on the iPad
iPad Safari takes full control of Select list/option styling
iPad opens the onscreen keyboard when an input element receives focus, thus inline floating calendar widgets (and the like) may not work as expected (or need to be altered)
iPad Safari doesn't support position:fixed like desktop Safari < iOS 5
iPad Safari (similar to iPhone/iPodTouch Safari) automatically hyperlinks 10 digit numbers to offer phone #/contact options
iPad Safari prompt('long message...','default'); shows only 1 line of the message (though it does provide scrolling of the message
I've heard from others that certain JavaScript doesn't work, etc. etc. but I have yet to fully test it thus I'd be grateful for any discoveries that you may have encountered.
A few more for you:
No Flash
Lousy iFrame support (so facebook like etc. needs a custom implementation for iPad)
Weird caching limitations
HTML textAreas doesn't get a scroll bar (you have to double-finger swipe - which of course, is amazingly intuitive)
In general. Treat it like a scaled up iPhone, not a scaled down Desktop.
I thought this might be useful: Apple's guide to preparing web content for the iPad
Just been caught out by the position:fixed issue my self
Safari on iPad has the same issue with button width/padding as on the iPhone
iPhone <button> padding unchangeable? describes this problem and a solution for removing padding on a button with text, but this does not help you if you want a button to be narrower than the padding itself (e.g. for a button that only has a small icon on it). To do that, I had to surround the button with an outer element with a defined width and overflow: hidden like so:
<span style="border: solid 1px blue; display: block; width: 16px; overflow: hidden">
<button style="-webkit-appearance: none; border-width: 0"> </button>
</span>
(the blue border is to show where the button is, it's not critical to the hack)
jQuery's offset() doesn't work: http://bugs.jquery.com/ticket/6446
It also looks like iPad Safari has issues with elements with overflow:auto; that therefore should show scrollbars (test page with div's and iframe's).
iPad Safari seems to have trouble handling background images in rare cases, showing weird lines of lower lying content.
There's not a lot about this in Google (yet).
iPad browser doesnt support file uploading(even if it supports it will useless as iPad does not have a standard File Browser). The file field appears with a Choose File button grayed out.
Beside doesn't support scrollbar in TextAea, it seems that we can using javascript to make text in TextArea selected automatically too.
This code will only move cursor to the end of text in TextArea.
<div>
<textarea id="text-embed-code" autocapitalize="off" multiline="">
There is a fox running after chrome.
</textarea>
<button onclick="testSelectText(event);">select text</button>
</div>
<script>
function testSelectText(e) {
var box = document.getElementById("text-embed-code");
box.select();
e.preventDefault();
return false;
}
</script>
There appears to be a bug in iPad Safari where a CSS element with both a background image and a background color is rendered with a slight border in the color of the background color. It should fill with the background image all the way to the edge of the rendered element.
I just had the same bug on my site, when trying to view it on an Ipad. The HTML structure is like:
<div class="main"> <!-- background-color: white -->
<div class="left"></div> <!-- background-image: url(some_transparent_png) -->
<div class="content">...</div>
<div class="right"></div> <!-- background-image: url(some_transparent_png) -->
</div>
The left layer uses a background-image, whereas the main layer uses just a background-color. The Ipad view shows a slight border at the edge of the left and right layer.
When i add
-webkit-background-size: 100% 100%;
to the left and right layer, the border disappears.
You can now control the styling of select lists on iOS by resetting it with -webkit-appearance: none;
This rule fixes animation flickering in Safari on iOS devices:
body {-webkit-transform:translate3d(0,0,0);}
There appears to be a bug in iPad Safari where a CSS element with both a background image and a background color is rendered with a slight border in the color of the background color. It should fill with the background image all the way to the edge of the rendered element.
24 bit transparent PNGS ABOVE A CERTAIN FILE SIZE don't render on the iPad2.
I can however get 8 bit ones of the same dimensions to render.
I haven't found out what this maximum file size is in order to get them to render.
I'm currently working on a small responsive web-app which makes heavy use of the iframe youtube api. Apparently the ipad version of safari doesn't support a few html5 methods which I use heavily in this project.
One of them is window.postMessage, which is a way of interacting with scripts on other pages, for example the a script that is used "within" that iframe. Autoplaying videos also doesn't work.
Frame problems. iPad Safari will both hide scrollbars and expand frames to the size of their content.
Changing the frame tag to include scrolling="yes" and noresize="noresize" appears to do nothing.
Some sites look fine on everything, even a Dreamcast browser, but not on iPad. The issue can be fixed using tables and iframes instead of normal framesetting (cols and rows, etc).
I also discovered that contenteditable is not supported in mobile safari, thus using a plain textarea is a better bet. Apple Developer Docs
position: fixed;
Does not work in iOS 4 but does work on iOS 5.