A RN module

Separator.js

import React from "react";
import styled, { ThemeProvider } from "styled-components";
import config from "../../config";

const Background = styled.View`
  width: ${props => props.width}px;
  height: ${props => props.height}px;
  background-color: ${props => props.background};
  justify-content: flex-end;
`;

const Label = styled.Text`
  margin-left: ${props => props.theme.position.listItem.leftRightPadding};
  margin-bottom: 5px;
  font-size: ${props => props.theme.fontSize.separator};
  font-weight: 600;
  color: ${props => props.theme.palette.text.secondary};
`;

export default ({
  children,
  background = "transparent",
  width = 0,
  height = 35,
  toUpperCase = true,
}) => (
  <ThemeProvider theme={config.getTheme()}>
    <Background background={background} height={height} width={width}>
      {children && <Label>{toUpperCase ? children.toUpperCase() : children}</Label>}
    </Background>
  </ThemeProvider>
);