React-native TexField with floating inline suffix - react-native

I'm building a text field component with inline floating suffix. Everything works fine on iOS. When I click in a placeholder, the suffix moves to the left. On Android, the placeholder is cleared, and the suffix stays where it was. I would like him to behave like iOS.
Link to Expo snack: https://snack.expo.io/#galechus/textfield-with-floating-inline-suffix

Related

ImGui Button Icon not alignment properly

My icon is not working properly in the ImGui::Button. I'm using the custom font named material-design from IconFontCppHeaders. My other icons are perform nicely, but the grid one is not acting correct. Here is my code:
ImGui::Button(_transparency ? ICON_MD_GRID_ON "##enable###gridTransparency" : ICON_MD_GRID_OFF "##disable###gridTransparency")
This line is used to change the icon just in one button, and it works fine. Is there any flags in ImGui that can adjust icons in Button?

Unknown and empty white page suddenly appears from bottom while typing

A lot of iOS users (mainly iOS 15, but iOS 14 also) started to report a strange behaviour: while they're typing in the login screen or signup screen, the app became blank.
Watching the videos provided, it seems that a white "something" (like a modal, but not a modal) comes from the bottom at any time they are writing inside text input and cover the full app, so the only thing the user can do it's to kill the app.
It's impossible for us to recreate this behaviour (both on simulator than real devices).
Any idea or any known issue?
react-native version: 0.63.4
Found:
It's a well-known bug of KeyboardAvoidingView on iOS when user enables "Prefer Cross-Fade Transitions". They just forgot to solve it or, at least, add a warn on KeyboardAvoidingView documentation.
https://github.com/facebook/react-native/issues/29974
(thank you Wilson!)

Problems with react-native-maps callout

I'm new to React Native and I'm having problems in both platforms with react-native-maps Callout. I'm using Apple maps on iOS and Google ones on Android. Callout shows title and image.
On iOS when I have several markers in the map, and some of them are very near each other, when clicking the marker the callout shows for a second but then it hides and shows the one from the nearest marker. I have searched for a solution and found people using some workarounds like setting pointerEvents="auto" but nothing worked for me.
On Android when clicking the marker the callout shows correctly but the image is not shown. I also searched and found a workaround including the image inside a but this didn't work for me at all, it works better, because the image is shown most of the times, but not always. So for now I'm only showing the title on Android.
I have tried using last react-native-maps version 0.28.0 and same behavior. I haven't tried Google Maps on iOS, I think that will be the following step if I can't find a solution.
I also tried react-native-mapbox-gl and works fine on iOS, the Callout shows correctly with title and image, but on Android I install the app and it opens for a second and then closes throwing MainActivity not found error. If I go back to the previous commit without react-native-mapbox-gl then it installs and opens correctly. I have thought also about using react-native-mapbox-gl on iOS and react-native-maps on Android. But, is it really so hard this to work with maps in React Native?
Thanks in advance.
I had the same issue and solved it adding this to the Marker
anchor={{x: 1, y: 1}}
pointerEvents="auto"

How to fix text that is not visible in react-native app

I'm facing an issue with react-native.
It is working correctly on the simulator and iPhone7, but it isn't working on iPhone XR.
I'm not sure if this happens for all iPhone XR.
The first one is from iPhone XR and the second one is from the simulator.
As you can see here, I'm able to select text and clear text, just they are not visible.
Can anyone help me to fix this issue?
It looks like the text has a white color.
It looks like you have dark mode enabled, which can cause the text in a <TextInput/> to show up blank (this is a React Native issue). Adding color: '#000000' to the text input styles should fix it.

KeyboardAvoidingView doesn't move the view high enough while selecting some TextInput box towards the bottom of the screen

This is for iOS app created using react-native. I am using KeyboardAvoidingView in a form which contains a few TextInput fields. I have observed that the view is not moved high enough to accommodate the keyboard when a TextInput field towards the bottom of the screen is selected.
I created a snack that demonstrates this behavior (Link below). I have also observed that in some cases, the view is moved high enough on one iPhone but not the other. Initially, the problem was reported for iPhone 6S Plus in which users reported that the view is not moved high enough to accommodate the keyboard and in such cases, they are not able to see what they are typing the input box. When I was trying to create a snack to reproduce the problem, I found that I was able to reproduce that even on an iPhone 5s.
https://snack.expo.io/ry15dng2-
In the above snack, if you click on the TextInput box with value jug, you should see that the keyboard overlaps the input box and it is not clearly visible.
I am sorry for the quality of the snack. I just tried to create a minimal example to reproduce the problem.
How can I fix this problem?
I also experienced this issue (on Android). They key is this prop in the KeyboardAvoidingView:
/**
* This is the distance between the top of the user screen and the react native view,
* may be non-zero in some use cases. The default value is 0.
*/
keyboardVerticalOffset: PropTypes.number.isRequired,
The view does not automatically identify the offset between the top of the app frame and the top of the KeyboardAvoidingView that you are rendering, so it doesn't shift itself enough if that number is nonzero.
To fix this, either add an explicit keyboardVerticalOffset if it's known, like this...
<KeyboardAvoidingView behavior={"position"} keyboardVerticalOffset={Constants.statusBarHeight}>
... or move the KeyboardAvoidingView to the root of your component tree so that there is no offset above it.