@@ -29,101 +29,98 @@ function SettingsScreen() {
2929 ) ;
3030}
3131
32- const BottomNavigationBarExample = Object . assign (
33- createBottomTabNavigator ( {
34- screenOptions : {
35- headerShown : false ,
36- } ,
37- tabBar : ( { navigation, state, descriptors } ) => (
38- < BottomNavigation . Bar
39- navigationState = { state }
40- onTabPress = { ( { route, preventDefault } ) => {
41- const event = navigation . emit ( {
42- type : 'tabPress' ,
43- target : route . key ,
44- canPreventDefault : true ,
32+ const BottomNavigationBarExample = createBottomTabNavigator ( {
33+ screenOptions : {
34+ headerShown : false ,
35+ } ,
36+ tabBar : ( { navigation, state, descriptors } ) => (
37+ < BottomNavigation . Bar
38+ navigationState = { state }
39+ onTabPress = { ( { route, preventDefault } ) => {
40+ const event = navigation . emit ( {
41+ type : 'tabPress' ,
42+ target : route . key ,
43+ canPreventDefault : true ,
44+ } ) ;
45+
46+ if ( event . defaultPrevented ) {
47+ preventDefault ( ) ;
48+ } else {
49+ // Custom tab bars must target the tab navigator state.
50+ navigation . dispatch ( {
51+ ...CommonActions . navigate ( route . name , route . params ) ,
52+ target : state . key ,
4553 } ) ;
54+ }
55+ } }
56+ renderIcon = { ( { route, focused, color } ) => {
57+ const tabBarIcon = descriptors [ route . key ] . options . tabBarIcon ;
4658
47- if ( event . defaultPrevented ) {
48- preventDefault ( ) ;
49- } else {
50- // Custom tab bars must target the tab navigator state.
51- navigation . dispatch ( {
52- ...CommonActions . navigate ( route . name , route . params ) ,
53- target : state . key ,
54- } ) ;
55- }
56- } }
57- renderIcon = { ( { route, focused, color } ) => {
58- const tabBarIcon = descriptors [ route . key ] . options . tabBarIcon ;
59+ const size = 24 ;
60+ const icon =
61+ typeof tabBarIcon === 'function'
62+ ? tabBarIcon ( { focused, color, size } )
63+ : tabBarIcon ;
5964
60- const size = 24 ;
61- const icon =
62- typeof tabBarIcon === 'function'
63- ? tabBarIcon ( { focused, color, size } )
64- : tabBarIcon ;
65+ if ( icon == null ) {
66+ return null ;
67+ }
6568
66- if ( icon == null ) {
67- return null ;
68- }
69+ if ( React . isValidElement ( icon ) ) {
70+ return icon ;
71+ }
6972
70- if ( React . isValidElement ( icon ) ) {
71- return icon ;
73+ if ( typeof icon === 'object' && icon !== null && 'type' in icon ) {
74+ switch ( icon . type ) {
75+ case 'sfSymbol' :
76+ return < SFSymbol name = { icon . name } size = { size } color = { color } /> ;
77+ case 'materialSymbol' :
78+ return (
79+ < MaterialSymbol name = { icon . name } size = { size } color = { color } />
80+ ) ;
81+ case 'image' :
82+ return (
83+ < Image
84+ accessibilityIgnoresInvertColors
85+ source = { icon . source }
86+ resizeMode = "contain"
87+ fadeDuration = { 0 }
88+ style = { { width : size , height : size , tintColor : color } }
89+ />
90+ ) ;
7291 }
92+ }
7393
74- if ( typeof icon === 'object' && icon !== null && 'type' in icon ) {
75- switch ( icon . type ) {
76- case 'sfSymbol' :
77- return < SFSymbol name = { icon . name } size = { size } color = { color } /> ;
78- case 'materialSymbol' :
79- return (
80- < MaterialSymbol name = { icon . name } size = { size } color = { color } />
81- ) ;
82- case 'image' :
83- return (
84- < Image
85- accessibilityIgnoresInvertColors
86- source = { icon . source }
87- resizeMode = "contain"
88- fadeDuration = { 0 }
89- style = { { width : size , height : size , tintColor : color } }
90- />
91- ) ;
92- }
93- }
94-
95- throw new Error (
96- 'Tab bar icon is not a valid React element, SFSymbol, MaterialSymbol, or Image.'
97- ) ;
98- } }
99- getLabelText = { ( { route } ) => descriptors [ route . key ] . route . name }
100- />
101- ) ,
102- screens : {
103- Home : createBottomTabScreen ( {
104- screen : HomeScreen ,
105- options : {
106- tabBarIcon : ( { color, size } ) => {
107- return < Icon name = "home" size = { size } color = { color } /> ;
108- } ,
94+ throw new Error (
95+ 'Tab bar icon is not a valid React element, SFSymbol, MaterialSymbol, or Image.'
96+ ) ;
97+ } }
98+ getLabelText = { ( { route } ) => descriptors [ route . key ] . route . name }
99+ />
100+ ) ,
101+ screens : {
102+ Home : createBottomTabScreen ( {
103+ screen : HomeScreen ,
104+ options : {
105+ tabBarIcon : ( { color, size } ) => {
106+ return < Icon name = "home" size = { size } color = { color } /> ;
109107 } ,
110- } ) ,
111- Settings : createBottomTabScreen ( {
112- screen : SettingsScreen ,
113- options : {
114- tabBarIcon : ( { color , size } ) => {
115- return < Icon name = "cog" size = { size } color = { color } /> ;
116- } ,
108+ } ,
109+ } ) ,
110+ Settings : createBottomTabScreen ( {
111+ screen : SettingsScreen ,
112+ options : {
113+ tabBarIcon : ( { color , size } ) => {
114+ return < Icon name = "cog" size = { size } color = { color } /> ;
117115 } ,
118- } ) ,
119- } ,
120- } ) ,
121- {
122- title : 'Bottom Navigation Bar' ,
123- }
124- ) ;
116+ } ,
117+ } ) ,
118+ } ,
119+ } ) ;
125120
126- export default BottomNavigationBarExample ;
121+ export default Object . assign ( BottomNavigationBarExample , {
122+ title : 'Bottom Navigation Bar' ,
123+ } ) ;
127124
128125const styles = StyleSheet . create ( {
129126 container : {
0 commit comments