text: import React from 'react';
  import { TouchableNativeFeedback, Platform } from "react-native"
  import styled from "styled-components/native";
  
  import { Row } from "./View"
  import { Text } from "./Text"
  import { Image } from "./Image"
  
  export const Button = (props) => {
    const { onPress, title, source, ...style } = props;
    return (
      <ButtonContainer>
        <TouchableNativeFeedback onPress={onPress} background={Platform.OS === 'android' ? TouchableNativeFeedback.SelectableBackground() : ''}>
          <ButtonBackground {...style} >
            {source && <Image source={source} width={20} height={10} marginRight={3} />}
            <ButtonTextLayer {...style}>
              {title}
            </ButtonTextLayer>
          </ButtonBackground>
        </TouchableNativeFeedback>
      </ButtonContainer>)
  }
  
  export const TextButton = styled(Button)`
    paddingLeft:3px;
    paddingRight:3px;
    paddingTop:0;
    paddingBottom:0;
    marginTop:0;
    color: ${props => props.color || props.theme.colorPrimary.main};
    background: transparent;
  `;
  
  export const IconTextButton = styled(Button)`
    paddingLeft:3px;
    paddingRight:3px;
    paddingTop:0;
    paddingBottom:0;
    marginTop:0;
    color: ${props => props.color || props.theme.colorPrimary.main};
    background: transparent;
  `;
  
  /************/
  /* Style */
  /************/
  
  const ButtonContainer = styled.View`
    ${props => props.margin && `margin:${props.margin}`};
    ${props => props.marginTop && `margin-top:${props.marginTop}px`};
    ${props => props.marginRight && `margin-right:${props.marginRight}px`};
    ${props => props.marginBottom && `margin-bottom:${props.marginBottom}px`};
    ${props => props.marginLeft && `margin-left:${props.marginLeft}px`};
  
    ${props => props.height && `height:${props.height}px`};
    ${props => props.width && `width:${props.width}px`};
  
    border-radius: ${props => props.theme.Radius.regular}px;
    background: transparent;
    overflow:hidden;
    padding: 0;
  `;
  
  const ButtonBackground = styled(Row)`
    background: ${props => props.background || props.theme.colorSecondary.main};
    justify-content:${props => props.justifyContent || "center"};
    align-items:${props => props.alignItems || "center"};
    flex-direction: row;
    align-self:stretch;
    padding: 0;
    margin:0;
  `;
  
  const ButtonTextLayer = styled(Text)`
    ${props => props.textAlignVertical && `text-align-vertical:${props.textAlignVertical}`};
    ${props => props.textAlign && `text-align:${props.textAlign}`};
  
    color: ${props => props.color || props.theme.colorCommon.white};  
    font-family: ${props => props.theme.fontFamily.SemiBold.Type};
    font-weight: ${props => props.theme.fontFamily.SemiBold.Weight};
    font-Size: ${props => props.theme.fontSize.body}px;
    line-height: ${props => props.theme.lineHeight.body}px;
    padding:10px;
  `;