How to add Backdrop - Example code?

[mastermoo]

How to add Backdrop - Example code?

[ranjithkumar8352]

I tried a different approach instead of using react-native-blur library. I wrote a simple component with absolute positioning, black background, opacity tweaks and used it as backdrop.

Component :

import React,{Component} from 'react';
import {View,Dimensions} from 'react-native';
export default class BlurComponent extends Component {
    render(){
        width = Dimensions.get('window').width;
        height = Dimensions.get('window').height;
        return (
            <View style={{position:'absolute',top:0,left:0,height:height,width:width,backgroundColor:'black',opacity:0.7}}></View>
        )
    }
}

and reference it in backdrop prop

<ActionButton backdrop={<BlurComponent />}>

I felt React Native Blur library was too much for this simple use case. Let me know if there are any issues with this approach.

[Sonukr]

@ranjithkumar8352 : You can try their default props bgColor .

<ActionButton buttonColor="red" bgColor="rgba(0,0,0,.4)" >
    <ActionButton.Item buttonColor='#fff'  title="Add Property" >
         <Icon name="md-beer" style={styles.actionButtonIcon} />
    </ActionButton.Item>
</ActionButton>

[mastermoo]

Hey, did you try to give the ActionButton component a prop like this:
<ActionButton backdrop={<VibrancyView blurType="light" style={styles.blur} />}> ...

styles.blur needs to have the width and height of the device in order to blur the background.

Hey,

thanks for that fast Tipp. Now i do not get any Message, BUT instead of having the blurred look, i only see a red border around my complete screen, when clicking the ActionButton.

Any Idea, how that might come.

Nevermind I have the Solution :) THANKS SUPER GREAT ANSWER 👍

[nirshubz]

@alexanderniebuhr Can you share your solution please? :) I am getting the same red border...

[mastermoo]

I think he forgot to link the library (react-native-blur) to his project, if I remember correctly

[nirshubz]

For some reason I am still getting Native component for "VibrancyView" does not exist after using rnpm link, but I ll look into it.

Thanks very much!

[ranjithkumar8352]

Thanks @Sonukr I think this prop was added recently