Maxim Romanov

Sometimes you need to develop a frontend part of a project without a ready-made api, knowing only its structure. In this case, using json-schema-faker, you can generate fake data (mocks) and deploy it to your local server.

Firstly u will need to install json-schema-faker package

yarn add json-schema-faker

Then open the package.json file and add scripts with the following

// ...

"scripts": {

  // ...

  "start-mockapi": "json-server --watch ./mocks/api/db.json --port 3001",

  "generate-mock-data": "node ./generateMockData",

}

After installation, you will need to describe the structure in ./mocks/dataSchema.js of future mocks. You can find more information here.

const schema = {

  reports: {

    type: 'array',

    minItems: 5,

    maxItems: 10,

    items: {

      id: {

        type: 'integer',

        unique: true,

        minimum: 1,

        maximum: 1000,

      },

      title: {

        enum: ['production', 'azure data', 'azure data 2'],

      },

      logo: 'https://picsum.photos/200'

    },

  },

}



module.exports = schema;

Copy paste script for generating mock data from here in ./generateMockData.js and run the following

yarn generate-mock-data && yarn start-mockapi

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;

`;

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) {

    dispatch(actions.removeJwt());

  } else {

    next(action);

  }

};