React-native-paper: Can't make Toolbar work together with BottomNavigation or MaterielTopTabs

[neo7-studio-web]

Current behaviour

Hi,
I'm not able to make a view where I can have a toolbar on the top and BottomNavigation or top material tabs (with react-navigation-tabs). If I put both in a View, tabs (or Bottom Navigation) don't show (no error). If I put only one of them, it works.

Do you have an example working with both Toolbar and MaterialTopTabs ? (or Bottom Navigation)

Expected behaviour

I would like to have the look and feel shown in your showcase example (Showman) :

But with the Toolbar component (with icons on the right, subtitle...)

Code sample

Here is my code in Memberarea.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Toolbar, ToolbarContent, ToolbarAction, Button } from 'react-native-paper';

import TopTabs from './TopTabs.js';

export default class Memberarea extends React.Component {

  render() {
    return (

        <View>
            <Toolbar>
                <ToolbarContent
                  title="Title"
                  subtitle="Subtitle"
                />
                <ToolbarAction icon="search" onPress={this._onSearch} />
                <ToolbarAction icon="more-vert" onPress={this._onMore} />
            </Toolbar>

            <TopTabs />
        </View>

    );
  }

}

And TopTabs.js

import * as React from 'react';
import { View, Text } from 'react-native';
import { createMaterialTopTabNavigator } from 'react-navigation-tabs';

class Album extends React.Component {
  render() {
    return (
      <View>
        <Text>Album</Text>
      </View>
    );
  }
}

class Library extends React.Component {
  render() {
    return (
      <View>
        <Text>Library</Text>
      </View>
    );
  }
}

class History extends React.Component {
  render() {
    return (
      <View>
        <Text>History</Text>
      </View>
    );
  }
}

export default createMaterialTopTabNavigator({
  Album,
  Library,
  History,
});

What have you tried

If there is only the toolbar, it works. BottomNavigation works if it's the only component and TopMaterialTabs works also if it's "alone" in the view.

Your Environment

| software | version
| --------------------- | -------
| android | 5.0.1 (Expo app)
| react-native | 0.55
| react-native-paper | 1.4.1
| node | 8.11.1
| npm | 5.6.0

Working on Windows 10, testing on Expo

[Trancever]

Can you give style { flex: 1 } to this wrapping View in Memberarea component? It should fix the issue. Also I created a snack with working example so you can take a look - snack

[neo7-studio-web]

Nice, it works thank you !
Actually I also managed to display it using a StackNavigator with Toolbar as custom header.