React Native Blur Background Image dynamically using Slider Component

This tutorial explains how to display blur background image dynamically using slider component in react native application. In our previous tutorial we have explained about slider layout design and their component uses in react native application. If you aren't remember then you can follow the below example :

• React Native Slider Example

React Native Blur Background Image Example :

In this example we are going to create blur background image using slider component. Using Slider component we will change the blur radius of an Image dynamically. As the slider button will drag, the blur ratio of an image is increased or decreased respectively. Lets see the below source that help you to build more understanding :

Step 1: Create a new react native project, if you don’t know how to create a new project in react native just follow this tutorial.

Step 2: Open App.js File in your favorite code editor and erase all code and follow this tutorial.

Step 3: Through react , react-native  packages import all required components.

import React, { Component } from 'react';
import { AppRegistry, Text, View, StyleSheet, Image } from 'react-native';
import Slider from '@react-native-community/slider';

Step 4: Lets create constructor block inside your App component.

constructor() {
    super();

    this.state = { value: 0 }
  }

Step 5: Implement render method inside the App class and wrapped the below layout design inside the root View component. React native Image component provides a parameter named as blurRadius  which takes a numeric value and this parameter is responsible to make an image blur. If you increase the blurRadius’ value then the blur ratio of image also increased.

render() {
    return (
      <View style={[styles.container, { backgroundColor: this.state.ColorHolder }]} >

        <Image blurRadius={this.state.value} source={{ uri: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcunacShKl3GH9biA90K7ennTWzaRqmRs4qhk_BxQcX7DJYgG0A9nxgVa4NuAXPtOafm6Lsaq867ci3Hj8upolBNoyRBS315b5vAMH4Ilcribo2TnB4P_9gQfFh8fm4Tz0KCn8S5lPTHYT/s400/js.jpg' }} style={styles.blurImage} />
       
       <View style={styles.ChildImageholder}>

          <View style={styles.transparentView}>
            <Text style={styles.textDecoration}>Blur Radius: {this.state.value}</Text>
            <Slider style={{ width: '100%' }}
              step={1}
              maximumValue={10}
              minimumValue={0}
              onValueChange={(value) => this.setState({ value: value })}
              minimumTrackTintColor="white" />
          </View>

        </View>

      </View>
    );
  }

Step 6 : Apply the below style sheet design. 

const styles = StyleSheet.create(
  {
    container: {
      flex: 1,
      justifyContent: "center",
     
    },
    blurImage: {
      position: 'absolute',
      top: 0,
      bottom: 0,
      left: 0,
      right: 0,
      resizeMode: 'contain'
    },
    ChildImageholder: {
      flex: 1,
      justifyContent: 'flex-end',
      alignItems: 'center'
    },
    transparentView: {
      alignSelf: 'stretch',
      padding: 10,
      backgroundColor: 'rgba(0,0,0,0.7)',
      alignItems: 'center'
    },
    textDecoration:  {
      color: 'white',
      fontSize: 18
    }
    
  });

Complete Source Code for App.js 

Lets see the complete source code that helps to display blur background image dynamically using slider component in react native application.

import React, { Component } from 'react';
import { AppRegistry, Text, View, StyleSheet, Image } from 'react-native';
import Slider from '@react-native-community/slider';

export default class App extends Component {

  constructor() {
    super();

    this.state = { value: 0 }
  }

  render() {
    return (
      <View style={[styles.container, { backgroundColor: this.state.ColorHolder }]} >

        <Image blurRadius={this.state.value} source={{ uri: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcunacShKl3GH9biA90K7ennTWzaRqmRs4qhk_BxQcX7DJYgG0A9nxgVa4NuAXPtOafm6Lsaq867ci3Hj8upolBNoyRBS315b5vAMH4Ilcribo2TnB4P_9gQfFh8fm4Tz0KCn8S5lPTHYT/s400/js.jpg' }} style={styles.blurImage} />
       
       <View style={styles.ChildImageholder}>

          <View style={styles.transparentView}>
            <Text style={styles.textDecoration}>Blur Radius: {this.state.value}</Text>
            <Slider style={{ width: '100%' }}
              step={1}
              maximumValue={10}
              minimumValue={0}
              onValueChange={(value) => this.setState({ value: value })}
              minimumTrackTintColor="white" />
          </View>

        </View>

      </View>
    );
  }
}

const styles = StyleSheet.create(
  {
    container: {
      flex: 1,
      justifyContent: "center",
     
    },
    blurImage: {
      position: 'absolute',
      top: 0,
      bottom: 0,
      left: 0,
      right: 0,
      resizeMode: 'contain'
    },
    ChildImageholder: {
      flex: 1,
      justifyContent: 'flex-end',
      alignItems: 'center'
    },
    transparentView: {
      alignSelf: 'stretch',
      padding: 10,
      backgroundColor: 'rgba(0,0,0,0.7)',
      alignItems: 'center'
    },
    textDecoration:  {
      color: 'white',
      fontSize: 18
    }
    
  });

Screenshot :

This is all about displaying blur background image dynamically using slider component in react native application. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.