Skip to content

Instantly share code, notes, and snippets.

@isbaek
Created March 7, 2017 17:52
Show Gist options
  • Save isbaek/1f7b73a82063e8831bdde5f37f16c57d to your computer and use it in GitHub Desktop.
Save isbaek/1f7b73a82063e8831bdde5f37f16c57d to your computer and use it in GitHub Desktop.

Revisions

  1. isbaek created this gist Mar 7, 2017.
    36 changes: 36 additions & 0 deletions gistfile1.txt
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,36 @@
    function EventTypeIcon(props) {
    var bgColor = props.color;
    var textColor = "#fff";
    if(props.inverted) {
    bgColor = "#fff";
    textColor = props.color;
    }

    return <Icon.Button
    {...props}
    name={props.icon}
    color={bgColor}
    iconStyle={[styles.EventTypeIcon, {backgroundColor: bgColor, color: textColor}]}
    backgroundColor={textColor}
    borderRadius={50}><Text style={styles.iconText}>{props.text}</Text></Icon.Button>;
    }

    const styles = EStyleSheet.create({
    '@media (max-width: 350)': {
    EventTypeIcon: {
    backgroundColor: "#fff",
    color: "#333",
    borderRadius: 15,
    padding: '0.5rem',
    fontSize: '0.75rem',
    width: '1.7rem',
    height: '1.7rem',
    textAlign: "center",
    overflow: 'hidden',
    },
    iconText: {
    fontSize: '0.75rem',
    color: textColor,
    }
    },
    })