loading...
JetRockets

How to blur a screen in React Navigation

faleot profile image Maxim Romanov Originally published at jetrockets.pro ・1 min read

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

Posted on by:

JetRockets

JetRockets is a technology consulting firm that architects, designs, develops and supports enterprise-level web, mobile and software platforms helping clients achieve their goals and grow their businesses.

Discussion

markdown guide