React-native-paper: Tab title not hide when lost focus and Icon color not change when focus

[huytran123]

Tab title not hide when lost focus and Icon color not change when focus, it is happen when first time run app

In-correct:

Correct:

I have deleted this code:
if (prevProps.navigationState.index === this.props.navigationState.index) { return; }

In function "componentDidUpdate" in file "BottomNavigation.js" to fix this error.

Please check it.

"react": "16.5.0",
"react-native": "0.57.0",
"react-native-paper": "^2.0.1",
android: 7.1

[ferrannp]

Can you provide a Snack of this? Are you also using Debugger when running it?

[huytran123]

i do not thinking so. i am running an DEV mode , not DEBUG mode.
I am using this example: https://callstack.github.io/react-native-paper/bottom-navigation.html
please see video: https://youtu.be/ZKdCBqQeiK0
I am running on android 8.1(Mi A1)

[satya164]

Can you share your code?

[huytran123]

this my code @satya164 :

import React from 'react';
import { BottomNavigation, Text } from 'react-native-paper';

const MusicRoute = () => <Text>Music</Text>;

const AlbumsRoute = () => <Text>Albums</Text>;

const RecentsRoute = () => <Text>Recents</Text>;

class MyComponent extends React.Component {
  state = {
    index: 0,
    routes: [
      { key: 'music', title: 'Music', icon: 'queue-music' },
      { key: 'albums', title: 'Albums', icon: 'album' },
      { key: 'recents', title: 'Recents', icon: 'history' },
      { key: 'music', title: 'Music', icon: 'queue-music' },
    ],
  };

  _handleIndexChange = index => this.setState({ index });

  _renderScene = BottomNavigation.SceneMap({
    music: MusicRoute,
    albums: AlbumsRoute,
    recents: RecentsRoute,
  });

  render() {
    return (
      <BottomNavigation
        navigationState={this.state}
        onIndexChange={this._handleIndexChange}
        renderScene={this._renderScene}
      />
    );
  }
}

export default class App extends React.Component {

    render() {

        return (<MyComponent />
        );
    }
}

==============================================
My dependencies:

 "dependencies": {
        "react": "16.5.0",
        "react-native": "0.57.0",
        "react-native-camera": "^1.2.0",
        "react-native-elements": "^0.19.1",
        "react-native-paper": "^2.0.1",
        "react-native-svg": "^7.0.2",
        "react-native-vector-icons": "^5.0.0",
        "react-native-version-number": "^0.3.4",
        "react-navigation": "^2.14.2",
        "react-navigation-material-bottom-tabs": "^0.4.0",
        "react-redux": "^5.0.7",
        "redux": "^4.0.0",
        "redux-saga": "^0.16.0",
        "rn-fetch-blob": "^0.10.13"
    }

[victorkvarghese]

Hi @ferrannp @satya164 Same Issue .. issue occurs only the first time .. Text is properly focused and coloured .. but the icon remains the same (no color change on focus)

code is similar to https://callstack.github.io/react-native-paper/bottom-navigation.html

React Native Paper : Latest Version
Environment: Production (Signed APK)
Oreo 8.1.0 (Oneplus 5T)

[satya164]

I have never encountered this issue :(

@huytran123 the code you provided doesn't match your gif. there are different icons and different text, so I need the actual code. I have already tested a lot with the example code, so please post your actual code.

@victorkvarghese it'll be nice if you provide the code. even if the code is similar, small changes might make a big difference.

[victorkvarghese]

@satya164 Will upload the code tonight.

PS: I'm using createMaterialBottomTabNavigator. But the documentation specifically says the component uses BottomNavigation component from react-native-paper.

I will upload the example code and a proper gif tonight

[huytran123]

@satya164 : you can see this video: https://youtu.be/ZKdCBqQeiK0,
this video match with code which i post for you
@victorkvarghese : i have found this error. You can read my post to fix this error if you need to fix them

[victorkvarghese]

@satya164 @ferrannp

import React from 'react';
import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs';
import { createStackNavigator } from 'react-navigation';
import Home from 'app/screens/Home';
import Business from 'app/screens/Business';
import News from 'app/screens/News';
import Offers from 'app/screens/Offers';
import TabIcon from 'app/components/TabIcon';

import BusinessSubScreen from 'app/screens/BusinessSubScreen';
import BusinessDetail from 'app/screens/BusinessDetail';

const HomeTabIcon = ({ tintColor }) => (
    <TabIcon name="home" tintColor={tintColor} />
);
const BusinessTabIcon = ({ tintColor }) => (
    <TabIcon name="business" tintColor={tintColor} />
);
const NewsTabIcon = ({ tintColor }) => (
    <TabIcon name="public" tintColor={tintColor} />
);
const OffersTabIcon = ({ tintColor }) => (
    <TabIcon name="loyalty" tintColor={tintColor} />
);

const BusinessStack = createStackNavigator({
    Business: {
        screen: Business,
        navigationOptions: { header: null }
    },
    BusinessSubScreen: {
        screen: BusinessSubScreen,
        navigationOptions: { header: null }
    }
});

const BottomNavigation = createMaterialBottomTabNavigator(
    {
        Home: {
            screen: Home,
            navigationOptions: { tabBarIcon: HomeTabIcon }
        },
        Business: {
            screen: BusinessStack,
            navigationOptions: { tabBarIcon: BusinessTabIcon }
        },
        News: {
            screen: News,
            navigationOptions: { tabBarIcon: NewsTabIcon }
        },
        Offers: {
            screen: Offers,
            navigationOptions: { tabBarIcon: OffersTabIcon }
        }
    },
    {
        initialRouteName: 'Home',
        activeColor: '#C2202D',
        inactiveColor: '#95a5a6',
        barStyle: { backgroundColor: '#FFFFFF' }
    }
);

const MyApp = createStackNavigator(
    {
        BottomNavigation: {
            screen: BottomNavigation,
            navigationOptions: { header: null }
        },
        BusinessDetail: {
            screen: BusinessDetail,
            navigationOptions: { header: null }
        }
    },
    { initialRouteName: 'BottomNavigation' }
);

export default MyApp;

import React, { Component } from 'react';
import Icon from 'react-native-vector-icons/MaterialIcons';

import PropTypes from 'prop-types';

export default class TabIcon extends Component {
    render() {
        const { name, tintColor, style } = this.props;

        return (
            <Icon
                style={style ? style : {}}
                name={name}
                size={24}
                color={tintColor}
            />
        );
    }
}
TabIcon.propTypes = {
    name: PropTypes.string,
    tintColor: PropTypes.string,
    style: PropTypes.object,
    type: PropTypes.string
};

When app launches

When we select another tab for first time

[ferrannp]

@huytran123 we cannot reproduce it, what device are you using?

[victorkvarghese]

@ferrannp Using createBottomTabNavigator instead of createMaterialBottomTabNavigator fixes the issue.

but the expo app for react native paper ..Bottom Navigation works fine.

Might be related to this lib

[gawrysiak]

For me it happens quite a lot when using hot reloading and doing code changes. Standard reload fixes it instantly. Can't really reproduce it properly, but I'll try when I see it next time.

[satya164]

also do you have chrome debugger connected when this happens?

[huytran123]

@ferrannp i am using Mi A1 (Android 8.1)

[HenryQuan]

I am also having this issue on OnePlus 5 (Android 8.1) and an emulator (Android 6). I have tested on iPhone 6 simulator but it seems that it is Android only. Only tested on debug mode.

IOS (left) Android (right)

This is my code.

<BottomNavigation navigationState={this.state} activeColor={blue500}
    barStyle={{backgroundColor: 'white'}} inactiveColor={grey700} 
    onIndexChange={this._handleIndexChange} renderScene={this._renderScene} />

[ferrannp]

Can you try 2.2.4? Should be fixed.

[satya164]

637