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

$ 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.