-
Notifications
You must be signed in to change notification settings - Fork 24.3k
Commit
… nesting views Summary: We are removing support of nesting views inside <Image> component. We decided to do this because having this feature makes supporting `intrinsinc content size` of the `<Image>` impossible; so when the transition process is complete, there will be no need to specify image size explicitly, it can be inferred from actual image bitmap. And this is the step #0. <ImageBackground> is very simple drop-in replacement which implements this functionality via very simple styling. Please, use <ImageBackground> instead of <Image> if you want to put something inside. Reviewed By: yungsters Differential Revision: D5100021 fbshipit-source-id: 640c0fb2d1066e166d974efba39b4cfaaee7dd45
- Loading branch information
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,64 @@ | ||
/** | ||
* Copyright (c) 2015-present, Facebook, Inc. | ||
* All rights reserved. | ||
* | ||
* This source code is licensed under the BSD-style license found in the | ||
* LICENSE file in the root directory of this source tree. An additional grant | ||
* of patent rights can be found in the PATENTS file in the same directory. | ||
* | ||
* @providesModule ImageBackground | ||
* @flow | ||
* @format | ||
*/ | ||
'use strict'; | ||
|
||
const Image = require('Image'); | ||
const React = require('React'); | ||
const View = require('View'); | ||
|
||
/** | ||
* Very simple drop-in replacement for <Image> which supports nesting views. | ||
* | ||
* ```ReactNativeWebPlayer | ||
* import React, { Component } from 'react'; | ||
* import { AppRegistry, View, ImageBackground, Text } from 'react-native'; | ||
* | ||
* class DisplayAnImageBackground extends Component { | ||
* render() { | ||
* return ( | ||
* <ImageBackground | ||
* style={{width: 50, height: 50}} | ||
* source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} | ||
* > | ||
* <Text>React</Text> | ||
* </ImageBackground> | ||
* ); | ||
* } | ||
* } | ||
* | ||
* // App registration and rendering | ||
* AppRegistry.registerComponent('DisplayAnImageBackground', () => DisplayAnImageBackground); | ||
* ``` | ||
*/ | ||
class ImageBackground extends React.Component { | ||
render() { | ||
const {children, style, ...props} = this.props; | ||
return ( | ||
<View style={style}> | ||
<Image | ||
{...props} | ||
style={{ | ||
position: 'absolute', | ||
This comment has been minimized.
Sorry, something went wrong.
This comment has been minimized.
Sorry, something went wrong.
This comment has been minimized.
Sorry, something went wrong. |
||
left: 0, | ||
right: 0, | ||
top: 0, | ||
bottom: 0, | ||
}} | ||
/> | ||
{children} | ||
</View> | ||
); | ||
} | ||
} | ||
|
||
module.exports = ImageBackground; |
12 comments
on commit 9637dd4
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
View don't have 'resizeMode' and you can only pass down a style to the View and not the Image.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If ImageBackground
component supports 'resizeMode', it will be more useful.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes. ImageBackground
supports imageStyles
will be more useful.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@fenglu09 It already does support it!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
not working for me. It will show warning.
mycode:
<ImageBackground style={styles.backgroundImage} source={require('./img/run_status_block_bg.png')}>
</ImageBackground>
backgroundImage: {
flex: 1,
height: null,
width: null,
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
resizeMode: 'cover',
zIndex: -1,
}
react-native version:
"react": "16.0.0-alpha.12",
"react-native": "^0.46.1",
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Use <ImageBackground imageStyle={{resizeMode: "cover"}}></ImageBackground>
or even better (if it works) <ImageBackground resizeMode="cover"></ImageBackground>
.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Both imageStyle={{resizeMode: "cover"}}
and resizeMode="cover"
doesn't wok.
Is there any doc about ImageBackground
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Have you tried it on master?
ImageBackground
has pretty trivial implementation, so you can use it as a documentation:
https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Same issue here imageStyle={{resizeMode: "cover"}} doesn't have any effect. My local version of ImageBackground.js does use the imageStyle property
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@shergin
Works fine in react-native: 0.47.1
. Thanks
i wish this was outside core. It's trivial enough to be an independent module outside core.