WebView works with react-native-router-flux NavBar but not with shoutem/ui NavigationBar

Question

When I try to use a custom NavigationBar with a WebView my NavigationBar's back button isn't clickable/pressable

Router.js

  render() {
    return (
      <Router
        hideNavBar={true}
      >
        <Scene key='root' passProps={true}>
          <Scene
            key='Posts'
            title='Posts'
            component={PostList}
            passProps={true}
            initial={true}
          />
          <Scene
            key='Random'
            title='Random'
            component={Random}
            passProps={true}
            style={{paddingTop: 70}}
          />
          <Scene
            key='Login'
            title='Login'
            component={Login}
            passProps={true}
            style={{paddingTop: 70}}
          />
          <Scene
            key='Post'
            title='Post'
            component={Post}
            passProps={true}
          />
        </Scene>
      </Router>
    );
  }

Post.js

import {
  NavigationBar,
  Title,
} from '@shoutem/ui'

class Post extends Component {
  render() {
    console.log(this.props.uri)
    return (
      <View
        style={styles.main}
      >
        <NavigationBar
          centerComponent={<Title>{this.props.title}</Title>}
          hasHistory
        />
        <WebView
          source={{uri: this.props.uri}}
          style={styles.webView}
        />
      </View>
    )
  }
}

However, if I remove the WebView and only render the NavigationBar in Post.js the back button is clickable. If I remove the custom NavigationBar from Post.js and use the default router in Router.js the back button is clickable and the WebView is visible.

Answer 1

I got it to work by passing a custom component as the navBar prop in Router.js

Router.js

import TopNav from '../components/TopNav.js'

class AppRouter extends Component {
  render() {
    return (
      <Router
        navBar={TopNav}
      >
      ...
      </Router>
    )
    ...

TopNav.js

import React, { Component } from 'react'
import { StyleSheet } from 'react-native'
import {
  Actions,
  ActionConst,
} from 'react-native-router-flux'

import {
  NavigationBar,
  Title,
} from '@shoutem/ui'

import DrawerSwitch from '../components/DrawerSwitch.js'

export default class CustomNav extends Component {
  render(){
    return (
      this.props.hasHistory ?

      <NavigationBar
        hasHistory
        navigateBack={Actions.pop}
        centerComponent={<Title>{this.props.title}</Title>}
      /> :
      <NavigationBar
        leftComponent={<DrawerSwitch iconName='sidebar'/>}
        centerComponent={<Title>{this.props.title}</Title>}
      />
    )
  }
}