In my react-native android app, This is the same text box in portrait & Landscape views.
I have used selectionColor & underlineColorAndroid properties to set the font color.
<TextInput selectionColor={FormElements.textInputSelectionColor} underlineColorAndroid={FormElements.textInputSelectionColor} placeholder={"Email Address"} placeholderTextColor={FormElements.textInputPlaceholderColor} keyboardType="email-address" value={this.props.email}/>
But the issue is in the full screen edit (on landscape mode) it's hard to read in white background.
So I want either to change make full screen edit background color or text color back to black on full screen.
I tried, but couldn't find a solution yet.
Cam someone please give me a solution for this?
This full screen popup doesn't come up only landscape mode. it comes up when ever there is not enough space to occupy the keyboard.
I was encountering this issue too. After a few hours of exploring I found this property of React Native TextInput "disableFullscreenUI"
In my case I only want the normal input editing and don't show the Fullscreen editor.
<TextInput disableFullscreenUI={true} />
and the fullscreen mode will go away upon edit then the editing will remain inside the TextInput.
Hope this helps
There are libs such as react-native-orientation https://github.com/yamill/react-native-orientation/ which allow you to check if the user changed the screen orientation. It would be possible to apply different styles based on the orientation.
However, for the scenario you mentioned, I don't think it would be user friendly to change colors depending on the orientation. I'd recommend you to use a standard color combination that looks fine in all resolution and orientations.
Hope it helps.
This was an issue with RN. I have updated my app to RN V50.0 (earlier it was V47.0). Now the above issue is not there anymore. TextBox shows black color fonts when it's popped up.
Related
For some reason when the orientation changes, I get a white box, which I am assuming is the place of the Drawer pre orientation change. Picture: Simulator Example
If I fully remove and re-render the Home component the white box will go away, but I would like to try and avoid that. I have tried passing height/width props when the dimensions change, but that didn't seem to fix the problem. Would be nice to get some help on this since I am stuck.
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.
I noticed that when my phone is set to light mode, the loading indicator is so faint that it seems like its missing, but when switched to dark mode its clearly visible. In my specific case I am using a FlatList and have a refresh method that enables the pull to refresh functionality. I want to change the color of the loading indicator to a set color (lets say black in this case) and ignore the global theme color.
Working (Dark Mode)
Not Working (Light Mode)
Thank you!
Instead of letting the OS choose the color based on dark/light mode, React Native's ActivityIndicator has a color prop that you should check out. Maybe something like:
<ActivityIndicator color="#666" />
I tried the tutorial on https://shoutem.github.io/docs/extensions/my-first-extension/using-ui-toolkit
Previewed on Shoutem emulator but details.js is not showing the image. Any solution?
details
The <Overlay> tag is taking Builder defined values, in this case Tag overlay color. Setting it to a lower opacity (30%) and possibly to black, will resolve this. The image itself does load, it's just that the default overlay value is concealing it.
Whenever the software keyboard appears, it resizes the background image.
See screen shot here in this question link.
Software keyboard resizes background image on Android
This question was for android and i want to implement in Titanium.
Please help.
You can just set the windowSoftInputMode property in your window.
Generally speaking, you can assign to this property any combination of two types of constants: visibility states (ALWAYS_HIDDEN, ALWAYS_VISIBLE, HIDDEN, UNSPECIFIED or VISIBLE) and adjustment options (PAN, RESIZE or UNSPECIFIED).
In your case you can combine SOFT_INPUT_STATE_VISIBLE and SOFT_INPUT_ADJUST_PAN.
Just make few changes in your .tss file:
"#yourWindowID": {
...
windowSoftInputMode: Titanium.UI.Android.SOFT_INPUT_STATE_VISIBLE | Titanium.UI.Android.SOFT_INPUT_ADJUST_PAN
...
}
You can find more information here.