Non-tech founder’s guide to choosing the right software development partner Download Ebook
Home>Blog>How to blur a screen in react navigation

How to blur a screen in React Navigation

Screens overlap each other in stackNavigator. React Navigation provides us not only with changing the background color of these screens, but also controlling their transparency.

To make the screen background blur, we first need to make the screens transparent.


import { createStackNavigator } from 'react-navigation';



export default createStackNavigator(

  {

    HomeStack,

    BlurModal,

  },

  {

    ...NAVIGATOR_CONFIG,

    mode: 'modal',

    cardStyle: { opacity: 1 },

    transparentCard: true,

  },

);

And then use blurView as background.


import React from 'react';

import { BlurView } from '@react-native-community/blur';

import Styled from 'styled-components';



function BlurModal() {

  return (

    <BlurWrapper blurType="light" blurAmount={20}>

      <Text>Modal with blur background</Text>

    </BlurWrapper>

  );

}



const BlurWrapper = Styled(BlurView)`

  position: absolute;

  top: 0;

  left: 0;

  bottom: 0;

  right: 0;

`;

Discover More Reads

Recent Projects

We take pride in creating applications that drive growth and evolution, from niche startups to international companies.

Do you have a tech idea?

Let’s talk!

By submitting this form, you agree with JetRockets’ Privacy Policy

If you prefer email, write to us at hello@jetrockets.com