1

I am ImageBackground with opacity: 0.6 in the styles. This wraps my other components. This opacity has led to reduce the opacity of the child components. How to override the style in child components like a View.

Ghulam Mustafa
  • 13
  • 2
  • 6

3 Answers3

1

Don't use opacity. Use it in background color props like this -

backgroundColor:'rgba(0, 0, 0, 0.6)'

Anirudha Paul
  • 195
  • 10
0

You can just override the style in the child component by applying a style to it in that file. The style applied the latest is the one given priority. For example, the below will render in blue color. 

import React from "react";
import { render } from "react-dom";

const stylesA = {
  color: "red"
};

const stylesB = {
  color: "blue"
};

const B = () => <div style={stylesB}>hey there</div>;

const A = ({ children }) => (
  <div style={stylesA}>
    <B />
  </div>
);

render(<A />, document.getElementById("root"));

Example here: https://codesandbox.io/s/vm6o1jx49l

Colin Ricardo
  • 16,488
  • 11
  • 47
  • 80
  • This doesn't help. This is an example for ReactJS. I am asking for React Native. – Ghulam Mustafa Apr 25 '18 at 02:59
  • It works the same for React Native. Also, your code at the link doesn't run because you can't use React Native components on the web unless you're using something like react-native-web. You need to post all relevant code here. – Colin Ricardo Apr 25 '18 at 08:51
  • Fine. I was just trying to show the code. Well, I am doing this for Opacity. Maybe opacity does not work in this case. – Ghulam Mustafa Apr 25 '18 at 11:02
0

The scene is that you cannot override the Opacity attribute. But for achieving what I want I followed what this guy had to say

React-Native: Change opacity colour of ImageBackground

Ghulam Mustafa
  • 13
  • 2
  • 6