NavigationBar

Shoutem UI toolkit contains two different NavigationBar components:

1) Simple 3-column NavigationBar that can be used on any screen or Modal window

2) Redux and stack-based NavigationBar enables any view to act as a navigation view using reducers to manipulate state at a top-level object. Can be used only on components that are within the stack (i.e. it cannot be used on Modal window). Internally, it relies on NavigationExperimental from react-native-navigation-experimental-compat.

Simple NavigationBar

Import

import { NavigationBar } from '@shoutem/ui'

NavigationBar is node for Navigator React Native component. It provides a simpler way to use 3-column navigation bar.

API

Props

• title: string
  • Sets the centerComponent prop to a Title component with the provided string as the title text
• centerComponent: object
  • Represents the center component in NavigationBar (e.g. screen title)
• leftComponent: object
  • Represents the left component in NavigationBar (e.g. back button)
• rightComponent: object
  • Represents the right component in NavigationBar (e.g. drop-down menu button)
• hasHistory: bool
  • If set to true, the leftComponent will become a back arrow which triggers navigateBack on tap
• navigateBack: function
  • Callback triggered after tapping the Back button if hasHistory is set to true

Style names

• clear: sets the Text color to white and background colors to transparent
• inline: forces relative positioning of NavigationBar component, allowing component to be used inline with other components, i.e. ListView, without its content overlapping NavigationBar
• no-border: removes the bottom border

Style

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

Examples

Solid

JSX Declaration

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

Showing Background Image

JSX Declaration

<ImageBackground
  source={{uri: 'https://shoutem.github.io/img/ui-toolkit/examples/image-3.png'}}
  style={{ width: 375, height: 70 }}
>
  <NavigationBar
    styleName="clear"
    centerComponent={<Title>TITLE</Title>}
  />
</ImageBackground>

Navbar + Drawer

JSX Declaration

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

Navbar + Picker

JSX Declaration

constructor(props){
  super(props);
  this.state = {
    filters: [
      { name: 'Filter', value: 'Filter' },
      { name: 'Sport', value: 'Sport' },
      { name: 'Food', value: 'Food' },
    ],
  }
}

render() {
  return (
    <NavigationBar
      styleName="inline"

      leftComponent={
        <Button>
          <Icon name="sidebar" />
        </Button>
      }
      centerComponent={
        <Title>
          {this.state.selectedFilter
            ? this.state.selectedFilter.value
            : this.state.filters[0].value}
        </Title>
      }
      rightComponent={
        <DropDownMenu
          options={this.state.filters}
          selectedOption={this.state.selectedFilter ? this.state.selectedFilter : this.state.filters[0]}
          onOptionSelected={(filter) => this.setState({ selectedFilter: filter })}
          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 Button

JSX Declaration

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

Navbar (Sublevel) + Icon

JSX Declaration

<NavigationBar
  hasHistory
  centerComponent={<Title>TITLE</Title>}
  share={{
    link: 'http://shoutem.github.io',
    text: 'This is the best',
    title: 'Super cool UI Toolkit',
  }}
/>

Navbar (Sublevel) + Action (no border)

JSX Declaration

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

Navbar (Sublevel) + Action

JSX Declaration

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

Navbar (Modal) + Share Button

JSX Declaration

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

Navbar (Modal) + Action

JSX Declaration

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

Navbar (Modal) + Action 2

JSX Declaration

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

Navbar (Modal) + Action 2 (disabled)

JSX Declaration

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

Navbar (Sublevel) + Share + Showing Background Color

JSX Declaration

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

Redux and stack-based NavigationBar with CardStack

Import

import { NavigationBar } from '@shoutem/ui/navigation'

This NavigationBar and CardStack components provide simpler API for navigation between Screens (scenes) with respect to its underlying Redux-based NavigationExperimental React Native component.

NavigationBar

API

Props

• renderLeftComponent: function
  • Function that should return components representing left component in NavigationBar (example: back button)
  • Note that outermost component returned by this function should be View that has container styleName and virtual prop
• renderRightComponent: function
  • Function that should return components representing right component in NavigationBar (example: drop-down menu button)
  • Note that outermost component returned by this function should be View that has container styleName and virtual prop
• onNavigateBack: function
  • This callback is triggered after tapping the Back button if hasHistory Prop is set to true
• renderTitleComponent: function
  • Function that should return components representing center/title component, allowing you to override the default title component/prop in NavigationBar
  • Note that outermost component returned by this function should be View that has container styleName and virtual prop
• title: string
  • Prop that defines screen title

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-border: removes the bottom border

Style

• centerComponent
  • Style applied to center Navigation component
• 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
• rightComponent
  • Style applied to right Navigation component

CardStack

API

Props

• navigationState: object
  • Object containing current navigation state (stack)
• onNavigateBack: function
  • This callback is triggered after tapping the Back button (usually in leftComponent)
• renderNavBar: function
  • Function that should return components representing actual NavigationBar View (container)
• renderScene: function
  • Function that should return/render Screen (scene) depending on stack content (current topmost route)

Style names

• None

Style

• None

Example

In order to use this NavigationBar component, you will need to initialize CardStack as root component of your application and define base NavigationBar.View which will hold actual NavigationBar according to provided props.

JSX Declaration

class App extends Component {
  static propTypes = {
    onNavigateBack: React.PropTypes.func.isRequired,
    navigationState: React.PropTypes.object,
    scene: React.PropTypes.object,
  };

  constructor(props) {
    super(props);

    this.renderNavBar = this.renderNavBar.bind(this);
    this.renderScene = this.renderScene.bind(this);
  }

  renderScene(props) {
    const { route } = props.scene;

    let Screen = route.key === 'RestaurantDetails' ? RestaurantDetails : RestaurantsList;
    return (<Screen {...route.props} />);
  }

  renderNavBar(props) {
    const { onNavigateBack } = this.props;

    return (
      <NavigationBar.View
        {...props}
        onNavigateBack={onNavigateBack}
      />
    );
  }

  render() {
    const { navigationState, onNavigateBack } = this.props;

    return (
      <CardStack
        navigationState={navigationState}
        onNavigateBack={onNavigateBack}
        renderNavBar={this.renderNavBar}
        renderScene={this.renderScene}
      />
    );
  }
}

Also, on each screen where you want to have NavigationBar, you’ll need to define it as every other component.

<NavigationBar
  title="title goes here"
  styleName="clear"
/>

Note that example above is just a part of required code. For a full example, refer to RestaurantApp example, where App is root application component holding code above.