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" ?
Related
Let's say in a TextInput element, I want to make a word green if it's formatted as #someonesusername the moment they finish writing the word (as opposed to after the text is submitted, in which case it's trivial to send the text to a normal Text component with subset styling. I thought of underlaying a Text component with absolute positioning and making the actual TextInput component invisible, but that seems it might be a headache to keep in sync, and cause usability challenges in the sense that the editing cursor wouldn't be there unless you wired together a custom cursor element to render and that'd be quite the headache for such a small thing I want to do.
So this the hack I came up with (Amazing question).
React native TextInput can take children as input. So why not split the value and add Text as children in the TextInput and add style the way you want to.
May be wondering how do get the text back? Well these children become string when comes to onChangeText callback and get a string back in your state.
For example:
// split the text like
const [firstPart, secondPart] = this.state.text.split("#");
const [higlighted , restText] = secondPart ? secondPart.split(' ') : [];
Then use them
<TextInput
style={{height: 40, borderColor: 'gray', borderWidth: 1}}
onChangeText={this.onChangeText}
>
<Text style={styles.paragraph}>
<Text>{firstPart}</Text>
{higlighted && <Text style={{
color: 'blue'
}}>#{higlighted}</Text>}
{restText !== undefined && <Text> {restText}</Text>}
</Text>
</TextInput>
Umm, I accept this might be worse solution ever but this works :P
Full example:
https://snack.expo.io/#subkundu/react-native-styles-to-a-subset-of-the-text
I need to align this long text and it should start from left. As shown in the following image the end of the text is nicely displayed and start is hidden.
How to start the text from left,
alignText: 'left'
didnt work.
Geocoder.geocodePosition({
lat: origin.latitude,
lng: origin.longitude
}).then(res => {
console.log(res[0]);
this._destination.setAddressText(res[0].formattedAddress);
});
Here the formattedAddress is very long, I need to show it from the begining.
By default this is working in iOS.
try maxLength. assign value for maxlength according to visible text size. Otherwise use multiline=true if you want to show the full text.
ex:
<TextInput maxLength={50} />
Read more about it:
https://reactnative.dev/docs/textinput.html#maxlength
https://reactnative.dev/docs/textinput.html#multiline
You need to learn about flex box system in react native :
flexDirection : 'row' -> used to set the text in row direction.
alignSelf : 'flex-start' -> used to set the start from the left.
Also please read it from there React Native Basics flexbox
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.
In React Native, is there a way to toggle visibility of an element?
For example:
<Text visibility={this.state.isVisible}>Visibility depends on state</Text>
this might be crude but it works.
under render
var visibletext = null;
if (this.state.isVisible) {
visibletext = (<Text>Visibility depends on state</Text>);
}
then, under return part
<View style={styles.container}>
{visibletext}
</View>
There are various ways to do this. See the Conditional Rendering guide at the React.js website, which explains different options.
One simple way is to use the && operator inline:
{this.state.isVisible &&
<Text>Something</Text>
}
Note that with the conditional rendering approach, if you have (for example) some views centered vertically, this views will suddenly move up or down when the text appears (to give room for the new view). Another approach that avoids this jump is to either change the text color or set the text to empty string:
// Change the text color
<Text style={this.state.isVisible ? {color: 'black'} : {color: 'white'}}>Something</Text>
// Set text to empty string
<Text>{this.state.isVisible ? "Something" : ""}</Text>
Changing the color of the text is the best way to make sure that the other views don't suddenly move when showing the text, given that the text is already occupying the layout space it needs.
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.