I am wanting to implement a custom text wrap strategy for my application running 0.59.9. There are portions of the app where time ranges are used (ex. '9/12/2019 8:00 AM - 10:00 AM EST') and especially on smaller devices or users with larger font scaling none of the baked in textWrap / numberOfLines options can handle quite what I want.
I would like it to break at a specified location, specifically the '-' in the timestamp. Is there a way to do this? Maybe a listener exists for isViewOverflowed that a developer can hook into?
One solution could be to break apart the string into two parts and just have a Text container which flows inline if there's enough space. Otherwise it will overflow.
<Text>
<Text>9/12/2019 8:00 AM</Text>
<Text>10:00 AM EST</Text>
</Text>
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'm working on a react-native app and I'd like to create a list of images and videos like TikTok, so it could be really long.
I've already followed the instructions for improving performances, but the lag still exists, therefore I've spotted some libraries that could solve the lag:
react-native-big-list
recyclerlistview
Any suggestions to create an improved performance FlatList.
Thank you
Please post here code how you are rendering your <FlatList />, maybe there are two many re-renders or you are using too heavy components inside.
There are couple of things that can improve performance
use https://github.com/DylanVann/react-native-fast-image for displaying thumbnails. This is must have solution if you are rendering list with images inside.
decrease amount of transparent views
use hermes on android (and on iOS too for latest RN)
check this doc https://reactnative.dev/docs/next/optimizing-flatlist-configuration
I have an app that makes extensive use of react-native-paper's TextInput. Many of these inputs have to deal with monetary units. I know that TextInput from react-native-paper provides a render prop that allows you to add a text input mask and many have already been written. However, I can't seem to find one that works with expo and I only want to eject if absolutely necessary (I like many of the conveniences that expo brings to the table).
Can anyone show me an example of how to use onChangeText to accomplish this on my own?
These are my requirements:
I want 2 decimal places
I want to prevent the user from entering more than 1 decimal (maybe it's better not to allow them to enter a decimal at all - I'll do it once they enter more than 2 digits)
Check out this sample
Of course you can use any regex
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 an app that makes heavy use of the Image component from React Native.
I understand that caching is good for remote images but I need to load local images which change regularly.
The Image component is caching the files and showing the cached version even when the local files change.
The question is how do I disable caching on local files but keep it for remote URLs (as I have a mix of local and remote)?
I would give a code example but literally it's as simple as
<Image source={{uri: 'file://image.png'}} />
Note: These are files that are created and changed by actions in the app so require('image.png') will not cut it. I use that for static images all the time and works great but it's static not dynamic.
I've also seen answers about random query params on the end of the string. That's very hacky in general so I wouldn't hire you for a job :) but apart from that it apparently doesn't work.
Cheers in advance!
To be really clear based on commments and answers to far....when the image file changes. It needs to change the image component immediately so caching and state need to be cleared and the new image is displayed.
A bit late to answer but you can add the query "?time=new Date()" in your variable, like that :
const [profilePicture] = useState(`${baseURL}${user.infoUser.image_profile}?time=${new Date()}`);
The main problem with this one is that is gonna refresh the image every time and oso the delay to display the image may be quite high.
Catching would be good for your app,so you don't want to stop. The solution to that sort of problem is to change the name of the image as well as the image itself. Changing the image without changing the name will do nothing.
You could have something like this
<Image source={{uri: `file://${imageName}`}} />,
that's the only piece of code you have posted so I can't really suggest more than that.
Better still you could store the imageName as part of state to be be able to re-render to a different anytime you feel like.
<Image source={{uri: `file://${this.state.imageName}`}} />
I think the problem is that there's no listener for changes on the image resource itself (and I don't think there's an library for that either). The only possible solution if you don't want to change the name of your file, would be to trigger an Event (or a state/redux - change) to force the component to reload everytime you change the Image in your code.
Otherwise you have to write your own library which always listens on image changes and reloads the component evertime something changes.