React-native-blur: BlurView inside a Modal with animationType='fade'

[breadadams]

BlurView works great in a Modal with animationType='slide', however if you use fade, there's a small pause before the background content is blurred. Any ideas?

[JonathanWi]

Same problem here also, although it's more a flickering before rendering the blurred content than a small pause for me

[breadadams]

Yeah, I guess I just phrased it wrong @JonathanWi, but that's basically what I see.

I launch my modal and it fades in, and say 1/2 a second later the content behind blurs. On closing modal however it does transition correctly (ie. there's no lag there).

[breadadams]

Nothing explains it better than a gif 😸 .

With animationType='fade'(didn't quite get the looping right here heh):

With animationType='slide':

And here's the component I've used for testing, just for reference:

'use strict'
import React, { Component } from 'react'
import {
    View,
    Modal,
    Text,
    TouchableOpacity,
    StyleSheet,
    Image,
    StatusBar
} from 'react-native'

import {BlurView} from 'react-native-blur'

export default class BlurTest extends Component {

    constructor(props) {
        super(props)

        this.state = {
            modalVisible: false,
        }
    }

    launchModal(bool) {
        this.setState({modalVisible: bool})
    }

    render() {
        return(
            <View style={styles.mainWrap}>

                <StatusBar
                    barStyle='default'/>

                <View
                    style={styles.contentWrap}>
                    <Image
                      style={{width: 50, height: 50}}
                      source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
                    />
                    <Text>{`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum facilisis arcu vitae odio volutpat, non efficitur metus congue. Donec porttitor eu nibh a viverra. Vestibulum efficitur ex eu enim elementum, feugiat vulputate turpis efficitur. Suspendisse id enim tempor, malesuada velit eget, ultrices nunc. Suspendisse lorem velit, maximus a sem et, consectetur aliquam ligula. Morbi mauris justo, faucibus sit amet iaculis at, finibus non erat. Suspendisse aliquet augue ex, at efficitur purus tincidunt sit amet. Vestibulum faucibus leo eget odio eleifend, ut facilisis eros euismod. Duis sit amet est felis. Fusce ullamcorper diam et urna facilisis, imperdiet dignissim arcu sagittis. Integer sed lacus tortor. Ut vel mauris vitae magna consectetur suscipit sit amet at nisi.`}</Text>
                    <TouchableOpacity
                        onPress={() => {this.launchModal(true)}}>
                        <Text>{`Launch modal`}</Text>
                    </TouchableOpacity>
                </View>

                <Modal
                    visible={this.state.modalVisible}
                    transparent={true}
                    animationType='fade'>
                    <BlurView
                        blurType='light'
                        style={styles.contentWrap}>

                        <Image
                          style={{width: 300, height: 150,}}
                          source={{uri: 'http://facebook.github.io/origami/public/images/blog-hero.jpg'}}
                        />

                        <Text>{`This is the modal!`}</Text>

                        <TouchableOpacity
                            onPress={() => {this.launchModal(false)}}>
                            <Text>{`Close modal`}</Text>
                        </TouchableOpacity>

                    </BlurView>

                </Modal>

            </View>
        )
    }
}

const styles = StyleSheet.create({
    mainWrap: {
        flex: 1,
        alignItems: 'stretch',
        justifyContent: 'flex-start',
    },

    contentWrap: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    }
})

[mastermoo]

i have a similar problem with a blurview component. it doesn't work as expected when animating its opacity.

[Kureev]

It works nicely with Animated and LayoutAnimation. Please, consider using one of them.

[isaacnass]

Yeah this is most definitely a valid issue.

[benadamstyles]

I don't understand how people are getting this to work with LayoutAnimation. It doesn’t! You can really clearly tell this if you set slow animations on the iOS simulator. Has anyone really got this to work on iOS?

[zibs]

Alright, I was able to work around this by using https://github.com/oblador/react-native-animatable

I set the modal to just use the animationType='none' setting, since this actually works with the blur view blurring immediately. I then fake the modal fade-in by using the AnimatedBlurView with an animation='fadeIn' property.

render () {
  <Modal
        animationType={'none'}
        transparent
        visible={this.props.visible}
        onRequestClose={() => {
          alert('Modal has been closed.');
        }}>
  <AnimatableBlurView
          useNativeDriver
          animation={'fadeIn'}
          duration={170}
          ref="blurredModal"
          blurType="xlight"
          blurAmount={20}
          style={{ flex: 1}}>

    </AnimatableBlurView>
  </Modal>
}

The problem was I also had to hack the fade-out as well - here I attach a ref to the animated blur view, which I then have a listener for when it should be dismissed.

  onPress={() => {
                this.refs.blurredModal.fadeOut(200).then(endState => {
                  // this method below actually hides the modal immediately, but since we have been fading out for 200ms it looks real.
                  this.props.fadeOutModal();
                });
              }}

Not great, but it worked for what I needed... I tried for a little bit with LayoutAnimation/Animated, and couldn't get it right, so I just went with this for now.

[AndyCrisan]

@zibs can you put a code for the full implementation ? 👍 please 🙏

[rahul120292]

just give background color to modal like backgroundColor:"rgba(0,0,0,0.5)" , to blur background area .. no need to add any librabry to blur

[lsmolic]

@rahul120292 totally did NOT answer this question, but you got me where I wanted so ... enjoy your thumbs up and figurative Reddit Gold ⭐️