title: How to change colour of selected icon in the BottomNavigation component of React Native Paper?
body: <p>I have the next page that uses <code>BottomNavigation</code>:</p>
  <pre><code>import React from 'react'
  import {
    BottomNavigation,
    DefaultTheme,
    Provider as PaperProvider,
  } from 'react-native-paper'
  import ChatScreen from './presentation/screens/ChatScreen'
  import HomeScreen from './presentation/screens/HomeScreen'
  import MapScreen from './presentation/screens/MapScreen'
  import PostScreen from './presentation/screens/PostScreen'
  import ProfileScreen from './presentation/screens/ProfileScreen'
  
  const App = () =&gt; {
    const [index, setIndex] = React.useState(0)
    const [routes] = React.useState([
      {key: 'home', icon: 'home'},
      {key: 'map', icon: 'compass'},
      {key: 'post', icon: 'plus-box'},
      {key: 'profile', icon: 'account'},
      {key: 'chat', icon: 'forum'},
    ])
  
    const renderScene = BottomNavigation.SceneMap({
      home: HomeScreen,
      map: MapScreen,
      post: PostScreen,
      profile: ProfileScreen,
      chat: ChatScreen,
    })
  
    return (
      &lt;PaperProvider theme={lightTheme}&gt;
        &lt;BottomNavigation
          labeled={false}
          navigationState={{index, routes}}
          onIndexChange={setIndex}
          renderScene={renderScene}
        /&gt;
      &lt;/PaperProvider&gt;
    )
  }
  
  export default App
  </code></pre>
  <p>This code uses a default icon tint colour from the theme. However, how to use a different colour for every icon?</p>
  <p><a href="https://i.stack.imgur.com/rRdnGl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rRdnGl.png" alt="Screenshots" /></a></p>