Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat: add material bottom tabs reference example * feat: implement custom image handling on iOS * feat: implement custom image handling on Android * fix: native iOS build * fix: support remote images for android * feat: handle SF Symbols * feat: add sfsymbols * fix: top safe area * attempt to fix CI
- Loading branch information
1 parent
f121778
commit 3b66be2
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
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
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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
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,61 @@ | ||
| import { createMaterialBottomTabNavigator } from 'react-native-paper/react-navigation'; | ||
| import { Article } from '../Screens/Article'; | ||
| import { Albums } from '../Screens/Albums'; | ||
| import { Contacts } from '../Screens/Contacts'; | ||
| import { Chat } from '../Screens/Chat'; | ||
| import { Image, type ImageSourcePropType } from 'react-native'; | ||
|
|
||
| const Tab = createMaterialBottomTabNavigator(); | ||
|
|
||
| const TabBarIcon = ({ source }: { source: ImageSourcePropType }) => ( | ||
| <Image style={{ width: 20, height: 23 }} source={source} /> | ||
| ); | ||
|
|
||
| function MaterialBottomTabs() { | ||
| return ( | ||
| <Tab.Navigator shifting> | ||
| <Tab.Screen | ||
| name="Article" | ||
| component={Article} | ||
| options={{ | ||
| tabBarIcon: () => ( | ||
|
Check warning on line 21 in example/src/Examples/MaterialBottomTabs.tsx
|
||
| <TabBarIcon | ||
| source={require('../../assets/icons/article_dark.png')} | ||
| /> | ||
| ), | ||
| }} | ||
| /> | ||
| <Tab.Screen | ||
| name="Albums" | ||
| component={Albums} | ||
| options={{ | ||
| tabBarIcon: () => ( | ||
|
Check warning on line 32 in example/src/Examples/MaterialBottomTabs.tsx
|
||
| <TabBarIcon source={require('../../assets/icons/grid_dark.png')} /> | ||
| ), | ||
| }} | ||
| /> | ||
| <Tab.Screen | ||
| name="Contacts" | ||
| component={Contacts} | ||
| options={{ | ||
| tabBarIcon: () => ( | ||
|
Check warning on line 41 in example/src/Examples/MaterialBottomTabs.tsx
|
||
| <TabBarIcon | ||
| source={require('../../assets/icons/person_dark.png')} | ||
| /> | ||
| ), | ||
| }} | ||
| /> | ||
| <Tab.Screen | ||
| name="Chat" | ||
| component={Chat} | ||
| options={{ | ||
| tabBarIcon: () => ( | ||
|
Check warning on line 52 in example/src/Examples/MaterialBottomTabs.tsx
|
||
| <TabBarIcon source={require('../../assets/icons/chat_dark.png')} /> | ||
| ), | ||
| }} | ||
| /> | ||
| </Tab.Navigator> | ||
| ); | ||
| } | ||
|
|
||
| export default MaterialBottomTabs; | ||
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,54 @@ | ||
| import TabView, { SceneMap } from 'react-native-bottom-tabs'; | ||
| import { useState } from 'react'; | ||
| import { Article } from '../Screens/Article'; | ||
| import { Albums } from '../Screens/Albums'; | ||
| import { Contacts } from '../Screens/Contacts'; | ||
| import { Platform } from 'react-native'; | ||
|
|
||
| const isAndroid = Platform.OS === 'android'; | ||
|
|
||
| export default function SFSymbols() { | ||
| const [index, setIndex] = useState(0); | ||
| const [routes] = useState([ | ||
| { | ||
| key: 'article', | ||
| title: 'Article', | ||
| focusedIcon: isAndroid | ||
| ? require('../../assets/icons/article_dark.png') | ||
| : { sfSymbol: 'document.fill' }, | ||
| unfocusedIcon: isAndroid | ||
| ? require('../../assets/icons/chat_dark.png') | ||
| : { sfSymbol: 'bubble.left.fill' }, | ||
| badge: '!', | ||
| }, | ||
| { | ||
| key: 'albums', | ||
| title: 'Albums', | ||
| focusedIcon: isAndroid | ||
| ? require('../../assets/icons/grid_dark.png') | ||
| : { sfSymbol: 'square.grid.3x2.fill' }, | ||
| badge: '5', | ||
| }, | ||
| { | ||
| key: 'contacts', | ||
| focusedIcon: isAndroid | ||
| ? require('../../assets/icons/person_dark.png') | ||
| : { sfSymbol: 'person.fill' }, | ||
| title: 'Contacts', | ||
| }, | ||
| ]); | ||
|
|
||
| const renderScene = SceneMap({ | ||
| article: Article, | ||
| albums: Albums, | ||
| contacts: Contacts, | ||
| }); | ||
|
|
||
| return ( | ||
| <TabView | ||
| navigationState={{ index, routes }} | ||
| onIndexChange={setIndex} | ||
| renderScene={renderScene} | ||
| /> | ||
| ); | ||
| } |
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
Oops, something went wrong.