I am getting an error saying "textAlignVertical" is not a valid style property when attempting to use the 'textAlignVertical' style on a Text element. I've checked the documentation and it says I should be able to use this style property: https://facebook.github.io/react-native/docs/text.html
has anyone else had this issue?
The textAlignVertical style is an Android-only property. If you are developing on iOS, try using the flexbox alignment property alignItems: center instead.
It also appears that the textAlignVertical property was moved from TextInput properties to the Text element styles only three days ago, and is going to be released in React Native 0.19.
I am not sure how the React Native documentation is generated, but based on my reading of this commit diff, the documentation appears to be ahead of the latest released version.
Sometimes you might find that alignItems won't work well -- I saw that an icon that I was using disappeared entirely. I instead just added an alignSelf: 'center' to the styling on the text itself (rather than the parent like you need to do with alignItems) and it seemed to fix it.
For textAlignVertical to work properly, add lineHeight prop instead of height for ios
height: phoneWidth * 0.09, // for android
lineHeight: phoneWidth * 0.09, // for ios
The line height solution worked for me. I am writing this post to explicitly show how to set the line height by platform:
yourComponent: {
width: 44, height: 44,
...Platform.select({
ios: {
lineHeight: 44
},
android: {}
}),
textAlign: 'center', textAlignVertical: 'center',
}
It's important that your and height and line height are the same and that you do it by platform.
It's important to note that I also have this component nested in a view with alignItems set to center.
I just wanted to explicitly write this code out as I had to piece it together from a few posts and this should make it easier if someone is looking for a quick copy/paste solution.
Related
My question is: if I set the alignment in a Text component like this:
textAlign: "left"
Now, if I force RTL mode (I18nManager), will it automatically convert the style to textAlign: "right" ?
I'm using the last version of MapBox React Native on my project, and everything is working great except I'm getting a warning,
ShapeSource#images is deprecated, please use Images#images
how can I fix that?
thanks for your help
Edit: my implementation after riastard answer, I hope it helps someone.
<>
<MapboxGL.Images
images={{someIcon: someIcon, someIcon2: someIcon2, someIcon3: someIcon3}}
/>
<MapboxGL.ShapeSource
id="symbolLocationSource"
hitbox={{ width: 20, height: 20 }}
onPress={this.onSourceLayerPress}
shape={featureCollection}
>
<MapboxGL.SymbolLayer
id="symbolLocationSymbols"
minZoomLevel={1}
style={{
iconImage: '{icon}',
iconSize: 0.25,
iconAllowOverlap: true
}}
/>
</MapboxGL.ShapeSource>
</>
Based on the descriptive error you're seeing, it sounds like you can avoid this warning by using the Images object to indicate what client side bitmap/drawable to use as the icon for your symbol layer rather than the older API. Doing this now will probably save you some frustration in the future when ShapeSource#images is fully deprecated.
I've built a React Native iOS app which is fairly basic; it's a few screens which the user can click through to from a 'Home' component, and each one consists of basic components comprising solely Text/View/Image components.
In simulator the app is responsive and there aren't any JS console warnings, however when I do a release to my iPad (Air 2), there's a noticable lag between the home screen and certain other screens. These are notably the screens which have more images on.
I'm wondering if it's because I'm using larger images (the app was designed for the iPad Pro 2) and scaling the images down for use where I want them. The worst offender is a page which has a masonry-style grid of images. There's still only about 30 in a ScrollView there though. Once the component has been shown once the app is much more responsive.
I've already taken steps to optimise my components in terms of using extending PureComponent or using stateless functions wherever possible, and console logging shows me that the touchables are responding immediately, so the delay is definitely at the render time of the component.
N.B. All images are local (loaded via require('./path/to/file')), nothing is being loaded over the network.
Here's an example of the code that populates an array of items for display inside the ScrollView:
...
const items = mediaItems.map((item, index) => {
// scale desired width (1044 for video, 520 for images) based on designed width and device aspect ratio.
const imageWidth = item.video ? (1044/2732) * deviceWidth : (520/2732) * deviceWidth
return (
<TouchableHighlight key={index} onPress={() => onOpen(item)}>
<View style={[styles.gridImageView, { width: imageWidth }]}>
<Image style={styles.gridImage} source={item.image} />
</View>
</TouchableHighlight>
)
});
...
and the styles for the gridImageView and gridImage are as follows:
...
gridImageView: {
height: (460/2732) * width,
margin: (2/2732) * width,
position: 'relative'
},
gridImage: {
resizeMode: 'cover',
width: null,
height: null,
flex: 1,
alignItems: 'center',
justifyContent: 'center'
},
...
So my question is kind of multi-layered:
What is the best practice with regards to ensuring the component appears quickly?
Should I not be setting a width/height on the image itself at all?
Should I be doing some kind of pre-loading of the images in the sizes I want before I let the user begin to navigate around the app?
Should I be using JPG instead of PNG images?
Is there another trick I'm missing?
Should I not be setting a width/height on the image itself at all
You have to set a width and height. If you don‘t do so, your image won‘t display
Should I be doing some kind of pre-loading of the images in the sizes I want before I let the user begin to navigate around the app?
It is a good idea to downlod images beforehand. Huge images need a lot of performance. Probably your issues are gone, if you resize your images before displaying them. Therefore you could use react native image resizer
Should I be using JPG instead of PNG images?
You should use JPGs, because they provide a higher compression rate.
I'm developing a mobile app using Appcelerator Titanium. I've changed the textFields font but I couldn't do the same with pickers. Is there anyway to do that?
You can add views and therefore labels to picker rows, but that is iOS only. The font property applies to mobile web and Tizen only. The pickerRow is well documented, you can find examples and more here.
Assuming you have already implemented the custom font, it works like this:
var row = Ti.UI.createPickerRow();
var label = Ti.UI.createLabel({
text: 'Custom Row',
font: { fontSize: 20, fontWeight: 'bold', fontFamily: 'myCustomFont' }
});
row.add(label);
If you have not added your custom font yet, the Titanium custom font guide explains it all.
I have drawn a circle in Titanium using the following code.
var wheelTop = Ti.UI.createImageView({
width: 100,
height: 100,
borderRadius: 50,
borderColor: '#1a0033',
backgroundColor: '#8400ff'
});
Now, I would like to divide this circle into 24 segments and create a separate property for each segment.
How can I do that ?
Perhaps you should use a WebView containing an HTML canvas.
I've also read that the Raphaël js lib (http://raphaeljs.com/) using SVG can be included in Titanium:
http://developer.appcelerator.com/question/15861/using-raphaeljs-js-drawing-library-in-a-mobile-app
If a webview is not an option, you could check out some modules in the marketplace:
https://marketplace.appcelerator.com/apps/4967?1054292716
https://marketplace.appcelerator.com/apps/5941?416198363