-
-
Notifications
You must be signed in to change notification settings - Fork 26
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: document usage with vector icons (#99)
- Loading branch information
1 parent
81926f1
commit 6e0d745
Showing
7 changed files
with
197 additions
and
5 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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"] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ); | ||
| } | ||
| ``` | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters