Nesting ImageBackground moves elements

[wsdt]

 "react": "16.8.3",
  "react-native": "0.59.1",
  "react-native-color-matrix-image-filters": "^5.1.5",

Referring to following code snippet:

<Grayscale>
 <ImageBackground
                source={this.props.backgroundImg}
                style={styles.container}>
                {this.props.children}
            </ImageBackground>
</Grayscale>

The image is successfully converted into Grayscale, but the image and the contents (see this.props.children) are moved to the right. As far as I can tell, your library places a component as parent which then moves the screen and causes a styling issue.

Replacing <View></View> with <></> should resolve this issue!

Thank you in advance!

[iyegoroff]

You can add a 'style' or any other View prop to Grayscale component itself.

[wsdt]

I know, we resolved it by adding:

height:"100%"
width:"100%"

But we thought, maybe the component should have this behaviour natively.

[iyegoroff]

This feature doesn't seem critical enough for me to introduce a breaking change in the component API.