Overlay

Overlay provides a convenient way to place content over Image, through semi-transparent background.

API

Props

Overlay has no specific (custom) Props, however, it supports every prop that the standard React Native View component supports. For full list of available props, visit React Native View component documentation.

Style names

• if style name isn’t given, then the background color (as defined in Theme) is applied below nested content
• fill-parent: sets the Overlay to fully fill the parent container (without any margins, padding etc.)
• rounded-small: sets the Overlay to be rounded, with fixed width and height of 38x38 px

Style

• Supports every Style prop that the standard React Native View component supports

Example

Simple overlay

JSX Declaration

<Screen>
  <NavigationBar
    styleName="inline"
    title="Restaurants"
  />
  <ImageBackground
    styleName="large-banner"
    source=
  >
    <Tile>
      <Overlay styleName="image-overlay">
        <Title styleName="sm-gutter-horizontal">SUSHI ACADEMY</Title>
        <Subtitle>1900 Warner Ave. Unit A Santa Ana, CA</Subtitle>
      </Overlay>
    </Tile>
  </ImageBackground>
</Screen>

Fill-parent image overlay

JSX Declaration

<Screen>
  <NavigationBar
    styleName="inline"
    title="Restaurants"
  />
  <ImageBackground
    styleName="large-banner"
    source=
  >
    <Tile>
      <Overlay styleName="fill-parent image-overlay">
        <Subtitle styleName="sm-gutter-horizontal">GASPAR BRASSERIE</Subtitle>
      </Overlay>
    </Tile>
  </ImageBackground>
</Screen>

Rounded-small overlay

JSX Declaration

constructor(props) {
  super(props);

  this.state = {
    photos:
    [
      { "source": { "uri": "https://shoutem.github.io/static/getting-started/restaurant-1.jpg" } },
      { "source": { "uri": "https://shoutem.github.io/static/getting-started/restaurant-2.jpg" } },
      { "source": { "uri": "https://shoutem.github.io/static/getting-started/restaurant-3.jpg" } }
    ]
  }
}

render() {
  return (
    <Screen>
      <ImageBackground
        source=
        style=
      >
        <NavigationBar
          styleName="inline clear"
          title="EXPLORE"
          rightComponent={
            <Button>
              <Overlay styleName="rounded-small image-overlay">
                <Subtitle styleName="top">Map</Subtitle>
              </Overlay>
            </Button>
          }
        />
      </ImageBackground>
      <View
        styleName="lg-gutter-top"
      >
        <Tile>
          <Image
            styleName="large-wide"
            source=
          />
          <View styleName="content">
            <Title>MAUI BY AIR THE BEST WAY AROUND THE ISLAND</Title>
            <View styleName="horizontal space-between">
              <Caption>1 hour ago</Caption>
              <Caption>15:34</Caption>
            </View>
          </View>
        </Tile>
      </View>
    </Screen>
  );
}