Buttons

Buttons are styled TouchableOpacities.

Button / Text only / Light

JSX Declaration

<Button>
  <Text>CHECK IN HERE</Text>
</Button>

Button / Text only / Dark

JSX Declaration

<Button styleName="dark">
  <Text>CHECK IN HERE</Text>
</Button>

Button / Icon + Text / Light

JSX Declaration

<Button>
  <Icon name="add-event" />
  <Text>ADD TO CALENDAR</Text>
</Button>

Button / Icon + Text / Dark

JSX Declaration

<Button styleName="dark">
  <Icon name="add-event" />
  <Text>ADD TO CALENDAR</Text>
</Button>

Button / Fixed size

JSX Declaration

<View styleName="horizontal flexible">
  <Button styleName="confirmation">
    <Text>REMOVE</Text>
  </Button>

  <Button styleName="confirmation dark">
    <Text>UPDATE</Text>
  </Button>
</View>

Button / Full width

JSX Declaration

<Button styleName="full-width">
  <Text>SEE ALL COMMENTS</Text>
</Button>

Button / Navbar

JSX Declaration

<Button styleName="clear">
  <Icon name="add-to-favorites-full" />
</Button>

Button / Vertical / Icon + Text

JSX Declaration

<Button styleName="stacked clear">
  <Icon name="tweet" />
  <Text>Text description</Text>
</Button>

Button / Full width - Normal

JSX Declaration

<View styleName="horizontal flexible">
  <Button styleName="full-width muted">
    <Icon name="add-to-favorites-full" />
    <Text>LIKE</Text>
  </Button>
  <Button styleName="full-width muted">
    <Icon name="comment-full" />
    <Text>COMMENT</Text>
  </Button>
</View>

Button / Full width - Active (Feed)

JSX Declaration

<View styleName="horizontal flexible">
  <Button styleName="full-width">
    <Icon name="add-to-favorites-full" />
    <Text>LIKE</Text>
  </Button>
  <Button styleName="full-width">
    <Icon name="comment-full" />
    <Text>COMMENT</Text>
  </Button>
</View>

Props

• All Buttons have the same Props as React Native’s TouchableOpacity component has

Style names

• tight: removes the right margin from Icon and Text within Button
• clear: removes the border around Button and sets backgroundColor to Clear color as defined in Theme
• dark: sets the text color to Light as defined in Theme, and background color to Darker as defined in Theme
• muted: sets the opacity of the Icon and Text components within Buttonto 50%
• confirmation: sets the border around Button and applies a medium margin around
• full-width: Button stretches to full width of the container
• border: applies Border color as defined in Theme
• stacked: vertically stacks Icon and Text within Button