when using
text-align: justify
on react native it adds whitespace between the letters as well for some reason and is supposted to just add whitespace between words
image: https://i.stack.imgur.com/bZor0.png
i have tried removing letter-spacing but it just makes it worst because the whitespace between letters is based on the screen size so it just makes the text look bad on other devices
Unfortunately this how justify work you can check this old answer for more details about why/how it's works like that in react native from here.
Related
I have a textinput lets say :
<TextInput
maxLength={5}
onChangeText={val => {
setExpiry(val.replace(/[^0-9]/g, ''));
}}
placeholder="Input"
value={Expiry}
keyboardType={'default'}/>
I want to restrict user to only add numbers, or any specific format using regex or simple loops.
The above is achieved, working without any functional issues.
But what seems to be off about this method is that it takes a little time (1ms may be) when you enter something unwanted, it shows entered character then removes that character. Overall, this doesn't look that great when it comes to user experience.
What I have tried:
Loop through the input and remove unwanted characters
It works but is slow and give the above flickering issues.
Use regex to replace with empty string
It works and is better at performance than above method, but still it gives the flickering issue.
So My question is that
is there any other way to have the same text box as on a native platform that doesn't have this flickering issue.
For Example: On native android, this issue is not faced.
References:
Regexp with textinput
Loop with textinput
Issue in GitHub repo
Handling TextInput Docs
If the requirement is to allow only numbers, using keyboardType='numeric' will eliminate everything besides numbers (and some punctuation on Android, see the docs on TextInput). Your regex solution will still be required to prevent non-number content, but it should be used less this way.
Have you tested your flickering issue on a release build of your app? The debug version will always be slower, and the flickering problem may not exist in a release build.
I am facing a very rare and unseen issue that the fonts are getting worn out on some of the devices like the One Plus, Oppo etc.
I don't know what's the reason behind that. But this is a device specific issue on some devices only.
Well, If anyone comes across the same problem I have the solution for them :
Add a space " " at the end of the text
Give the Text a set width.
There is a proposed component at the bottom of the issue.
You can refer to this react native issue link
Also, this expo link helps
But, my main concern is these all are hacks. Is there any rock solid answer to solve these things? Why to do extra work, why can't react native solve that? Or are there any permanent solutions to fix this?
Please don't mark it as duplicate. I have the answer, I want to know the reason or any global answer to solve that in one go. I dont want to change all my 1000 text styles. :(
I am building a Currency Input component using React Native TextInput.
While the user is typing, the requirement is that the text should always be format in this way:
$ + [integer-part] . [2 digits decimals]
So for example if the user enters 2, it should be automatically formatted to $0.02. I am able to perform a formatting while the user is typing as illustrated in the below screenshot:
Basically, using onChangeText, I apply some formatting and then call setState with the formatted value.
The problem here is that the newly typed character says for one second before being correctly formatted. And this causes the TextInput to flicker briefly.
I have looked at this similar question. But not only I could not understand how the accepted answer can solved my problem. And even when I did as suggested, it did not work.
I don't know how to go about with this problem: it seems that the TextInput cannot be fully "controlled" since it is displaying an input character although I have explicitly stated:
value={this.state.value}
Any help from the community would be greatly appreciated
There is an open issue in the react-native github:
TextInput flickering when format the text closed, releated to:
Can't modify text in TextInput onChangeText callback on Android (open since 2019)
Even in the v0.68.1 (latest we have today) the same problem is happening.
I have a particullary case where I need to use currency masks and I have two choices:
Accept the flickering issue and keep the mask
Remove the mask and let the user put any plain text value. (in my case, forcing the keyboardType as 'numeric' was enough.
I want to use Bullet Character/ Small Circles used for passwords in React Native Text component. Is there a way to create them without using package.
I am thinking of creating a rounded View with background filled. However, kindly let know if a simpler solution exists.
There is a much simpler way,
Try using Unicode.
2B24, 25CF, 26AB, etc... these are Unicode for black filled dots.
USAGE: <Text>{'\u2B24'}</Text>.
You can search more Unicode here, http://www.unicode.org/
If you're wanting to create a TextInput that obscures the entries (e.g. for a password input), TextInput has a secureTextEntry prop.
I have the following international text in my react native app:
<Text>ᚘᚘᚘ</Text>
However, a blank line is displayed to my screen where the text should go. I have tried for other international characters as well and it is the same result.
I am using notepad++ and making sure that encoding is set to UTF-8. If I use console.log("ᚘᚘᚘ") it displays to the console just fine. Do I specifically need to embed a particular unicode font in my React Native project for it to work correctly? Or what should I be doing so that it displays my text correctly?
On further investigation I am using a Samsung Galaxy S2 for testing purposes. It does not seem to handle unicode characters in all applications, so I think my app will not work in older devices unless I specifically embed a Unicode font. Am I correct in my thinking?
The only solution I found to this was to add a custom font. This link explains how to use a custom font: https://blog.bam.tech/developper-news/add-a-custom-font-to-your-react-native-app . The font I used is called GNU FreeFont located here: https://www.gnu.org/software/freefont/