Box3.tsx

import React, { FC } from 'react';
import { ViewProps } from 'react-native';
import styled from 'styled-components/native';
import { ThemeInterface } from 'themes/ThemeInterface';

interface IBoxProps extends ViewProps {
  theme: ThemeInterface;
  size?: number;
  borders?: boolean;
  borderThickness?: number;
  roundedCorners?: number;
  backgroundColor?: string;
  backgroundGradientColors?: string[];
  animationSpring?: boolean;
  animationSpringDuration?: number; 
}

const BoxRoot = styled.View<IBoxProps>`
  width: ${props => (props.size ? props.size : 200)};
  height: ${props => (props.size ? props.size : 200)};
  padding: ${props => props.theme.lateralPadding || 10}px;
  background-color: ${props => props.backgroundColor || `transparent`};
`;

interface IInnerBoxProps extends ViewProps {
  theme: ThemeInterface;
  backgroundColor: string;
}

const InnerBox = styled.View<IInnerBoxProps>`
  flex: 1;
  margin: 10px 10px;
  background-color: ${props => props.backgroundColor && props.backgroundColor};
`;

// Main Box Component:
export const Box: FC<IBoxProps> = props => (
  <BoxRoot {...props}>
    <InnerBox>{props.children}</InnerBox>
  </BoxRoot>
);