feat: add react-navigation integration for BottomNavigation (#3676)

Co-authored-by: Dimitar Nestorov <dimitar.nestorov@callstack.com>

docs/docusaurus.config.js

@@ -74,6 +74,7 @@ const config = {
           Banner: 'Banner',
           BottomNavigation: {
             BottomNavigation: 'BottomNavigation/BottomNavigation',
+            BottomNavigationBar: 'BottomNavigation/BottomNavigationBar',
           },
           Button: {
             Button: 'Button/Button',

example/metro.config.js

@@ -15,6 +15,7 @@ const modules = [
   '@expo/vector-icons',
   'expo-constants',
   ...Object.keys(pak.peerDependencies),
+  '@react-navigation/native',
 ];
 
 module.exports = {

example/src/ExampleList.tsx

@@ -11,6 +11,7 @@ import AppbarExample from './Examples/AppbarExample';
 import AvatarExample from './Examples/AvatarExample';
 import BadgeExample from './Examples/BadgeExample';
 import BannerExample from './Examples/BannerExample';
+import BottomNavigationBarExample from './Examples/BottomNavigationBarExample';
 import BottomNavigationExample from './Examples/BottomNavigationExample';
 import ButtonExample from './Examples/ButtonExample';
 import CardExample from './Examples/CardExample';
@@ -26,6 +27,7 @@ import ListAccordionExample from './Examples/ListAccordionExample';
 import ListAccordionExampleGroup from './Examples/ListAccordionGroupExample';
 import ListItemExample from './Examples/ListItemExample';
 import ListSectionExample from './Examples/ListSectionExample';
+import MaterialBottomTabNavigatorExample from './Examples/MaterialBottomTabNavigatorExample';
 import MenuExample from './Examples/MenuExample';
 import ProgressBarExample from './Examples/ProgressBarExample';
 import RadioButtonExample from './Examples/RadioButtonExample';
@@ -60,6 +62,7 @@ export const mainExamples: Record<
   avatar: AvatarExample,
   badge: BadgeExample,
   banner: BannerExample,
+  bottomNavigationBarExample: BottomNavigationBarExample,
   bottomNavigation: BottomNavigationExample,
   button: ButtonExample,
   card: CardExample,
@@ -75,6 +78,7 @@ export const mainExamples: Record<
   listAccordionGroup: ListAccordionExampleGroup,
   listSection: ListSectionExample,
   listItem: ListItemExample,
+  materialBottomTabNavigator: MaterialBottomTabNavigatorExample,
   menu: MenuExample,
   progressbar: ProgressBarExample,
   radio: RadioButtonExample,

example/src/Examples/BottomNavigationBarExample.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { Text, BottomNavigation } from 'react-native-paper';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+
+const Tab = createBottomTabNavigator();
+
+function HomeScreen() {
+  return (
+    <View style={styles.container}>
+      <Text variant="headlineMedium">Home!</Text>
+    </View>
+  );
+}
+
+function SettingsScreen() {
+  return (
+    <View style={styles.container}>
+      <Text variant="headlineMedium">Settings!</Text>
+    </View>
+  );
+}
+
+export default function BottomNavigationBarExample() {
+  return (
+    <Tab.Navigator
+      screenOptions={{
+        headerShown: false,
+      }}
+      tabBar={({ navigation, state, descriptors, insets }) => (
+        <BottomNavigation.Bar
+          navigationState={state}
+          safeAreaInsets={insets}
+          onTabPress={({ route, preventDefault }) => {
+            const event = navigation.emit({
+              type: 'tabPress',
+              target: route.key,
+              canPreventDefault: true,
+            });
+
+            if (event.defaultPrevented) {
+              preventDefault();
+            } else {
+              navigation.navigate(route);
+            }
+          }}
+          renderIcon={({ route, focused, color }) =>
+            descriptors[route.key].options.tabBarIcon?.({
+              focused,
+              color,
+              size: 24,
+            }) || null
+          }
+          getLabelText={({ route }) => descriptors[route.key].route.name}
+        />
+      )}
+    >
+      <Tab.Screen
+        name="Home"
+        component={HomeScreen}
+        options={{
+          tabBarIcon: ({ color, size }) => {
+            return <Icon name="home" size={size} color={color} />;
+          },
+        }}
+      />
+      <Tab.Screen
+        name="Settings"
+        component={SettingsScreen}
+        options={{
+          tabBarIcon: ({ color, size }) => {
+            return <Icon name="cog" size={size} color={color} />;
+          },
+        }}
+      />
+    </Tab.Navigator>
+  );
+}
+
+BottomNavigationBarExample.title = 'Bottom Navigation Bar';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

example/src/Examples/MaterialBottomTabNavigatorExample.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+
+import { createMaterialBottomTabNavigator } from '../../../src/react-navigation';
+
+const Tab = createMaterialBottomTabNavigator();
+
+export default function MaterialBottomTabNavigatorExample() {
+  return (
+    <Tab.Navigator
+      initialRouteName="Feed"
+      activeColor="#e91e63"
+      style={styles.tabs}
+    >
+      <Tab.Screen
+        name="Feed"
+        component={Feed}
+        options={{
+          tabBarLabel: 'Home',
+          tabBarIcon: ({ color }) => (
+            <Icon name="home" color={color} size={26} />
+          ),
+        }}
+      />
+      <Tab.Screen
+        name="Notifications"
+        component={Notifications}
+        options={{
+          tabBarLabel: 'Updates',
+          tabBarIcon: ({ color }) => (
+            <Icon name="bell" color={color} size={26} />
+          ),
+        }}
+      />
+      <Tab.Screen
+        name="Profile"
+        component={Profile}
+        options={{
+          tabBarLabel: 'Profile',
+          tabBarIcon: ({ color }) => (
+            <Icon name="account" color={color} size={26} />
+          ),
+        }}
+      />
+    </Tab.Navigator>
+  );
+}
+
+MaterialBottomTabNavigatorExample.title = 'Material Bottom Tab Navigator';
+
+function Feed() {
+  return (
+    <View style={styles.screen}>
+      <Text>Feed!</Text>
+    </View>
+  );
+}
+
+function Profile() {
+  return (
+    <View style={styles.screen}>
+      <Text>Profile!</Text>
+    </View>
+  );
+}
+
+function Notifications() {
+  return (
+    <View style={styles.screen}>
+      <Text>Notifications!</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  screen: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  // eslint-disable-next-line react-native/no-color-literals
+  tabs: {
+    backgroundColor: 'tomato',
+  },
+});

example/src/Examples/ThemingWithReactNavigation.tsx

@@ -37,7 +37,7 @@ const HomeTab = () => {
         component={HomeScreen}
         options={{
           tabBarIcon: ({ color, size }) => {
-            return <Icon name={'home'} size={size} color={color} />;
+            return <Icon name="home" size={size} color={color} />;
           },
         }}
       />
@@ -46,7 +46,7 @@ const HomeTab = () => {
         component={SettingsScreen}
         options={{
           tabBarIcon: ({ color, size }) => {
-            return <Icon name={'cog'} size={size} color={color} />;
+            return <Icon name="cog" size={size} color={color} />;
           },
         }}
       />

package.json

@@ -10,6 +10,7 @@
   "files": [
     "src",
     "lib",
+    "react-navigation",
     "babel.js"
   ],
   "sideEffects": false,
@@ -57,6 +58,7 @@
     "@babel/runtime": "^7.20.7",
     "@callstack/eslint-config": "^13.0.2",
     "@commitlint/config-conventional": "^8.3.4",
+    "@react-navigation/native": "^6.1.2",
     "@release-it/conventional-changelog": "^1.1.0",
     "@testing-library/jest-native": "^5.4.1",
     "@testing-library/react-native": "11.5.0",

react-navigation/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../lib/commonjs/react-navigation/index",
+  "module": "../lib/module/react-navigation/index",
+  "react-native": "../src/react-navigation/index",
+  "types": "../lib/typescript/react-navigation/index"
+}