https://github.com/gaddafirusli/react-native-image-overlay
React Native's ImageBackground with overlay
https://github.com/gaddafirusli/react-native-image-overlay
image imagebackground react react-native
Last synced: about 1 year ago
JSON representation
React Native's ImageBackground with overlay
- Host: GitHub
- URL: https://github.com/gaddafirusli/react-native-image-overlay
- Owner: gaddafirusli
- License: mit
- Created: 2018-04-12T03:06:25.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2023-04-17T11:08:07.000Z (about 3 years ago)
- Last Synced: 2025-03-17T13:07:24.780Z (over 1 year ago)
- Topics: image, imagebackground, react, react-native
- Language: JavaScript
- Homepage:
- Size: 977 KB
- Stars: 87
- Watchers: 1
- Forks: 23
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
react-native-image-overlay
React Native ImageBackground is useful. But you know what's even more useful?
ImageBackground with overlay. This is exactly it.
[](https://www.npmjs.com/package/react-native-image-overlay)
## Get Started
### Installation
```bash
$ npm install --save react-native-image-overlay
```
### Usage
```javascript
import ImageOverlay from "react-native-image-overlay";
export class MyApp extends Component {
render () {
return (
// For external image
// For local asset
)
}
}
```
## 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.
```javascript
```
Default overlay is color is `#000000` with `0.5` opacity. You can customize it to any color
```javascript
```
### 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.
```javascript
```
The title will be `center`-ed by default. You can move it to the `top` or `bottom` using the `contentPosition` prop
```javascript
```
Additionally, you can change the styling by passing the `titleStyle` along
```javascript
```
### 3. Overlay with child component
You can pass extra components to be displayed on top of your image.
```javascript
Amelia Edwards
Kuala Lumpur, Malaysia
```
> Note: When you are using child component, `title` prop will be ignored.