NavigationBar

NavigationBar component is Node for Navigator React Native component. It provides a simpler way to use 3-column Navigation bar without reinventing the wheel.

Navbar / Solid

JSX Declaration

<NavigationBar
  centerComponent={<Title>TITLE</Title>}
/>

Navbar / Clear (Solid color)

JSX Declaration

<NavigationBar
  styleName="clear"
  centerComponent={<Title>TITLE</Title>}
/>

Navbar / Clear (Image)

JSX Declaration

<Image
  source={{uri: 'https://myark.github.io/shoutem-cn/img/ui-toolkit/examples/image-3.png'}}
>
  <NavigationBar
    styleName="clear"
    centerComponent={<Title>TITLE</Title>}
  />
</Image>

Navbar/ Fade (Gradient overlay + Solid color)

JSX Declaration

<NavigationBar
  styleName="fade clear"
  centerComponent={<Title>TITLE</Title>}
/>

Navbar/ Fade (Gradient overlay + Image)

JSX Declaration

<Image
  source={{uri: 'https://myark.github.io/shoutem-cn/img/ui-toolkit/examples/image-3.png'}}
>
  <NavigationBar
    styleName="fade"
    centerComponent={<Title>TITLE</Title>}
  />
</Image>

Navigation bar variations

Navbar + Drawer

JSX Declaration

<NavigationBar
  leftComponent={<Icon name="sidebar" />}
  centerComponent={<Title>TITLE</Title>}
/>

Navbar + Picker

JSX Declaration

<NavigationBar
  leftComponent={<Icon name="sidebar" />}
  centerComponent={<Title>TITLE</Title>}
  rightComponent={<DropDownMenu
    options={[
    { name: 'All', value: 1 },
    { name: 'Sport', value: 1 },
    { name: 'World', value: 1 },
    { name: 'Lifestyle', value: 1 },
    { name: 'Food', value: 1 },
    { name: 'Music', value: 1 },
    { name: 'Movies', value: 1 },
    { name: 'Tech', value: 1 },
    { name: 'Fun', value: 1 },
    { name: 'Fashion', value: 1 },
    ]}
    titleProperty="name"
    valueProperty="value"
  />}
/>

Navbar + Action

JSX Declaration

<NavigationBar
  leftComponent={<Icon name="sidebar" />}
  centerComponent={<Title>TITLE</Title>}
  rightComponent={(
  <Button styleName="clear">
    <Text>List</Text>
  </Button>
)}
/>

Navbar + Icon

JSX Declaration

<NavigationBar
  leftComponent={<Icon name="sidebar" />}
  centerComponent={<Title>TITLE</Title>}
  rightComponent={(
    <Button>
      <Icon name="cart" />
    </Button>
  )}
/>

Navbar (Sublevel) + Icon

JSX Declaration

<NavigationBar
  hasHistory
  title="TITLE"
  share={{
    link: 'https://myark.github.io/shoutem-cn',
    text: 'This is the best',
    title: 'Super cool UI Toolkit',
  }}
/>

Navbar (Sublevel) + Action (no border)

JSX Declaration

<NavigationBar
  styleName="no-border"
  hasHistory
  title="TITLE"
  share={{
    link: 'https://myark.github.io/shoutem-cn',
    text: 'This is the best',
    title: 'Super cool UI Toolkit',
  }}
/>

Navbar (Sublevel) + Action

JSX Declaration

<NavigationBar
  hasHistory
  title="TITLE"
  rightComponent={(
    <Button styleName="clear">
      <Text>Report</Text>
    </Button>
  )}
/>

Navbar (Modal) + Icon

JSX Declaration

<NavigationBar
  leftComponent={(
    <Button>
      <Icon name="close" />
    </Button>
  )}
  title="TITLE"
  share={{
    link: 'https://myark.github.io/shoutem-cn',
    text: 'This is the best',
    title: 'Super cool UI Toolkit',
  }}
/>

Navbar (Modal) + Action

JSX Declaration

<NavigationBar
  leftComponent={(
    <Button>
      <Icon name="close" />
    </Button>
  )}
  title="TITLE"
  rightComponent={(
    <Button styleName="clear">
      <Text>Post</Text>
    </Button>
  )}
/>

Navbar (Modal) + Action 2

JSX Declaration

<NavigationBar
  leftComponent={(
    <Button>
      <Text>Cancel</Text>
    </Button>
  )}
  title="TITLE"
  rightComponent={(
    <Button>
      <Text>Done</Text>
    </Button>
  )}
/>

Navbar (Modal) + Action 2 (disabled)

JSX Declaration

<NavigationBar
  leftComponent={(
    <Button>
      <Text>Cancel</Text>
    </Button>
  )}
  title="TITLE"
  rightComponent={(
    <Button styleName="muted">
      <Text>Done</Text>
    </Button>
  )}
/>

Navbar / On primary color / back + share

JSX Declaration

<NavigationBar
  styleName="clear"
  hasHistory
  title="TITLE"
  share={{
    link: 'https://myark.github.io/shoutem-cn',
    text: 'This is the best',
    title: 'Super cool UI Toolkit',
  }}
/>

Props

• leftComponent : object
  • Prop that represents the left component in NavigationBar (example: back button)
• centerComponent : object
  • Prop that represents the center component in NavigationBar (example: screen title)
• rightComponent : object
  • Prop that represents the right component in NavigationBar (example: dropdown menu button)
• hasHistory : bool
  • If this Prop is set to true, the leftComponent will become a back arrow and will trigger the navigateBack callback
• navigateBack() : function
  • This callback is triggered after tapping the Back button if hasHistory Prop is set to true

Style names

• clear: sets the Text color to white and background colors to transparent
• fade: sets the Text color to white and applies linear gradient to background
• no-boder: removes the bottom border

Style

• container
  • Style prop for View that holds all components within NavigationBar
• componentsContainer
  • Style prop for View container that holds leftComponent, centerComponent and rightComponent objects
• leftComponent
  • Style applied to left Navigation component
• centerComponent
  • Style applied to center Navigation component
• rightComponent
  • Style applied to right Navigation component