Maxim Romanov

TILAugust 02, 2019by Maxim Romanov

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(







    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>




const BlurWrapper = Styled(BlurView)`

  position: absolute;

  top: 0;

  left: 0;

  bottom: 0;

  right: 0;


TILJuly 17, 2019by Maxim Romanov

How to handle 401 unauthorized error in a Redux React application

In response to a client request, the server may return a 401 Unauthorized error. You must correctly catch it, for example, clear the state and redirect to the authorization page. To solve this problem, we wrote a custom Middleware which, in our opinion, is the best solution.

import * as actions from 'actions';

const authInterceptor = ({ dispatch }) => (next) => (action) => {

  if (action.status === 401) {


  } else {