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.