DEV Community

Maxim Romanov
Maxim Romanov

Posted on • Updated on • Originally published at jetrockets.pro

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,
  },
);


Enter fullscreen mode Exit fullscreen mode

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;
`;


Enter fullscreen mode Exit fullscreen mode

Top comments (0)