Skip to content

Commit 6e0d745

Browse files
okwasniewskiokwasniewski
authored
feat: document usage with vector icons (#99)
1 parent 81926f1 commit 6e0d745

File tree

7 files changed

+197
-5
lines changed

7 files changed

+197
-5
lines changed

‎docs/docs/docs/guides/_meta.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
["usage-with-react-navigation", "usage-with-expo-router", "usage-with-one", "standalone-usage", "android-native-styling", "handling-scrollview-insets"]
1+
["usage-with-react-navigation", "usage-with-expo-router", "usage-with-one", "standalone-usage", "android-native-styling", "handling-scrollview-insets", "usage-with-vector-icons"]

‎docs/docs/docs/guides/usage-with-vector-icons.md‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
# Usage with React Native Vector Icons
2+
3+
This library supports using [React Native Vector Icons](https://github.com/oblador/react-native-vector-icons) thanks to the `getImageSourceSync` API.
4+
5+
:::info
6+
7+
Follow installation guide in React Native Vector Icons [README](https://github.com/oblador/react-native-vector-icons)
8+
9+
:::
10+
11+
### Usage
12+
13+
```tsx
14+
import { createNativeBottomTabNavigator } from 'react-native-bottom-tabs/react-navigation';
15+
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
16+
17+
const homeIcon = Icon.getImageSourceSync('home', 24);
18+
const exploreIcon = Icon.getImageSourceSync('compass', 24);
19+
20+
const Tabs = createNativeBottomTabNavigator();
21+
22+
function NativeBottomTabs() {
23+
return (
24+
<Tabs.Navigator>
25+
<Tabs.Screen
26+
name="index"
27+
options={{
28+
title: 'Home',
29+
tabBarIcon: () => homeIcon,
30+
}}
31+
/>
32+
<Tabs.Screen
33+
name="explore"
34+
options={{
35+
title: 'Explore',
36+
tabBarIcon: () => exploreIcon,
37+
}}
38+
/>
39+
</Tabs.Navigator>
40+
);
41+
}
42+
```
43+

‎example/app.json‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,13 @@
1212
"resources": {
1313
"android": [
1414
"dist/res",
15-
"dist/main.android.jsbundle"
15+
"dist/main.android.jsbundle",
16+
"./node_modules/react-native-vector-icons/Fonts/MaterialCommunityIcons.ttf"
1617
],
1718
"ios": [
1819
"dist/assets",
19-
"dist/main.ios.jsbundle"
20+
"dist/main.ios.jsbundle",
21+
"./node_modules/react-native-vector-icons/Fonts/MaterialCommunityIcons.ttf"
2022
],
2123
"macos": [
2224
"dist/assets",

‎example/package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,8 @@
2525
"react-native-gesture-handler": "^2.20.0",
2626
"react-native-paper": "^5.12.5",
2727
"react-native-safe-area-context": "^4.11.0",
28-
"react-native-screens": "^3.34.0"
28+
"react-native-screens": "^3.34.0",
29+
"react-native-vector-icons": "^10.2.0"
2930
},
3031
"devDependencies": {
3132
"@babel/core": "^7.20.0",
@@ -35,6 +36,7 @@
3536
"@react-native/metro-config": "0.75.3",
3637
"@react-native/typescript-config": "0.75.3",
3738
"@rnx-kit/metro-config": "^2.0.0",
39+
"@types/react-native-vector-icons": "^6.4.18",
3840
"react-native-builder-bob": "^0.30.2",
3941
"react-native-test-app": "^3.10.10"
4042
},

‎example/src/App.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ import SFSymbols from './Examples/SFSymbols';
2929
import LabeledTabs from './Examples/Labeled';
3030
import NativeBottomTabs from './Examples/NativeBottomTabs';
3131
import TintColorsExample from './Examples/TintColors';
32+
import NativeBottomTabsVectorIcons from './Examples/NativeBottomTabsVectorIcons';
3233

3334
const FourTabsIgnoreSafeArea = () => {
3435
return <FourTabs ignoresTopSafeArea />;
@@ -89,6 +90,10 @@ const examples = [
8990
component: FourTabsActiveIndicatorColor,
9091
name: 'Four Tabs - Active Indicator color',
9192
},
93+
{
94+
component: NativeBottomTabsVectorIcons,
95+
name: 'Native Bottom Tabs with Vector Icons',
96+
},
9297
{ component: NativeBottomTabs, name: 'Native Bottom Tabs' },
9398
{ component: JSBottomTabs, name: 'JS Bottom Tabs' },
9499
{

‎example/src/Examples/NativeBottomTabsVectorIcons.tsx‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import { Article } from '../Screens/Article';
2+
import { Albums } from '../Screens/Albums';
3+
import { Contacts } from '../Screens/Contacts';
4+
import { Chat } from '../Screens/Chat';
5+
// This import works properly when library is published
6+
import createNativeBottomTabNavigator from '../../../src/react-navigation/navigators/createNativeBottomTabNavigator';
7+
import { Platform } from 'react-native';
8+
9+
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
10+
11+
const accountIcon = Icon.getImageSourceSync('account', 24);
12+
const accountIconAlert = Icon.getImageSourceSync('account-alert-outline', 24);
13+
const noteIcon = Icon.getImageSourceSync('note', 24);
14+
const gridIcon = Icon.getImageSourceSync('grid-large', 24);
15+
const messageIcon = Icon.getImageSourceSync('message', 24);
16+
17+
const Tab = createNativeBottomTabNavigator();
18+
19+
function NativeBottomTabsVectorIcons() {
20+
return (
21+
<Tab.Navigator
22+
tabBarInactiveTintColor="#C57B57"
23+
tabBarActiveTintColor="#F7DBA7"
24+
barTintColor="#1E2D2F"
25+
rippleColor="#F7DBA7"
26+
activeIndicatorColor="#041F1E"
27+
screenListeners={{
28+
tabLongPress: (data) => {
29+
console.log(
30+
`${Platform.OS}: Long press detected on tab with key ${data.target} at the navigator level.`
31+
);
32+
},
33+
}}
34+
>
35+
<Tab.Screen
36+
name="Article"
37+
component={Article}
38+
listeners={{
39+
tabLongPress: (data) => {
40+
console.log(
41+
`${Platform.OS}: Long press detected on tab with key ${data.target} at the screen level.`
42+
);
43+
},
44+
}}
45+
options={{
46+
tabBarBadge: '10',
47+
tabBarIcon: () => noteIcon,
48+
}}
49+
/>
50+
<Tab.Screen
51+
name="Albums"
52+
component={Albums}
53+
options={{
54+
tabBarIcon: () => gridIcon,
55+
}}
56+
/>
57+
<Tab.Screen
58+
name="Contacts"
59+
component={Contacts}
60+
options={{
61+
tabBarIcon: ({ focused }) =>
62+
focused ? accountIcon : accountIconAlert,
63+
tabBarActiveTintColor: 'yellow',
64+
}}
65+
/>
66+
<Tab.Screen
67+
name="Chat"
68+
component={Chat}
69+
options={{
70+
tabBarIcon: () => messageIcon,
71+
tabBarActiveTintColor: 'white',
72+
}}
73+
/>
74+
</Tab.Navigator>
75+
);
76+
}
77+
78+
export default NativeBottomTabsVectorIcons;

‎yarn.lock‎

Lines changed: 63 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4599,6 +4599,25 @@ __metadata:
45994599
languageName: node
46004600
linkType: hard
46014601

4602+
"@types/react-native-vector-icons@npm:^6.4.18":
4603+
version: 6.4.18
4604+
resolution: "@types/react-native-vector-icons@npm:6.4.18"
4605+
dependencies:
4606+
"@types/react": "*"
4607+
"@types/react-native": ^0.70
4608+
checksum: 1ef458cb5e7a37f41eb400e3153940b1b152e4df76a7c06c7a47c712dbfe46e14b9999f04dde1bd074f338f850e161c6c925174ddea33386b74f8112c940065b
4609+
languageName: node
4610+
linkType: hard
4611+
4612+
"@types/react-native@npm:^0.70":
4613+
version: 0.70.19
4614+
resolution: "@types/react-native@npm:0.70.19"
4615+
dependencies:
4616+
"@types/react": "*"
4617+
checksum: 79b504fa56340631079e7c20ea0d9412ec14147b76d0ce189f4403936f529ef1e6fd031383afab117846c5ae039123bcf3afc948bae4432269c6780282726f71
4618+
languageName: node
4619+
linkType: hard
4620+
46024621
"@types/react@npm:^18.2.44":
46034622
version: 18.3.9
46044623
resolution: "@types/react@npm:18.3.9"
@@ -6016,6 +6035,17 @@ __metadata:
60166035
languageName: node
60176036
linkType: hard
60186037

6038+
"cliui@npm:^7.0.2":
6039+
version: 7.0.4
6040+
resolution: "cliui@npm:7.0.4"
6041+
dependencies:
6042+
string-width: ^4.2.0
6043+
strip-ansi: ^6.0.0
6044+
wrap-ansi: ^7.0.0
6045+
checksum: ce2e8f578a4813806788ac399b9e866297740eecd4ad1823c27fd344d78b22c5f8597d548adbcc46f0573e43e21e751f39446c5a5e804a12aace402b7a315d7f
6046+
languageName: node
6047+
linkType: hard
6048+
60196049
"cliui@npm:^8.0.0, cliui@npm:^8.0.1":
60206050
version: 8.0.1
60216051
resolution: "cliui@npm:8.0.1"
@@ -13718,6 +13748,7 @@ __metadata:
1371813748
"@react-navigation/native-stack": ^6.11.0
1371913749
"@react-navigation/stack": ^6.4.1
1372013750
"@rnx-kit/metro-config": ^2.0.0
13751+
"@types/react-native-vector-icons": ^6.4.18
1372113752
color: ^4.2.3
1372213753
react: 18.3.1
1372313754
react-native: 0.75.3
@@ -13727,6 +13758,7 @@ __metadata:
1372713758
react-native-safe-area-context: ^4.11.0
1372813759
react-native-screens: ^3.34.0
1372913760
react-native-test-app: ^3.10.10
13761+
react-native-vector-icons: ^10.2.0
1373013762
languageName: unknown
1373113763
linkType: soft
1373213764

@@ -13891,6 +13923,21 @@ __metadata:
1389113923
languageName: node
1389213924
linkType: hard
1389313925

13926+
"react-native-vector-icons@npm:^10.2.0":
13927+
version: 10.2.0
13928+
resolution: "react-native-vector-icons@npm:10.2.0"
13929+
dependencies:
13930+
prop-types: ^15.7.2
13931+
yargs: ^16.1.1
13932+
bin:
13933+
fa-upgrade.sh: bin/fa-upgrade.sh
13934+
fa5-upgrade: bin/fa5-upgrade.sh
13935+
fa6-upgrade: bin/fa6-upgrade.sh
13936+
generate-icon: bin/generate-icon.js
13937+
checksum: fda930df4e63f12533268f5b339ebe4c77c691eae43503328466b3087ed868a06a4593fd246e75ac6b5ec955543eec35608c7922191bdcc3b3a94ed7f3575ef0
13938+
languageName: node
13939+
linkType: hard
13940+
1389413941
"react-native@npm:0.75.3":
1389513942
version: 0.75.3
1389613943
resolution: "react-native@npm:0.75.3"
@@ -17188,7 +17235,7 @@ __metadata:
1718817235
languageName: node
1718917236
linkType: hard
1719017237

17191-
"yargs-parser@npm:^20.2.3, yargs-parser@npm:^20.2.9":
17238+
"yargs-parser@npm:^20.2.2, yargs-parser@npm:^20.2.3, yargs-parser@npm:^20.2.9":
1719217239
version: 20.2.9
1719317240
resolution: "yargs-parser@npm:20.2.9"
1719417241
checksum: 8bb69015f2b0ff9e17b2c8e6bfe224ab463dd00ca211eece72a4cd8a906224d2703fb8a326d36fdd0e68701e201b2a60ed7cf81ce0fd9b3799f9fe7745977ae3
@@ -17214,6 +17261,21 @@ __metadata:
1721417261
languageName: node
1721517262
linkType: hard
1721617263

17264+
"yargs@npm:^16.1.1":
17265+
version: 16.2.0
17266+
resolution: "yargs@npm:16.2.0"
17267+
dependencies:
17268+
cliui: ^7.0.2
17269+
escalade: ^3.1.1
17270+
get-caller-file: ^2.0.5
17271+
require-directory: ^2.1.1
17272+
string-width: ^4.2.0
17273+
y18n: ^5.0.5
17274+
yargs-parser: ^20.2.2
17275+
checksum: b14afbb51e3251a204d81937c86a7e9d4bdbf9a2bcee38226c900d00f522969ab675703bee2a6f99f8e20103f608382936034e64d921b74df82b63c07c5e8f59
17276+
languageName: node
17277+
linkType: hard
17278+
1721717279
"yargs@npm:^17.0.0, yargs@npm:^17.3.1, yargs@npm:^17.5.1, yargs@npm:^17.6.2":
1721817280
version: 17.7.2
1721917281
resolution: "yargs@npm:17.7.2"

0 commit comments

Comments
 (0)