Styled components + react native

Button.js

import React from 'react';
import {TouchableOpacity} from 'react-native';
import styled from 'styled-components';
import Text from 'app/src/components/Text';
const Button = styled(TouchableOpacity)`
  width: 100%;
  height: 50px;
  border-radius: 5px;
  background-color: ${({background}) => background};
  border-width: 1;
  border-color: ${({text}) => text};
  align-items: center;
  justify-content: center;
`;

export default ({children, onPress, style, type = 'primary', disabled}) => (
  <Button
    onPress={disabled ? () => {} : onPress}
    style={style}
    background={typeButton(type).background}
    text={typeButton(type).text}>
    <Text weight={'bold'} size={18} color={typeButton(type).text}>
      {children}
    </Text>
  </Button>
);

const typeButton = type => {
  let primary = {
    background: '#2980B9',
    text: '#fff',
  };

  let danger = {
    background: '#E74C3C',
    text: '#fff',
  };

  let outline = {
    background: '#fff',
    text: '#000',
  };

  let black = {
    background: '#2D3436',
    text: '#fff',
  };

  let success = {
    background: '#27AE96',
    text: '#fff',
  };

  switch (type) {
    case 'primary':
      return primary;
    case 'danger':
      return danger;
    case 'outline':
      return outline;
    case 'black':
      return black;
    case 'success':
      return success;
    default: {
      return primary;
    }
  }
};