HOW TO BLUR A BACKGROUND IMAGE IN REACT-NATIVE

This is quite different from my react article because even though both are Facebook technologies and bear the name react, they are not really alike. So lets go ahead and write some magics now, hope your fingertips are ready for some abracadabra.

So lets have some Views and Text but before doing that, we will first import our ImageBackground or Image from react-native like below

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

Then lets go ahead and write the following tags and elements

   <ImageBackground source={require('your picture')}>
      <View>
     <Text> CSS Tricks </Text>

     <Text>You can style your Text and View as you deem fit</Text>
      </View>
   </ImageBackground>

Now, lets import StyleSheet and write the CSS below.

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

   const styles = StyleSheet.create({
    ImageBackground: {
        flex: 1,
        width: null,
        height: null
    },
        container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'rgba( 0, 0, 0, 0.6 )'
    },
   }

You set the backgroundColor of your View using alpha style.That's the trick, if you use opacity on the container, both the texts will be affected.Look at the full code below

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

class Trick extends Component {
    render() {
        return (
            <ImageBackground source={require('your picture')} style={styles.ImageBackground}>
                <View style={styles.container}>
                    <Text style={styles.text}> CSS Tricks </Text>

                    <Text style={styles.text}>You can style your Text and View as you deem fit</Text>
                </View>
            </ImageBackground>
        );
    }
}

export default Trick;

const styles = StyleSheet.create({
    ImageBackground: {
        flex: 1,
        width: null,
        height: null,
    },
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'rgba( 0, 0, 0, 0.6 )',
    },
    text: {
        color: 'white',
        fontSize: 24
    }
});

Different from React right?, hope it solves your problem. Thanks

Blog

HOW TO BLUR A BACKGROUND IMAGE IN REACT-NATIVE

Chimezie Innocent

Join Our Newsletter. No Spam, Only the good stuff.

Related