I'm trying to make an screen with Arabic text in it. It is basically a big that include smaller components nested into it. (the container is like the page, while the smaller ones are parts that need their own even handling onPress...etc).
I want to make the text shown in justified way with lines starting/ending uniformly. So I went to the parent and added this style:
textContainer: {
direction: "rtl",
textAlign: "justify",
},
and it works really fine except the last line, it starts from the left instead of the right. So, is there a way to tell the to justify and also make the last line start from right?
Here is how it looks(https://pasteboard.co/JMDRj1e.png)
if you look at the last line it starts from left and not from right, I think this is a bug in react native.
The following worked for me,
For iOS, I gave the text style writingDirection: 'rtl' and by importing #import <React/RCTI18nUtil.h> in AppDelegate.m, added these two lines in didFinishLaunchingWithOptions: ,
[[RCTI18nUtil sharedInstance] allowRTL:TRUE];
[[RCTI18nUtil sharedInstance] forceRTL:TRUE];
and for android you can refer here, How to set direction property of a View to RTL in React Native. Also, you need to add transform: [{scaleX: -1}] and flexDirection: row-reverse.
Your implementation will only align the first line. in order to align an Arabic paragraph / or more than one line, you can do the following:
import I18nManager from react native in your app.js
import { I18nManager } from "react-native";
then add this line below the import to allow RTL
I18nManager.allowRTL(true);
finnaly you can add writingDirection: "rtl" to the style of the arabic text and it should be aligned the correct way
Related
I’m creating an app and need to make a signup/login page. I added a background using a picture and a zstack and on top I have the text and text fields. The text fields are showing up but not allowing me to add padding as well as there is no title text showing. Please help.my code
Did some more testing to find out that this happens whenever I use a textfield over an image. Not sure if this is a bug or not but it seems to be because as soon as the zstack is removed everything works.
At last ive discovered the issue, the text fields are extending way out of the canvas. Ive fixed the width of the textfield as a temporary solution but still looking for a way to fix this relative to the screen rather than the background as the field extends to the size of the image. Let me know if you can help as im just starting to use xcode!
I think its because the image cause canvas to be much more bigger and you use edgesIgnoringSafearea(.all)
Try to use on the image clipped() method and i think it will fix your issue with the padding.
And also try to add foregroundColor to the test fields
Good morning, this is actually my first question on StackOverflow after a few years in the industry (hope it's not too late!).
I'm working as a side project on a react native app.
I fail to understand how does the view change when the keyboard is up.
When the view shrinks (because the keyboard was shown), views overlap one to another. I want them to still be split.
I have this picture showing what I mean with overlapping views:
I thought it might be something with the paddings/margins, but I removed them all and still the same issue. Now, I know that the input height is defined by an absolute number, and that is what makes it not shrink, so it is bigger than the actual view, that's why it overlaps.
How can I keep my input having a fixed height but also maintaining a margin of separation when the view shrinks ??
Thank you very much!
Edit: I'm editing because I feel like I haven't been able to express my idea of how I need it to work. (Should I delete previous explanation? Keep picture if someone edits and deletes the first explanation).
The initial view with no keyboard has to be like this:
The inputs and buttons have to be at the bottom, the view getting all the height possible.
When opening the keyboard (by clicking on one of the inputs), I want the list to shrink so that the buttons and inputs are still visible and separated by a small margin/padding, and the list to have taken the remaining space (again respecting a small separation between views). The list will still be scrollable (it is a FlatList) when opening the keyboard.
Thank you again and sorry for the misexplanation.
You can try wrapping your content inside a ScrollView instead of a normal View like this:
<ScrollView style={{flex: 1}}>/* your content here */</ScrollView>
So when the keyboard shows up your elements won't overlap since they take the same space but you can scroll to see the elements hidden by the keyboard.
I think you can try something like this:
<View>
<ScrollView>
<KeyboardAvoidingView style={{flex:1}} behavior={Platform.select({ios:"padding", android:null })} keyboardVerticalOffset={Platform.select({ios: 0, android: 500})}>
{/*Your buttons and other elements here...*/}
</KeyboardAvoidingView>
</ScrollView>
<View>
You will also have to import KeyboardAvoidingView and ScrollView from react-native for this.
I've searched to find a solution to this very odd issue but cannot seem to find a resolution.
I provide a snack which when you run on android demonstrates the issue quite nicely:
https://snack.expo.io/#whitefluffy/brokentextalign
Basically when a piece of text (not restricted to the steps import I'm using that's just the one I used in this).
As you can see the text wrapping at the top is wrapping which then aligns to the left of the screen even though it's within a container that is settings center, but that is fine but lower down the take a picture of... text wraps but now instead of aligning left it decides to center itself instead.
So is it just that text wrapping always causes text to do what you're not trying to do or is there some way to get things to wrap in line with the styles set on the containers?
As I've tried additional containers, individually overriding the style on that object but nothing seems to work, so in my desperation, I turn to you the fine people of stack overflow to request someone put me out of my misery...
Many thanks,
IDED
For the Top text, if you want to in align center just add style={{textAlign: 'center'}} to the <Text> (the one wrapping "To use this Global Vans Companion app we just need....")
For the third label of <Steps> in the labelStyle object line 48, add textAlign: 'left' and you are good to go!
How Do I create that Button in React Native?
As above, button component include two part , left is text part, right part include another background color and image.
But, whole button component includes same border radius and gradient.
Does somebody might know how to get to this?
You should wrap two sibling View components with TouchableOpacity component which will handle onPress for the whole button. Position them side by side using flex and set explicit sizes on each. Left element should get borderTopLeftRadius and borderBottomLeftRadius and right should get borderTopRightRadius and borderBottomRightRadius. Border radius is solved separately but it would seem like it's all in one, and for gradient do you mean this inner shadow or something else?
It's because inset shadow does not exist in RN, but it can be faked quite realistically. Read more here: https://github.com/facebook/react-native/issues/2255.
If you really wan't to use gradient, you must use https://github.com/react-native-community/react-native-linear-gradient and position it absolutely over everything and just set it in the background using zIndex property.
I know that Vuetify.js has horizontal v-toggle-btn. Is it possible to make it vertical ?
Here is an example of horizontal v-toggle-btn
Thank you for the information from AndrewHarvey
It appears in one of the newer releases the class named changed, it's now .v-btn-toggle
Since Vuetify defined .btn-toggle's display as inline-flex, you can simply add
.btn-toggle {
flex-direction: column;
}
to your stylesheet to achieve vertical display of button items.
Check pen here