Skip to content

Can't make Toolbar work together with BottomNavigation or MaterielTopTabs #346

@neo7-studio-web

Description

@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) :
expected

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions