Templates

Główny kontener odpowiednio pozycjonuje całą treść, uwzględniając "Safe Area" na iOS.

MainTemplate.js

import React from 'react';
import { Wrapper } from './MainTemplate.styles';

const MainTemplate = ({ children }) => {
  return <Wrapper>{children}</Wrapper>;
};

export default MainTemplate;

MainTemplate.styles.js

import styled from 'styled-components';

export const Wrapper = styled.div`
  position: relative;
  width: 100%;
  height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
`;