Bottom navigation stuck at the top

[JakeHadley]

What kind of Issue is this?

Question / Problem

This might be a little premature, but I'm going through the walkthrough of rendering a bottom tab navigator, and it's stuck at the top of the screen? I didn't see any styling on the code given as an example. So I feel like it's simple that I'm missing. Or is there actually a problem?

Screenshot for reference, code below:

Here's my code: Navigation.js

import React from 'react';
import BottomNavigation, { FullTab } from 'react-native-material-bottom-navigation';
import { View, Text } from 'react-native';

const tabs = [
  {
    key: 'games',
    icon: 'gamepad-variant',
    label: 'Games',
    barColor: '#388E3C',
    pressColor: 'rgba(255, 255, 255, 0.16)'
  },
  {
    key: 'movies-tv',
    icon: 'movie',
    label: 'Movies & TV',
    barColor: '#B71C1C',
    pressColor: 'rgba(255, 255, 255, 0.16)'
  },
  {
    key: 'music',
    icon: 'music-note',
    label: 'Music',
    barColor: '#E64A19',
    pressColor: 'rgba(255, 255, 255, 0.16)'
  }
];

const renderIcon = ({ isActive }) => (
  <View>
    <Text>Hello</Text>
  </View>
);

const renderTab = ({ tab, isActive }) => (
  <FullTab
    key={tab.key}
    isActive={isActive}
    label={tab.label}
    renderIcon={renderIcon}
  />
);

export const Navigation = () => (
  <View>
    <BottomNavigation
      renderTab={renderTab}
      tabs={tabs}
    />
  </View>
);

App.js

import React, { Component } from 'react';
import { Navigation } from './Navigation';

class App extends Component {
  render() {
    return (
      <Navigation />
    );
  }
}

export default App;

[JakeHadley]

As a follow up, I copied and pasted your code right into my editor and got the same result.

[timomeh]

The example in the readme should reproduce the bottom navigation at the bottom.

    <View style={{ flex: 1 }}>
        <View style={{ flex: 1 }}>
          {/* Your screen contents depending on current tab. */}
        </View>
        <BottomNavigation
          onTabPress={newTab => this.setState({ activeTab: newTab.key })}
          renderTab={this.renderTab}
          tabs={this.tabs}
        />
      </View>

The outer view with flex: 1 will cause the view to fill the entire screen. The inner view with flex: 1 will cause the view to fill everything except the height of the bottom navigation, leaving it at the bottom.

Alternatively you can position it absolute at the bottom.

[JakeHadley]

Ok great. I didn't see that on the root readme. I was looking at this one here that might need to be updated then. It wasn't very clear that flex needed to be applied there, although it does make sense (noob user here). I guess I have to play around with it still. The playground example either doesn't like me or it's not working, in that when you run it, it says that the sdk is out of date or something like that. I can't remember because I ran it the other night, but I thought it would be worth mentioning if other people have tried it unsuccessfully and haven't said anything.

[timomeh]

Positioning the Bottom Navigation should work similar to positioning of other React Native Views. It doesn't position itself by default on the bottom, to make it more flexible and configurable. Since this is not an issue with the Library, I'm going to close this.