No styling on tab press except 1st tab

[aryaminus]

In pictures: on Profile click, text and style shown but none on other tabs on clicking the tab twice,the text and style is shown Have removed the imports and style sheet. Using react-native-router-flux

App.js:

import React, { Component, PropTypes } from 'react';
import { Router, Scene } from "react-native-router-flux";
class App extends React.Component {
  render() {
    return (
      <Router>
        <Scene key="root" style={{ paddingTop: 64 }}>
          <Scene key="home" component={Home} title="Profile" type="reset" />
          <Scene key="chatmain" component={ChatMain} title="ChatMain" type="reset" />
          <Scene key="chat" component={Chat} title="Chat" />
          <Scene key="friendlist" component={FriendList} title="FriendList" />
          <Scene key="chatF" component={ChatF} title="ChatF" />
          <Scene key="video" component={Video} title="Video" type="reset" />
          <Scene key="medical" component={Medical} title="Medical" type="reset" />
        </Scene>
      </Router>
    );
  }
}
export default App;

Menu.js:

import React from "react";
import {
  StyleSheet,
  Text,
  View,
  StatusBar
} from "react-native";

import BottomNavigation, { Tab } from "react-native-material-bottom-navigation";
import Icon from "react-native-vector-icons/MaterialIcons";
import { Actions } from "react-native-router-flux";

class Menu extends React.Component {
  constructor(props) {
    super(props);
    this.state = { activeTab: this.props.activeTab };
    this.handleTabChange = this.handleTabChange.bind(this);
  }
  handleTabChange(newTabIndex, oldTabIndex) {
    this.setState({ activeTab: newTabIndex });
    if (newTabIndex === oldTabIndex) {
      null;
    }
    if (this.state.activeTab === 0) {
      Actions.home();
    } else if (this.state.activeTab === 1) {
      Actions.chatmain();
    } else if (this.state.activeTab === 2) {
      Actions.video();
    } else {
      Actions.medical();
    }
  }

  render() {
    return (
      <View>
        <BottomNavigation
          activeTab={this.state.activeTab}
          labelColor="white"
          rippleColor="white"
          style={{
            height: 56,
            elevation: 8,
            position: "absolute",
            left: 0,
            bottom: 0,
            right: 0
          }}
          onTabChange={this.handleTabChange}
        >
          <Tab
            barBackgroundColor="#2980b9"
            label="Profile"
            icon={<Icon size={24} color="white" name="fingerprint" />}
          />
          <Tab
            barBackgroundColor="#00796B"
            label="Chat"
            icon={<Icon size={24} color="white" name="chat" />}
          />
          <Tab
            barBackgroundColor="#FF9800"
            label="Therapist"
            icon={<Icon size={24} color="white" name="videocam" />}
          />
          <Tab
            barBackgroundColor="#c0392b"
            label="Medication"
            icon={<Icon size={24} color="white" name="local-hospital" />}
          />
        </BottomNavigation>
      </View>
    );
  }
}
export default Menu;

Video.js:

import React from "react";
import { Actions } from "react-native-router-flux";
import Menu from "../Menu";

class Video extends React.Component {
  state = {
    name: ""
  };
  static navigationOptions = {
    headerStyle: {
      backgroundColor: "#FF9800",
      elevation: null
    }
  };
  render() {
    return (
      <View style={styles.containerl}>
        <StatusBar barStyle="light-content" backgroundColor="#FF9800" />
        <Menu activeTab="2" />
      </View>
    );
  }
}
export default Video;

[timomeh]

Sorry, I didn't quite understand the issue you're having. Could you please explain what should happen, but what's really happening? Thanks.

[aryaminus]

I have added the 3rd image. When i press "Video" tab in 1st screen, I want to transfer to 3rd screen but am going to 2nd screen with no styling in navbar but on preessing "Video" tab again, the "Therapist" is shown with styling

[timomeh]

I see you're trying to render the BottomNavigation in each Scene, like in you Video.js you're rendering it with <Menu activeTab="2" />. That should cause your problem, since the BottomNavigation becomes unmounted and remounted in every Scene and thus on every tab press.

You need to render <Menu /> outside of your Scenes. That way the BottomNavigation stays mounted all the time instead of being unmounted and remounted on every tab click.

[aryaminus]

I tried rendering withing App.js as it is the landing page after login but I am reaching a blank screen.

[timomeh]

Please take a look at the Example from react-native-router-flux. There is an example with a CustomNavBar using a navBar prop which you can find more details in their API docs.

I haven't used react-native-router-flux, but this looks like the stuff you need.

[aryaminus]

Fixed the issue but with bottom-navbar will showing in all scenes Reverted to:

"react-native-router-flux": "^4.0.0-beta.21"

Changed App.js:

import React, { Component, PropTypes } from "react";
import {
  StyleSheet,
  View,
  StatusBar
} from "react-native";
import { Router, Scene } from "react-native-router-flux";
class App extends React.Component {
  render() {
    return (
      <View style={styles.application}>
        <Router>
          <Scene key="root" style={{ paddingTop: 64 }}>
            <Scene key="home" component={Home} title="Profile" type="reset" />
            <Scene
              key="chatmain"
              component={ChatMain}
              title="ChatMain"
              type="reset"
            />
            <Scene key="chat" component={Chat} title="Chat" />
            <Scene key="friendlist" component={FriendList} title="FriendList" />
            <Scene key="chatF" component={ChatF} title="ChatF" />
            <Scene key="video" component={Video} title="Video" type="reset" />
            <Scene
              key="medical"
              component={Medical}
              title="Medical"
              type="reset"
            />
          </Scene>
        </Router>
        <Menu />
      </View>
    );
  }
}
var styles = StyleSheet.create({
  application: {
    flex: 1
  }
});
export default App;

[Osebrian]

Hi @timomeh, is there anyway to hide the navbar in some components while BottomNavigation is been rendered once like is done above? Thanks

[timomeh]

@Osebrian https://github.com/timomeh/react-native-material-bottom-navigation/issues/45#issuecomment-329238617