I've looked it up on reactnative.dev, and the Text component is supposed to have an 'onTextLayout' prop.
I'm running the React Native version 0.62.2, and the documentation on their site says it applies for 0.62. However, when I try to use the prop in a Text component, I am shown this message:
I need to use this prop to detect when the text starts overflowing into two lines. If anyone has another solution of how I can accomplish this without onTextLayout, that would also be very helpful.
It appears it's not working on react-native-web
http://necolas.github.io/react-native-web/docs/?path=/docs/components-text--children
Just test your app on android/iOS and you will be fine
Related
I would like to create a box to select the date as in the attached photo.
What do you recommend to create something similar in react native with expo?
I tried using MUI's Mobile DatePicker API, but it doesn't work, errors occur.
Update:
I created this box to select the date, but when I go to press it gives me an error.
The error is the following:
https://www.npmjs.com/package/#react-native-community/datetimepicker
Works with Expo. Static version set at 3.x.x (something version 3). So you won't have the full functionality that is described on their docs, but you'll have enough.
expo install #react-native-community/datetimepicker
instead of npm to ensure you get the compatible version.
This library can be a bit difficult to work with. The main suggestion I have for you is to create a custom component on your own that looks like your design. Then wrap it with a TouchableOpacity and onPress set the DateTimePicker to show its modal. Grab the value you need from the onChange result, and pass it to your local state. Dont try anything fancy after that because as I mentioned earlier, the library is difficult to work with and really fights hard against any customization. It works well though and will certainly solve your problem.
I am currently updating the version of my application, and I have a function that is used that no longer exists, I tried several things according to the documentation
but I get either an "Invalid Hook Call" error or something else...
The problem without the withNavigationFocus function is that when the screen is rendered, the data is not displayed. I have to press Cmd+S to refresh and have the data on the screen. Knowing that the props are linked to Redux.
This is the line that causes the problem:
export default withNavigationFocus(connect(mapStateToProps, mapDispatchToProps)(Home));
I can't find an alternative so far, does anyone have an idea?
Upgrade doc link here
You can install a backward compatibility package and you can continue to use HOCs withNavigation and withNavigationFocus.
Inpm install #react-navigation/native#^5.x #react-navigation/compat#^5.x #react-navigation/stack#^5.x
It was designed with React Navigation 5. I didn't test with version 6
I have been trying to fix this weird problem I am facing with React Native/Expo. I was working on an Authentication page. It is a simple username and password input form. It was going okay for a few weeks until yesterday when the TextInput component started lagging. The weird part is it only lags in my device (Iphone X). When I use a virtual device, it runs fine and there is no lagging when I input something in the TextInput.
I also want to mention that it is not just my code but if a component has more than once TextInput, the TextInput becomes laggy and super slow when anything is typed.
I have tried:
Restarting my phone
Deleting the expo app and downloading it again
Running the app in production mode
Nothing seems to work and the component is still lagging. Has anyone else faced such problem? I have created this simple snack:
https://snack.expo.io/#ayushdev/9d2af8
The issue still persist in this simple snack too.
You should try state colocation here. Other things constant, that is expected to give you at least some speedup.
Separate out the different InputText components in your form, each updating their own states only. This ensures that the entire form is not re-rendered as you change the input in just one of those fields.
I am working on a react native app.
in one page of it I wan't to make a highlighting option like the following picture
but I can't customize the text popover to reach this behavior,
after many trials I reached the following result
Any idea how to add highlighting functionality?
Try using react-native-highlight-words library . Might be it solves your problem
Just use a webview and use the injectedJavaScript prop
I am trying to find a Component how to remove my ListItems in my ListView. Actually there is a Module working for iOS react-native-swipeout where you can swipeout the elements. I need the same for Android or atleast something similar.
Maybe someone has figured this out, and could tell me how they solved deleting Items from a ListView in a React Native Android App
The react native team removed their experimental implementation for the SwipeableFlatList component (which uses internally a FlatList instead really really deprecated ListView).
I rescued the original code from v0.59 which they removed on v.60 and its available as a npm module here
And theres a good how-to on medium here