callstackincubator · okwasniewski · Oct 30, 2024 · Oct 30, 2024
diff --git a/docs/docs/docs/guides/_meta.json b/docs/docs/docs/guides/_meta.json
@@ -1 +1 @@
-["usage-with-react-navigation", "usage-with-expo-router", "usage-with-one", "standalone-usage", "android-native-styling", "handling-scrollview-insets"]
+["usage-with-react-navigation", "usage-with-expo-router", "usage-with-one", "standalone-usage", "android-native-styling", "handling-scrollview-insets", "usage-with-vector-icons"]
diff --git a/docs/docs/docs/guides/usage-with-vector-icons.md b/docs/docs/docs/guides/usage-with-vector-icons.md
@@ -0,0 +1,43 @@
+# Usage with React Native Vector Icons
+
+This library supports using [React Native Vector Icons](https://github.com/oblador/react-native-vector-icons) thanks to the `getImageSourceSync` API.
+
+:::info
+
+Follow installation guide in React Native Vector Icons [README](https://github.com/oblador/react-native-vector-icons)
+
+:::
+
+### Usage
+
+```tsx
+import { createNativeBottomTabNavigator } from 'react-native-bottom-tabs/react-navigation';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+
+const homeIcon = Icon.getImageSourceSync('home', 24);
+const exploreIcon = Icon.getImageSourceSync('compass', 24);
+
+const Tabs = createNativeBottomTabNavigator();
+
+function NativeBottomTabs() {
+  return (
+    <Tabs.Navigator>
+      <Tabs.Screen
+        name="index"
+        options={{
+          title: 'Home',
+          tabBarIcon: () => homeIcon,
+        }}
+      />
+      <Tabs.Screen
+        name="explore"
+        options={{
+          title: 'Explore',
+          tabBarIcon: () => exploreIcon,
+        }}
+      />
+    </Tabs.Navigator>
+  );
+}
+```
+
diff --git a/example/app.json b/example/app.json
@@ -12,11 +12,13 @@
   "resources": {
     "android": [
       "dist/res",
-      "dist/main.android.jsbundle"
+      "dist/main.android.jsbundle",
+      "./node_modules/react-native-vector-icons/Fonts/MaterialCommunityIcons.ttf"
     ],
     "ios": [
       "dist/assets",
-      "dist/main.ios.jsbundle"
+      "dist/main.ios.jsbundle",
+      "./node_modules/react-native-vector-icons/Fonts/MaterialCommunityIcons.ttf"
     ],
     "macos": [
       "dist/assets",

diff --git a/example/package.json b/example/package.json
@@ -25,7 +25,8 @@
     "react-native-gesture-handler": "^2.20.0",
     "react-native-paper": "^5.12.5",
     "react-native-safe-area-context": "^4.11.0",
-    "react-native-screens": "^3.34.0"
+    "react-native-screens": "^3.34.0",
+    "react-native-vector-icons": "^10.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
@@ -35,6 +36,7 @@
     "@react-native/metro-config": "0.75.3",
     "@react-native/typescript-config": "0.75.3",
     "@rnx-kit/metro-config": "^2.0.0",
+    "@types/react-native-vector-icons": "^6.4.18",
     "react-native-builder-bob": "^0.30.2",
     "react-native-test-app": "^3.10.10"
   },

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -29,6 +29,7 @@
 import LabeledTabs from './Examples/Labeled';
 import NativeBottomTabs from './Examples/NativeBottomTabs';
 import TintColorsExample from './Examples/TintColors';
+import NativeBottomTabsVectorIcons from './Examples/NativeBottomTabsVectorIcons';
 
 const FourTabsIgnoreSafeArea = () => {
   return <FourTabs ignoresTopSafeArea />;
@@ -89,6 +90,10 @@
     component: FourTabsActiveIndicatorColor,
     name: 'Four Tabs - Active Indicator color',
   },
+  {
+    component: NativeBottomTabsVectorIcons,
+    name: 'Native Bottom Tabs with Vector Icons',
+  },
   { component: NativeBottomTabs, name: 'Native Bottom Tabs' },
   { component: JSBottomTabs, name: 'JS Bottom Tabs' },
   {
@@ -139,7 +144,7 @@
            name="BottomTabs Example"
            component={App}
            options={{
              headerRight: () => (
                <Button
                  onPress={() =>
                    Alert.alert(

diff --git a/example/src/Examples/NativeBottomTabsVectorIcons.tsx b/example/src/Examples/NativeBottomTabsVectorIcons.tsx
@@ -0,0 +1,78 @@
+import { Article } from '../Screens/Article';
+import { Albums } from '../Screens/Albums';
+import { Contacts } from '../Screens/Contacts';
+import { Chat } from '../Screens/Chat';
+// This import works properly when library is published
+import createNativeBottomTabNavigator from '../../../src/react-navigation/navigators/createNativeBottomTabNavigator';
+import { Platform } from 'react-native';
+
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+
+const accountIcon = Icon.getImageSourceSync('account', 24);
+const accountIconAlert = Icon.getImageSourceSync('account-alert-outline', 24);
+const noteIcon = Icon.getImageSourceSync('note', 24);
+const gridIcon = Icon.getImageSourceSync('grid-large', 24);
+const messageIcon = Icon.getImageSourceSync('message', 24);
+
+const Tab = createNativeBottomTabNavigator();
+
+function NativeBottomTabsVectorIcons() {
+  return (
+    <Tab.Navigator
+      tabBarInactiveTintColor="#C57B57"
+      tabBarActiveTintColor="#F7DBA7"
+      barTintColor="#1E2D2F"
+      rippleColor="#F7DBA7"
+      activeIndicatorColor="#041F1E"
+      screenListeners={{
+        tabLongPress: (data) => {
+          console.log(
+            `${Platform.OS}: Long press detected on tab with key ${data.target} at the navigator level.`
+          );
+        },
+      }}
+    >
+      <Tab.Screen
+        name="Article"
+        component={Article}
+        listeners={{
+          tabLongPress: (data) => {
+            console.log(
+              `${Platform.OS}: Long press detected on tab with key ${data.target} at the screen level.`
+            );
+          },
+        }}
+        options={{
+          tabBarBadge: '10',
+          tabBarIcon: () => noteIcon,
+        }}
+      />
+      <Tab.Screen
+        name="Albums"
+        component={Albums}
+        options={{
+          tabBarIcon: () => gridIcon,
+        }}
+      />
+      <Tab.Screen
+        name="Contacts"
+        component={Contacts}
+        options={{
+          tabBarIcon: ({ focused }) =>
+            focused ? accountIcon : accountIconAlert,
+          tabBarActiveTintColor: 'yellow',
+        }}
+      />
+      <Tab.Screen
+        name="Chat"
+        component={Chat}
+        options={{
+          tabBarIcon: () => messageIcon,
+          tabBarActiveTintColor: 'white',
+        }}
+      />
+    </Tab.Navigator>
+  );
+}
+
+export default NativeBottomTabsVectorIcons;
diff --git a/yarn.lock b/yarn.lock
@@ -4599,6 +4599,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/react-native-vector-icons@npm:^6.4.18":
+  version: 6.4.18
+  resolution: "@types/react-native-vector-icons@npm:6.4.18"
+  dependencies:
+    "@types/react": "*"
+    "@types/react-native": ^0.70
+  checksum: 1ef458cb5e7a37f41eb400e3153940b1b152e4df76a7c06c7a47c712dbfe46e14b9999f04dde1bd074f338f850e161c6c925174ddea33386b74f8112c940065b
+  languageName: node
+  linkType: hard
+
+"@types/react-native@npm:^0.70":
+  version: 0.70.19
+  resolution: "@types/react-native@npm:0.70.19"
+  dependencies:
+    "@types/react": "*"
+  checksum: 79b504fa56340631079e7c20ea0d9412ec14147b76d0ce189f4403936f529ef1e6fd031383afab117846c5ae039123bcf3afc948bae4432269c6780282726f71
+  languageName: node
+  linkType: hard
+
 "@types/react@npm:^18.2.44":
   version: 18.3.9
   resolution: "@types/react@npm:18.3.9"
@@ -6016,6 +6035,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cliui@npm:^7.0.2":
+  version: 7.0.4
+  resolution: "cliui@npm:7.0.4"
+  dependencies:
+    string-width: ^4.2.0
+    strip-ansi: ^6.0.0
+    wrap-ansi: ^7.0.0
+  checksum: ce2e8f578a4813806788ac399b9e866297740eecd4ad1823c27fd344d78b22c5f8597d548adbcc46f0573e43e21e751f39446c5a5e804a12aace402b7a315d7f
+  languageName: node
+  linkType: hard
+
 "cliui@npm:^8.0.0, cliui@npm:^8.0.1":
   version: 8.0.1
   resolution: "cliui@npm:8.0.1"
@@ -13718,6 +13748,7 @@ __metadata:
     "@react-navigation/native-stack": ^6.11.0
     "@react-navigation/stack": ^6.4.1
     "@rnx-kit/metro-config": ^2.0.0
+    "@types/react-native-vector-icons": ^6.4.18
     color: ^4.2.3
     react: 18.3.1
     react-native: 0.75.3
@@ -13727,6 +13758,7 @@ __metadata:
     react-native-safe-area-context: ^4.11.0
     react-native-screens: ^3.34.0
     react-native-test-app: ^3.10.10
+    react-native-vector-icons: ^10.2.0
   languageName: unknown
   linkType: soft
 
@@ -13891,6 +13923,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-vector-icons@npm:^10.2.0":
+  version: 10.2.0
+  resolution: "react-native-vector-icons@npm:10.2.0"
+  dependencies:
+    prop-types: ^15.7.2
+    yargs: ^16.1.1
+  bin:
+    fa-upgrade.sh: bin/fa-upgrade.sh
+    fa5-upgrade: bin/fa5-upgrade.sh
+    fa6-upgrade: bin/fa6-upgrade.sh
+    generate-icon: bin/generate-icon.js
+  checksum: fda930df4e63f12533268f5b339ebe4c77c691eae43503328466b3087ed868a06a4593fd246e75ac6b5ec955543eec35608c7922191bdcc3b3a94ed7f3575ef0
+  languageName: node
+  linkType: hard
+
 "react-native@npm:0.75.3":
   version: 0.75.3
   resolution: "react-native@npm:0.75.3"
@@ -17188,7 +17235,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"yargs-parser@npm:^20.2.3, yargs-parser@npm:^20.2.9":
+"yargs-parser@npm:^20.2.2, yargs-parser@npm:^20.2.3, yargs-parser@npm:^20.2.9":
   version: 20.2.9
   resolution: "yargs-parser@npm:20.2.9"
   checksum: 8bb69015f2b0ff9e17b2c8e6bfe224ab463dd00ca211eece72a4cd8a906224d2703fb8a326d36fdd0e68701e201b2a60ed7cf81ce0fd9b3799f9fe7745977ae3
@@ -17214,6 +17261,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"yargs@npm:^16.1.1":
+  version: 16.2.0
+  resolution: "yargs@npm:16.2.0"
+  dependencies:
+    cliui: ^7.0.2
+    escalade: ^3.1.1
+    get-caller-file: ^2.0.5
+    require-directory: ^2.1.1
+    string-width: ^4.2.0
+    y18n: ^5.0.5
+    yargs-parser: ^20.2.2
+  checksum: b14afbb51e3251a204d81937c86a7e9d4bdbf9a2bcee38226c900d00f522969ab675703bee2a6f99f8e20103f608382936034e64d921b74df82b63c07c5e8f59
+  languageName: node
+  linkType: hard
+
 "yargs@npm:^17.0.0, yargs@npm:^17.3.1, yargs@npm:^17.5.1, yargs@npm:^17.6.2":
   version: 17.7.2
   resolution: "yargs@npm:17.7.2"
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		["usage-with-react-navigation", "usage-with-expo-router", "usage-with-one", "standalone-usage", "android-native-styling", "handling-scrollview-insets"]
		["usage-with-react-navigation", "usage-with-expo-router", "usage-with-one", "standalone-usage", "android-native-styling", "handling-scrollview-insets", "usage-with-vector-icons"]