3. Single

Structure

The SingleView is the base wrapper of every view, without it you can't view pages.

navigation.start(<SingleView id="home" screen={Home} />);

Styling

You can pass a style for a page, which basically styles the navigationbar/actionbar when the view is used in a stack navigator.

Initial style

When defining your SingleView, when starting the app or for example pushing one to a stack, you can define style like this:

<SingleView id="home" screen={Home} style={{
  title: "Home",
}} />

Colors

To be able to use colors, you need to process them first:

import { processColor } from 'react-native';
<SingleView id="home" screen={Home} style={{
  title: "Home",
  barTint: processColor("#F00"),
}} />

Images

To be able to use images, you need to process them first:

import { Image } from 'react-native';
<SingleView id="home" screen={Home} style={{
  title: "Home",
  backButtonImage: Image.resolveAssetResource(require("image.jpg")),
}} />

Options

• barHidden (bool)
  This actually hides the bar. You won't see a title or bar buttons.
• barTransparent (bool)
  This will make the bar transparent and will render your component underneath it. So you can have a nice fullscreen image with a native title and bar buttons.
• barBackground (color)
  This changes the color of the bar.
• title (string)
  This set the title in the bar.
• barTint (color)
  This sets the tint of the bar, meaning the color of the title and barbuttons.
• barFont (string)
  Set a custom font to be used in the title. Only works in combination with barFontSize.
• barFontSize (number)
  Set a custom font to be used in the title. Only works in combination with barFont.
• backButtonTitle (string) ios
  Change the back button from showing the title of the previous page.
• backButtonImage (image)
  Change the back button (arrow) image.
• leftBarButton (object)
  See bar buttons below
• rightBarButtons (array)
  See bar buttons below

Bar buttons

For bar buttons you have two options, setting a text or an icon. Showing an icon is as simple as passing it:

• icon (image)

import { Image } from 'react-native';
<SingleView id="home" screen={Home} style={{
  id: "leftId", // Add a listener with this id to handle presses (see Calls)
  title: "Home",
  leftBarButton: { icon: Image.resolveAssetResource(require("image.jpg")) },
}} />

Showing a title has some more options:

• title (string)
• color (color) optional
• font (string)
  Set a custom font to be used in the title. Only works in combination with fontSize.
• fontSize (number)
  Set a custom font to be used in the title. Only works in combination with font.

import { processColor } from 'react-native';
<SingleView id="home" screen={Home} style={{
  title: "Home",
  rightBarButtons: [{
    id: "rightId", // Add a listener with this id to handle presses (see Calls)
    title: "Profile",
    color: processColor("#F00"),
  }],
}} />

Calls

Calls are navigator type specific, so you should access them that way as well. It doesn't make sense to call 'push' on a tabbar, so these calls are split up.
You can access the navigation via the props:

this.props.single

Because you can nest navigation types, you can also access the navigator by its id (in the example above 'home'):

this.props.home

Modal

You can show a modal view by calling:

this.props.single.showModal(<SingleView id="home" screen={Home} />);

And of course you are not limited to SingleView.

Dismiss

You can dismiss a modal, like this:

this.props.single.dismiss();

This is supposed to be called on the presented view, not the presenting view.

Update style

Most properties you set when initiating the view can be changed:

this.props.single.updateStyle({ title: "New title" });

Add listener

Native buttons will send events. The reason this needs to work through event listeners and not through fat-arrows, is because the buttons are usually set before the page is actually created. Without a reference to the page, you wouldn't be able to do anything useful in your fat-arrow.

Currently only barbuttons send events, this is an example to listen to presses:

this.props.single.addListener("leftId", () => {
  // action
});

Remove listener

You can stop listening for events as well:

this.props.single.removeListener("rightId");