Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React Native TextInput background color looks double layered when it's set to color with transparence

I have a TextInput with backgroundColor of 'rgba(255,255,255,0.16)' as below:

example on snack: https://snack.expo.io/rkEhXn6Nr

import * as React from 'react';
import { TextInput, View, StyleSheet } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <TextInput
          style={styles.paragraph}
          value={"bleep bleep bleep bleep"}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: 'green',
  },
  paragraph: {
    padding: 24,
    margin: 24,
    fontSize: 24,
    textAlign: 'center',
    backgroundColor: 'rgba(255,255,255,0.16)',
  },
});

enter image description here

It looks like as if there's a view (THERE ISN'T) with that background color and a text element also with that background color wrapped inside. How can I only have the "view" to have that background color? It looks fine on android:

enter image description here

like image 753
bleepmeh Avatar asked Aug 22 '19 21:08

bleepmeh


People also ask

How do I change TextInput color in React Native?

To change the text color of text input in React Native, we can set the color style to the text color. to set the color style to 'green' on the TextInput . Therefore, we see that the color of the text we typed into the TextInput is green.

How do I clear TextInput in React Native?

To clear React Native TextInput, we can set the value with a state and clear the state. to set the value prop to val . And we set onChangeText to setVal to set val to the inputted value. Next, we add a Button with the onPress prop set to a function that set val to an empty string with setVal .

How do I set full screen background color in React Native?

You can change the background of main activity/screen, by specifying backgroundColor attribute of stylesheet design in parent view layout (or RoorView) . This will make App's starting screen look and feel better.

How do you give opacity to the background color in React Native?

Use rgba value for the backgroundColor . This sets it to a grey color with 80% opacity, which is derived from the opacity decimal, 0.8 . This value can be anything from 0.0 to 1.0 .


1 Answers

Problem/Explanation:

This issue only occurs on iOS, because there it is used as performace tweak to avoid alpha blending. On iOS devices, a <Text/> automatically gets the same backgroundColor as the parent view. For more information about color inheritance you can have a look this issue on github.

In your specific case, your are applying a background color to the text container and by accident also to the text itself. That's why you get an "highlighted" Text. I could easily recreate this behavior with a simple Text Component. See the following mage:

enter image description here

Solution:

To overcome this issue and have a cross-platform working solution, you need to add a View which surrounds your TextInput and apply the backgroundColor (and the other container styles) there.

Code:

<View style={styles.container}>
     <View style={styles.textContainer}>
        <TextInput
          style={styles.paragraph}
          value={"bleep bleep bleep bleep"}
        />
     </View>
</View>

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: 'green',
  },
  textContainer: {
    margin: 24,
    padding: 24,
    backgroundColor: 'rgba(255,255,255,0.16)',
  },
  paragraph: {
    fontSize: 24,
    textAlign: 'center',
  },
});

Working Example:

https://snack.expo.io/ByOzRyHHr

Output:

iOS Output

like image 128
Tim Avatar answered Oct 05 '22 06:10

Tim