styledcomponents.jsx

const View = styled.View`
  padding-top: ${({ top }) => (top || 5)}px;
  padding-bottom: ${({ bottom }) => (bottom || 5)}px;
  padding-right: ${({ right }) => (right || 5)}px;
  padding-left: ${({ left}) => (left || 5)}px;
  background-color: ${props => props.transparent ? 'black' : '#ffffff'};
  margin-right: 0px;
  margin-left: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
`;

const Box = styled.View`
  ${props => props.size && `min-height: ${props.size}px;`}
  padding-top: ${({ top }) => (top || 10)}px;
  padding-bottom: ${({ bottom }) => (bottom || 10)}px;
  padding-right: ${({ right }) => (right || 10)}px;
  padding-left: ${({ left}) => (left || 10)}px;
`;

render() {
  return (
      <View left={10} transparent>
        <Box size={200}>
          <Text>This is a test message</Text>
        </Box>
      </View>
    );
}