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 (
            // For external image
            <ImageOverlay source={{ uri:"http://example.com/img/cool.jpg" }} />
            // For local asset
            <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.

timbabs1/react-native-image-overlay