react-native-image-overlay

React Native ImageBackground is useful. But you know what's even more useful?
ImageBackground with overlay. This is exactly it.

Get Started

Installation

1$ npm install --save react-native-image-overlay

Usage

1import ImageOverlay from "react-native-image-overlay";
2
3export class MyApp extends Component {
4    render () {
5        return (
6            // For external image
7            <ImageOverlay source={{ uri:"http://example.com/img/cool.jpg" }} />
8            // For local asset
9            <ImageOverlay source={require("../../assets/banner.png")} />
10        )
11    }
12}

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.

1<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

1<ImageOverlay
2    source={{ uri:"http://example.com/img/cool.jpg" }}
3    overlayColor="cyan"
4    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.

1<ImageOverlay
2    source={{ uri:"http://example.com/img/cool.jpg" }}
3    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

1<ImageOverlay
2    source={{ uri:"http://example.com/img/cool.jpg" }}
3    title="This is the title"
4    contentPosition="bottom" />

Additionally, you can change the styling by passing the titleStyle along

1<ImageOverlay
2    source={{ uri:"http://example.com/img/cool.jpg" }}
3    title="This is the title"
4    titleStyle={{ color: 'yellow', fontWeight: 'bold' }} />

3. Overlay with child component

You can pass extra components to be displayed on top of your image.

1<ImageOverlay
2  source={{ uri:"http://example.com/img/cool.jpg" }}
3  height={0.7 * height} 
4  contentPosition="bottom">
5    <View>
6        <Image style={styles.avatar} source={{uri:"http://example.com/user/avatar.png"}} />
7        <Text style={styles.name}>Amelia Edwards</Text>
8        <Text style={styles.location}>Kuala Lumpur, Malaysia</Text>
9        <Button text="Follow me" />
10    </View>
11</ImageOverlay>

Note: When you are using child component, title prop will be ignored.