Repository navigation
TextInput color issue in full screen editing #16516
Description
Is this a bug report?
Yes
Have you read the Contributing Guidelines?
Yes
Environment
Environment:
OS: macOS High Sierra 10.13
Node: 8.7.0
Yarn: 1.2.1
npm: 5.5.1
Watchman: 4.9.0
Xcode: Xcode 9.0.1 Build version 9A1004
Android Studio: 2.3 AI-162.4069837
Packages: (wanted => installed)
react: 16.0.0-beta.5 => 16.0.0-beta.5
react-native: 0.49.3 => 0.49.3
Target Platform: Android 7.1.1
Steps to Reproduce
- Create a TextInput with text color white
- Rotate phone to use full keyboard
Expected Behavior
The text color should change to black (or similar) in order to be visible on full keyboard layout.
Actual Behavior
If you have set a dark color for the background and your TextInput has a bright color, when you rotate to use the full keyboard layout, the android text input has a white background, but the text color stills bright.
Portrait mode:
Landscape Mode:
P.S. The images are from a StackOverflow post which had no answers.
Reproducible Demo
import React from 'react';
import {
StyleSheet,
TextInput,
View,
} from 'react-native';
const black = 'rgb(53, 52, 53)';
const white = 'rgb(244, 243, 243)';
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: black,
},
TextInputStyle: {
color: white,
},
});
export default () => (
<View style={styles.container}>
<TextInput
placeholder="Placeholder"
placeholderTextColor="white"
style={styles.TextInputStyle}
/>
</View>
);
Activity
[-]React-native Text input color issue in full screen editing[/-][+]TextInput color issue in full screen editing[/+]stale commentedon Dec 23, 2017
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.
hoscarcito commentedon Dec 25, 2017
As I said before, you cannot see the text that you are writing if the text color is bright.
hoscarcito commentedon Jan 25, 2018
Is it possible to get some help here??
sintylapse commentedon Jan 27, 2018
Have the same problem. Its strange that, in landscape mode text input gets his native appearance, but not the native text color
sintylapse commentedon Jan 28, 2018
it fixed in v0.50, before that you can use react-native-orientation to define screen orientation and change color
hoscarcito commentedon Jan 29, 2018
Yes that was an option but I didn't want to use an entire native library just to check the orientation so I used onLayout and changed the text color depending on the width and height.
I'll try this with v.050
Thanks!!!
hoscarcito commentedon Jan 29, 2018
Hi again @sintylapse I've tried my example again with the latest repositories ("react": "16.2.0" and "react-native": "0.52.2") and the problem is still there. How did you tried it?
I've also uploaded a repo with this configuration if you wanna check it out https://github.com/hoscarcito/coso
Thanks for your help!
sintylapse commentedon Jan 29, 2018
@hoscarcito Hi. Store your text in state and use handler function to change it. In this case, color will change automatically.
hoscarcito commentedon Jan 29, 2018
Oh you saved me!! It's working in 0.52!!
Thank you so much!!!!