Transparent overlay in React Native

Question

I'm trying to get a transparent overlay sliding down in an app, pretty much like this here (all/filter-by):

transparent slider

So far I found react-native-slider and react-native-overlay. I modified the slider to work from top to bottom, but it always moves down the ListView as well. If using react-native-overlay, the overlay is static and I can't move it.

I added some demo code from the original react-native tutorial in this gist. When clicking the button, the content should stick, and the menu should overlay. The transparency is not that important right now but would be awesome.

What would be the smartest solution?

I think you can try [this component](https://github.com/xotahal/react-native-pullable-view). I mean you should just set `position: 'absolute'` to view that is pulled down and it could work. — xotahal, Aug 12 '16 at 14:30

score 93 · Accepted Answer · answered Jun 16 '15 at 14:33

The key to your ListView not moving down, is to set the positioning of the overlay to absolute. By doing so, you can set the position and the width/height of the view manually and it doesn't follow the flexbox layout anymore. Check out the following short example. The height of the overlay is fixed to 360, but you can easily animate this or make it dynamic.

'use strict';

var React = require('react-native');
var Dimensions = require('Dimensions');

// We can use this to make the overlay fill the entire width
var { width, height } = Dimensions.get('window');

var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} = React;

var SampleApp = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to the React Native Playground!
        </Text>
        <View style={[styles.overlay, { height: 360}]} />
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  // Flex to fill, position absolute, 
  // Fixed left/top, and the width set to the window width
  overlay: {
    flex: 1,
    position: 'absolute',
    left: 0,
    top: 0,
    opacity: 0.5,
    backgroundColor: 'black',
    width: width
  }  
});

AppRegistry.registerComponent('SampleApp', () => SampleApp);

module.exports = SampleApp;

Thanks! I tried that, but it still moves the list down. Could this be because of the animation and setNativeProps? — Patrick, Jun 16 '15 at 15:36
Figured out why ... the topMenu implementation doesn't move the menu but the content area, that's why it always moved. Trying to re-write it now to use the menu to slide. — Patrick, Jun 17 '15 at 08:27

score 18 · Answer 2 · answered Mar 16 '17 at 07:13

18

import React, { Component } from 'react';
import { Image, StyleSheet, View } from 'react-native';

export default class App extends Component {
  render() {
    return (
      <Image source={{uri: 'http://i.imgur.com/IGlBYaC.jpg'}} style={s.backgroundImage}>
        <View style={s.overlay}/>
      </Image>
    );
  }
}

const s = StyleSheet.create({
  backgroundImage: {
      flex: 1,
      width: null,
      height: null,
  },
  overlay: {
    position: 'absolute',
    top: 0,
    right: 0,
    bottom: 0,
    left: 0,
    backgroundColor: 'red',
    opacity: 0.3
  }
});

Live demo: https://sketch.expo.io/S15Lt3vjg

Source repo: https://github.com/Dorian/sketch-reactive-native-apps

answered Mar 16 '17 at 07:13

Dorian

22,759
8
120
116

This will be deprecated in the future. You're not allowed to add anything inside image anymore. – Marcio Nov 09 '17 at 07:28
@Marcio Do you have a source? – Dorian Nov 10 '17 at 14:25
The message appears since last react native update as a warning message. The fix to this is to start using the new ImageBackground component instead. This makes sense because Images should not have any children either way. – Marcio Nov 13 '17 at 11:21

score 8 · Answer 3 · edited Mar 21 '19 at 03:10

You can use this example for create overlay.You can change state for visible and invisible for overlay.

import React, { Component } from "react";
import { View, Text, StyleSheet } from "react-native";

class Popup extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isPopupTrue: true
    };
  }

  render() {
    return (
      <View style={styles.container}>
      { this.state.isPopupTrue &&
        (<View style={styles.overlay}>
          <View style={styles.popup}>
            <Text style={styles.text}> Overlay </Text>
          </View>
        </View>)
      }
      </View>
    );
  }
}

export const styles = StyleSheet.create({
  container: {
    flex:1,
    backgroundColor: "#c0d6e4"
  },
  overlay: {
    position: "absolute",
    top: 0,
    right: 0,
    bottom: 0,
    left: 0,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "gray",
    opacity: 0.9,
  },
  text: {
    width: "20%",
    fontSize: 15,
    color: "black",
    fontWeight: "bold"
  },
});

score 4 · Answer 4 · answered May 13 '19 at 09:40

I was having same problem I did it this way.

import {View,StyleSheet} from "react-native";
//where you want it to render
 <View style={styles.overlaycontainer}>
      <Text style={{color:"#fff"}}>Locating directions please wait ...</Text>        
 </View> 
// at the bottom of your in styles
const styles = StyleSheet.create({
  overlaycontainer:{
    ...StyleSheet.absoluteFillObject,
    backgroundColor: '#000',
    opacity:0.8,
    justifyContent:"center",
    alignItems:"center" 
  }
});

suther · Answer 5 · 2018-05-09T11:34:40.930

2

Maybe better use ImageBackground-Component.

import {View, ImageBackground, Text} from 'react-native';

const styles = StyleSheet.create({

});
...
<ImageBackground
  style={styles.image}
  source={{uri: props.picture_url}}
>
   <View style={styles.textbox}>
      <Text style={styles.title} >CHILD OF IMAGE_BACKGROUND</Text >
    </View>
 </ImageBackground >
...

edited May 09 '18 at 11:34

answered May 09 '18 at 11:18

suther

12,600
4
62
99

score 1 · Answer 6 · edited Feb 14 '18 at 06:57

Smartest way ??

the smartest way to me is to use Modals from react-native to build a highly customizable responsive experience, you can easily set motion directions of the Modal, set transparency, toggle visibility etc etc, i personally have never user existing npm modules for implementing side drawers or navigation bars, i do this using Modals.
If you wish i can give a sample code snippet which realizes a navigation drawer using Modals

Transparent overlay in React Native

6 Answers6

Linked