React-native-paper: BottomNavigation shifting color not work

Created on 31 Oct 2018 · 4Comments · Source: callstack/react-native-paper

I just installed react-native-paper and find the docs tutorial BottomNavigation, I want to create something like

Current behaviour

adding color in routes state doesn't take any effect

Expected behaviour

use transition color like gif above

Code sample

import React, { Component } from 'react';
import {
  View
} from 'react-native';

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

const MusicRoute = () => <Text>Music</Text>;
const AlbumRoute = () => <Text>Albums</Text>;
const RecentsRoute = () => <Text>Recents</Text>;

export default class App extends React.Component {

  state = {
    index: 0,
    routes: [
      { key: 'music', title: 'Music', icon: 'queue-music', color:'#3F51B5' },
      { key: 'albums', title: 'Albums', icon: 'album', color:'#009688' },
      { key: 'recents', title: 'Recents', icon: 'history', color:'#795548' },
    ],
  };

  _handleIndexChange = index => this.setState({ index });
  _renderScene = BottomNavigation.SceneMap({
    music: MusicRoute,
    albums: AlbumRoute,
    recents: RecentsRoute,
  });

  _goBack = () => console.log('Went back');
  _onSearch = () => console.log('Searching');
  _onMore = () => console.log('Shown more');

  render() {
    return (
      <View style={{flex:1}}>
        <Appbar.Header>
          <Appbar.BackAction
            onPress={this._goBack}
          />
          <Appbar.Content
            title="Title"
            subtitle="Subtitle"
          />
          <Appbar.Action icon="search" onPress={this._onSearch} />
          <Appbar.Action icon="more-vert" onPress={this._onMore} />
        </Appbar.Header>
        <BottomNavigation
          navigationState={this.state}
          onIndexChange={this._handleIndexChange}
          renderScene={this._renderScene}
        />
      </View>
    );
  }
}

Screenshots (if applicable)

ezgif com-video-to-gif 1

Your Environment

| software | version
| --------------------- | -------
| ios or android | Android Lolipop (Emulator BigNox)
| react-native | "0.55.4"
| react-native-paper | "^2.1.3",
| node | v8.9.1
| npm or yarn | npm version 6.4.1 | yarn version 1.10.0

Source