react-native-image-overlay
v0.1.2
Published
Add overlays on top of ImageBackground
Downloads
295
Maintainers
Readme
React Native ImageBackground
is useful. But you know what's even more useful?
ImageBackground
with overlay. This is exactly it.
Get Started
Installation
$ npm install --save react-native-image-overlay
Usage
import ImageOverlay from "react-native-image-overlay";
export class MyApp extends Component {
render () {
return (
<ImageOverlay source={{ uri:"http://example.com/img/cool.jpg" }} />
<ImageOverlay source={require("../../assets/banner.png")} />
)
}
}
Props
| Prop | Description | Type | Default |
| ----------------- | ------------------------------------------------------------------------------------------ | ------------------- | ----------- |
| blurRadius
| The blur radius of the blur filter added to the image | Number | undefined
|
| containerStyle
| Additional styling for the component | ViewStyle | undefined
|
| contentPosition
| Position of title
text or child component (if any). | String ("top"
,"center"
or "bottom"
) | "center"
|
| height
| The height of the whole component | Number | 300
|
| overlayColor
| The color to be used for the overlay on top of the image | String | "#000000"
|
| overlayAlpha
| Opacity value of the overlay. From 0
to 1
| Number | 0.5
|
| rounded
| Value for borderRadius
to be applied to the component | Number | undefined
|
| source
| The image source (either a remote URL or a local file resource). | ImageSource | |
| title
| Text to be displayed over the image | String | undefined
|
| titleStyle
| Additional styling for the title text | TextStyle | undefined
|
Example
1. Simple overlay color
The most basic use-case of this module is to add colored overlay on top of your image.
<ImageOverlay source={{ uri:"http://example.com/img/cool.jpg" }} />
Default overlay is color is #000000
with 0.5
opacity. You can customize it to any color
<ImageOverlay
source={{ uri:"http://example.com/img/cool.jpg" }}
overlayColor="cyan"
overlayAlpha={0.8} />
2. Overlay with title text
If you want to display a simple white text on top of the image, you can use the title
prop.
<ImageOverlay
source={{ uri:"http://example.com/img/cool.jpg" }}
title="This is the title" />
The title will be center
-ed by default. You can move it to the top
or bottom
using the contentPosition
prop
<ImageOverlay
source={{ uri:"http://example.com/img/cool.jpg" }}
title="This is the title"
contentPosition="bottom" />
Additionally, you can change the styling by passing the titleStyle
along
<ImageOverlay
source={{ uri:"http://example.com/img/cool.jpg" }}
title="This is the title"
titleStyle={{ color: 'yellow', fontWeight: 'bold' }} />
3. Overlay with child component
You can pass extra components to be displayed on top of your image.
<ImageOverlay
source={{ uri:"http://example.com/img/cool.jpg" }}
height={0.7 * height}
contentPosition="bottom">
<View>
<Image style={styles.avatar} source={{uri:"http://example.com/user/avatar.png"}} />
<Text style={styles.name}>Amelia Edwards</Text>
<Text style={styles.location}>Kuala Lumpur, Malaysia</Text>
<Button text="Follow me" />
</View>
</ImageOverlay>
Note: When you are using child component,
title
prop will be ignored.