Styled components Button

Button.js

import React, { Component } from "react";
import { Button as NativeButton } from "native-base";
import Text from "../Text";
import PropTypes from "prop-types";

export default class Button extends Component {
  static propTypes = {
    children: PropTypes.node.isRequired,
    onPress: PropTypes.func
  };

  static defaultProps = {
    onPress: f => f
  };

  handlePress() {
    alert("clicked");
  }

  render() {
    return (
      <NativeButton {...this.props} onPress={this.handlePress}>
        <Text>{this.props.children}</Text>
      </NativeButton>
    );
  }
}

index.js

import React from 'react';
import styled, { withTheme } from 'styled-components';
import Button from './Button';

export default styled(
  withTheme(props => {
    const style = {
      backgroundColor: props.emphasis ? 'red' : 'green',
      ...props.style
    };
    return <Button {...props} style={style} />;
  })
)`
  background-color: ${props => (props.emphasis ? 'red' : 'green')};
`;