Add react-navigation example, update all-contributors

Author: timomeh

.all-contributorsrc

@@ -112,7 +112,8 @@
       "avatar_url": "https://avatars1.githubusercontent.com/u/64609?v=4",
       "profile": "https://github.com/lemming",
       "contributions": [
-        "code"
+        "code",
+        "bug"
       ]
     },
     {

README.md

@@ -104,6 +104,10 @@ export default class App extends React.Component {
     }
   ]
 
+  state = {
+    activeTab: 'games'
+  }
+
   renderIcon = icon => ({ isActive }) => (
     <Icon size={24} color="white" name={icon} />
   )
@@ -124,6 +128,7 @@ export default class App extends React.Component {
           {/* Your screen contents depending on current tab. */}
         </View>
         <BottomNavigation
+          activeTab={this.state.activeTab}
           onTabPress={newTab => this.setState({ activeTab: newTab.key })}
           renderTab={this.renderTab}
           tabs={this.tabs}
@@ -152,13 +157,11 @@ You can also view the entire documentation on GitBook: https://timomeh.gitbook.i
 
 ### React Navigation Support
 
-In contrary to earlier releases, this library _does not support_ React Navigation out of the box (called `NavigationComponent` in earlier releases). React Navigation now ships with an own Material Bottom Navigation: [`createMaterialBottomTabNavigator`](https://reactnavigation.org/docs/en/material-bottom-tab-navigator.html).
-
-The API of React Navigation changes quite frequently, and (until now) it wasn't always easy to keep track of changes and be up-to-date. Also I don't want to favor and promote React Navigation over other Navigation Libraries.
+**Check [this example](/examples/with-react-navigation.js) for a custom React Navigation integration.**
 
-You can still implement the Bottom Navigation on your own, for example by using React Navigation's [Custom Navigator](https://reactnavigation.org/docs/en/custom-navigator-overview.html).
+In contrary to earlier releases, this library does not support React Navigation _out of the box_. React Navigation now ships with its own Material Bottom Navigation: [`createMaterialBottomTabNavigator`](https://reactnavigation.org/docs/en/material-bottom-tab-navigator.html).
 
-If you integrate material-bottom-navigation with a navigation library in your project, feel free to share your knowledge by contributing to the Documentation or event create your own module which uses react-native-material-bottom-navigation.
+You can still implement react-native-material-bottom-navigation manually by using React Navigation's [Custom Navigators](https://reactnavigation.org/docs/en/custom-navigators.html#api-for-building-custom-navigators). Check out [this example](/examples/with-react-navigation.js).
 
 ### Updated Material Design Specs
 
@@ -176,9 +179,9 @@ Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds
 
 <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
 <!-- prettier-ignore -->
-| [<img src="https://avatars3.githubusercontent.com/u/4227520?v=4" width="100px;"/><br /><sub><b>Timo Mämecke</b></sub>](https://twitter.com/timomeh)<br />[🐛](https://github.com/timomeh/react-native-material-bottom-navigation/issues?q=author%3Atimomeh "Bug reports") [💻](https://github.com/timomeh/react-native-material-bottom-navigation/commits?author=timomeh "Code") [🎨](#design-timomeh "Design") [📖](https://github.com/timomeh/react-native-material-bottom-navigation/commits?author=timomeh "Documentation") [💡](#example-timomeh "Examples") [🚇](#infra-timomeh "Infrastructure (Hosting, Build-Tools, etc)") [🤔](#ideas-timomeh "Ideas, Planning, & Feedback") [👀](#review-timomeh "Reviewed Pull Requests") | [<img src="https://avatars3.githubusercontent.com/u/11575429?v=4" width="100px;"/><br /><sub><b>Shayan Javadi</b></sub>](https://www.shayanjavadi.com/)<br />[💻](https://github.com/timomeh/react-native-material-bottom-navigation/commits?author=ShayanJavadi "Code") | [<img src="https://avatars2.githubusercontent.com/u/14214500?v=4" width="100px;"/><br /><sub><b>David</b></sub>](https://github.com/davidmpr)<br />[💻](https://github.com/timomeh/react-native-material-bottom-navigation/commits?author=davidmpr "Code") | [<img src="https://avatars2.githubusercontent.com/u/19354816?v=4" width="100px;"/><br /><sub><b>Jayser Mendez</b></sub>](http://steemia.io)<br />[📖](https://github.com/timomeh/react-native-material-bottom-navigation/commits?author=jayserdny "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/10601911?v=4" width="100px;"/><br /><sub><b>Peter Kottas</b></sub>](https://www.facebook.com/tipsforholiday)<br />[💻](https://github.com/timomeh/react-native-material-bottom-navigation/commits?author=PeterKottas "Code") | [<img src="https://avatars0.githubusercontent.com/u/97068?v=4" width="100px;"/><br /><sub><b>Matt Oakes</b></sub>](https://mattoakes.net)<br />[💻](https://github.com/timomeh/react-native-material-bottom-navigation/commits?author=matt-oakes "Code") | [<img src="https://avatars0.githubusercontent.com/u/1533112?v=4" width="100px;"/><br /><sub><b>Keeley Carrigan</b></sub>](http://www.keeleycarrigan.com)<br />[💻](https://github.com/timomeh/react-native-material-bottom-navigation/commits?author=keeleycarrigan "Code") |
+| [<img src="https://avatars3.githubusercontent.com/u/4227520?v=4" width="100px;" alt="Timo Mämecke"/><br /><sub><b>Timo Mämecke</b></sub>](https://twitter.com/timomeh)<br />[🐛](https://github.com/timomeh/react-native-material-bottom-navigation/issues?q=author%3Atimomeh "Bug reports") [💻](https://github.com/timomeh/react-native-material-bottom-navigation/commits?author=timomeh "Code") [🎨](#design-timomeh "Design") [📖](https://github.com/timomeh/react-native-material-bottom-navigation/commits?author=timomeh "Documentation") [💡](#example-timomeh "Examples") [🚇](#infra-timomeh "Infrastructure (Hosting, Build-Tools, etc)") [🤔](#ideas-timomeh "Ideas, Planning, & Feedback") [👀](#review-timomeh "Reviewed Pull Requests") | [<img src="https://avatars3.githubusercontent.com/u/11575429?v=4" width="100px;" alt="Shayan Javadi"/><br /><sub><b>Shayan Javadi</b></sub>](https://www.shayanjavadi.com/)<br />[💻](https://github.com/timomeh/react-native-material-bottom-navigation/commits?author=ShayanJavadi "Code") | [<img src="https://avatars2.githubusercontent.com/u/14214500?v=4" width="100px;" alt="David"/><br /><sub><b>David</b></sub>](https://github.com/davidmpr)<br />[💻](https://github.com/timomeh/react-native-material-bottom-navigation/commits?author=davidmpr "Code") | [<img src="https://avatars2.githubusercontent.com/u/19354816?v=4" width="100px;" alt="Jayser Mendez"/><br /><sub><b>Jayser Mendez</b></sub>](http://steemia.io)<br />[📖](https://github.com/timomeh/react-native-material-bottom-navigation/commits?author=jayserdny "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/10601911?v=4" width="100px;" alt="Peter Kottas"/><br /><sub><b>Peter Kottas</b></sub>](https://www.facebook.com/tipsforholiday)<br />[💻](https://github.com/timomeh/react-native-material-bottom-navigation/commits?author=PeterKottas "Code") | [<img src="https://avatars0.githubusercontent.com/u/97068?v=4" width="100px;" alt="Matt Oakes"/><br /><sub><b>Matt Oakes</b></sub>](https://mattoakes.net)<br />[💻](https://github.com/timomeh/react-native-material-bottom-navigation/commits?author=matt-oakes "Code") | [<img src="https://avatars0.githubusercontent.com/u/1533112?v=4" width="100px;" alt="Keeley Carrigan"/><br /><sub><b>Keeley Carrigan</b></sub>](http://www.keeleycarrigan.com)<br />[💻](https://github.com/timomeh/react-native-material-bottom-navigation/commits?author=keeleycarrigan "Code") |
 | :---: | :---: | :---: | :---: | :---: | :---: | :---: |
-| [<img src="https://avatars1.githubusercontent.com/u/177857?v=4" width="100px;"/><br /><sub><b>Sean Holbert</b></sub>](http://www.twitter.com/wildseansy)<br />[💻](https://github.com/timomeh/react-native-material-bottom-navigation/commits?author=wildseansy "Code") | [<img src="https://avatars0.githubusercontent.com/u/9802139?v=4" width="100px;"/><br /><sub><b>Alessandro Parolin</b></sub>](https://github.com/aparolin)<br />[📖](https://github.com/timomeh/react-native-material-bottom-navigation/commits?author=aparolin "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/1837764?v=4" width="100px;"/><br /><sub><b>Prashanth Acharya M</b></sub>](https://github.com/prashantham)<br />[📖](https://github.com/timomeh/react-native-material-bottom-navigation/commits?author=prashantham "Documentation") | [<img src="https://avatars1.githubusercontent.com/u/64609?v=4" width="100px;"/><br /><sub><b>Alexey Tcherevatov</b></sub>](https://github.com/lemming)<br />[💻](https://github.com/timomeh/react-native-material-bottom-navigation/commits?author=lemming "Code") | [<img src="https://avatars2.githubusercontent.com/u/5009188?v=4" width="100px;"/><br /><sub><b>Trevor Atlas</b></sub>](https://blog.trevoratlas.com/)<br />[🐛](https://github.com/timomeh/react-native-material-bottom-navigation/issues?q=author%3Atrevor-atlas "Bug reports") |
+| [<img src="https://avatars1.githubusercontent.com/u/177857?v=4" width="100px;" alt="Sean Holbert"/><br /><sub><b>Sean Holbert</b></sub>](http://www.twitter.com/wildseansy)<br />[💻](https://github.com/timomeh/react-native-material-bottom-navigation/commits?author=wildseansy "Code") | [<img src="https://avatars0.githubusercontent.com/u/9802139?v=4" width="100px;" alt="Alessandro Parolin"/><br /><sub><b>Alessandro Parolin</b></sub>](https://github.com/aparolin)<br />[📖](https://github.com/timomeh/react-native-material-bottom-navigation/commits?author=aparolin "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/1837764?v=4" width="100px;" alt="Prashanth Acharya M"/><br /><sub><b>Prashanth Acharya M</b></sub>](https://github.com/prashantham)<br />[📖](https://github.com/timomeh/react-native-material-bottom-navigation/commits?author=prashantham "Documentation") | [<img src="https://avatars1.githubusercontent.com/u/64609?v=4" width="100px;" alt="Alexey Tcherevatov"/><br /><sub><b>Alexey Tcherevatov</b></sub>](https://github.com/lemming)<br />[💻](https://github.com/timomeh/react-native-material-bottom-navigation/commits?author=lemming "Code") [🐛](https://github.com/timomeh/react-native-material-bottom-navigation/issues?q=author%3Alemming "Bug reports") | [<img src="https://avatars2.githubusercontent.com/u/5009188?v=4" width="100px;" alt="Trevor Atlas"/><br /><sub><b>Trevor Atlas</b></sub>](https://blog.trevoratlas.com/)<br />[🐛](https://github.com/timomeh/react-native-material-bottom-navigation/issues?q=author%3Atrevor-atlas "Bug reports") |
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!

examples/with-react-navigation.js

@@ -0,0 +1,75 @@
+import React, { useCallback } from 'react'
+import { View, Text } from 'react-native'
+import { createNavigator, TabRouter } from 'react-navigation'
+import BottomNavigation, {
+  FullTab
+} from 'react-native-material-bottom-navigation'
+import Icon from '@expo/vector-icons/MaterialCommunityIcons'
+
+// Screens. Normally you would put these in separate files.
+const Movies = () => (
+  <View>
+    <Text>Movies</Text>
+  </View>
+)
+const Music = () => (
+  <View>
+    <Text>Music</Text>
+  </View>
+)
+const Books = () => (
+  <View>
+    <Text>Books</Text>
+  </View>
+)
+
+function AppTabView(props) {
+  const tabs = [
+    { key: 'Movies', label: 'Movies', barColor: '#00695C', icon: 'movie' },
+    { key: 'Music', label: 'Music', barColor: '#6A1B9A', icon: 'music-note' },
+    { key: 'Books', label: 'Books', barColor: '#1565C0', icon: 'book' }
+  ]
+
+  const { navigation, descriptors } = props
+  const { routes, index } = navigation.state
+  const activeScreenName = routes[index].key
+  const descriptor = descriptors[activeScreenName]
+  const ActiveScreen = descriptor.getComponent()
+
+  const handleTabPress = useCallback(
+    newTab => navigation.navigate(newTab.key),
+    [navigation]
+  )
+
+  return (
+    <View style={{ flex: 1 }}>
+      <View style={{ flex: 1 }}>
+        <ActiveScreen navigation={descriptor.navigation} />
+      </View>
+
+      <BottomNavigation
+        tabs={tabs}
+        activeTab={activeScreenName}
+        onTabPress={handleTabPress}
+        renderTab={({ tab, isActive }) => (
+          <FullTab
+            isActive={isActive}
+            key={tab.key}
+            label={tab.label}
+            renderIcon={() => <Icon name={tab.icon} size={24} color="white" />}
+          />
+        )}
+      />
+    </View>
+  )
+}
+
+const AppTabRouter = TabRouter({
+  Movies: { screen: Movies },
+  Music: { screen: Music },
+  Books: { screen: Books }
+})
+
+const AppNavigator = createNavigator(AppTabView, AppTabRouter, {})
+
+export default AppNavigator