File tree Expand file tree Collapse file tree 5 files changed +0
-212
lines changed
versioned_docs/version-7.x Expand file tree Collapse file tree 5 files changed +0
-212
lines changed Original file line number Diff line number Diff line change @@ -581,60 +581,6 @@ Navigates to an existing screen in the tab navigator. The method accepts followi
581581navigation .jumpTo (' Profile' , { owner: ' Michaś' });
582582```
583583
584- ## Example
585-
586- <samp id =" bottom-tab-example " />
587-
588- ``` js
589- import { createBottomTabNavigator } from ' @react-navigation/bottom-tabs' ;
590- import MaterialCommunityIcons from ' react-native-vector-icons/MaterialCommunityIcons' ;
591-
592- const Tab = createBottomTabNavigator ();
593-
594- function MyTabs () {
595- return (
596- < Tab .Navigator
597- initialRouteName= " Feed"
598- screenOptions= {{
599- tabBarActiveTintColor: ' #e91e63' ,
600- }}
601- >
602- < Tab .Screen
603- name= " Feed"
604- component= {Feed}
605- options= {{
606- tabBarLabel: ' Home' ,
607- tabBarIcon : ({ color, size }) => (
608- < MaterialCommunityIcons name= " home" color= {color} size= {size} / >
609- ),
610- }}
611- / >
612- < Tab .Screen
613- name= " Notifications"
614- component= {Notifications}
615- options= {{
616- tabBarLabel: ' Updates' ,
617- tabBarIcon : ({ color, size }) => (
618- < MaterialCommunityIcons name= " bell" color= {color} size= {size} / >
619- ),
620- tabBarBadge: 3 ,
621- }}
622- / >
623- < Tab .Screen
624- name= " Profile"
625- component= {Profile}
626- options= {{
627- tabBarLabel: ' Profile' ,
628- tabBarIcon : ({ color, size }) => (
629- < MaterialCommunityIcons name= " account" color= {color} size= {size} / >
630- ),
631- }}
632- / >
633- < / Tab .Navigator >
634- );
635- }
636- ```
637-
638584## Animations
639585
640586By default, switching between tabs doesn't have any animation. You can specify the ` animation ` option to customize the transition animation.
Original file line number Diff line number Diff line change @@ -671,38 +671,6 @@ Navigates to an existing screen in the drawer navigator. The method accepts the
671671navigation .jumpTo (' Profile' , { owner: ' Satya' });
672672```
673673
674- ## Example
675-
676- <samp id =" drawer-example " />
677-
678- ``` js
679- import { createDrawerNavigator } from ' @react-navigation/drawer' ;
680-
681- const Drawer = createDrawerNavigator ();
682-
683- function MyDrawer () {
684- return (
685- < Drawer .Navigator initialRouteName= " Feed" >
686- < Drawer .Screen
687- name= " Feed"
688- component= {Feed}
689- options= {{ drawerLabel: ' Home' }}
690- / >
691- < Drawer .Screen
692- name= " Notifications"
693- component= {Notifications}
694- options= {{ drawerLabel: ' Updates' }}
695- / >
696- < Drawer .Screen
697- name= " Profile"
698- component= {Profile}
699- options= {{ drawerLabel: ' Profile' }}
700- / >
701- < / Drawer .Navigator >
702- );
703- }
704- ```
705-
706674## Checking if the drawer is open
707675
708676You can check if the drawer is open by using the ` useDrawerStatus ` hook.
Original file line number Diff line number Diff line change @@ -517,42 +517,3 @@ Navigates to an existing screen in the tab navigator. The method accepts followi
517517``` js
518518navigation .jumpTo (' Profile' , { name: ' Michaś' });
519519```
520-
521- ## Example
522-
523- <samp id =" material-top-tab-example " />
524-
525- ``` js
526- import { createMaterialTopTabNavigator } from ' @react-navigation/material-top-tabs' ;
527-
528- const Tab = createMaterialTopTabNavigator ();
529-
530- function MyTabs () {
531- return (
532- < Tab .Navigator
533- initialRouteName= " Feed"
534- screenOptions= {{
535- tabBarActiveTintColor: ' #e91e63' ,
536- tabBarLabelStyle: { fontSize: 12 },
537- tabBarStyle: { backgroundColor: ' powderblue' },
538- }}
539- >
540- < Tab .Screen
541- name= " Feed"
542- component= {Feed}
543- options= {{ tabBarLabel: ' Home' }}
544- / >
545- < Tab .Screen
546- name= " Notifications"
547- component= {Notifications}
548- options= {{ tabBarLabel: ' Updates' }}
549- / >
550- < Tab .Screen
551- name= " Profile"
552- component= {Profile}
553- options= {{ tabBarLabel: ' Profile' }}
554- / >
555- < / Tab .Navigator >
556- );
557- }
558- ```
Original file line number Diff line number Diff line change @@ -805,45 +805,3 @@ Pops all of the screens in the stack except the first one and navigates to it.
805805``` js
806806navigation .popToTop ();
807807```
808-
809- ## Example
810-
811- ``` js
812- import { createNativeStackNavigator } from ' @react-navigation/native-stack' ;
813-
814- const Stack = createNativeStackNavigator ();
815-
816- function MyStack () {
817- return (
818- < Stack .Navigator
819- initialRouteName= " Home"
820- screenOptions= {{
821- headerTintColor: ' white' ,
822- headerStyle: { backgroundColor: ' tomato' },
823- }}
824- >
825- < Stack .Screen
826- name= " Home"
827- component= {Home}
828- options= {{
829- title: ' Awesome app' ,
830- }}
831- / >
832- < Stack .Screen
833- name= " Profile"
834- component= {Profile}
835- options= {{
836- title: ' My profile' ,
837- }}
838- / >
839- < Stack .Screen
840- name= " Settings"
841- component= {Settings}
842- options= {{
843- gestureEnabled: false ,
844- }}
845- / >
846- < / Stack .Navigator >
847- );
848- }
849- ```
Original file line number Diff line number Diff line change @@ -595,51 +595,6 @@ Pops all of the screens in the stack except the first one and navigates to it.
595595navigation .popToTop ();
596596```
597597
598- ## Example
599-
600- <samp id =" stack-with-options " />
601-
602- ``` js
603- import { createStackNavigator } from ' @react-navigation/stack' ;
604-
605- const Stack = createStackNavigator ();
606-
607- function MyStack () {
608- return (
609- < Stack .Navigator
610- initialRouteName= " Home"
611- screenOptions= {{
612- headerMode: ' screen' ,
613- headerTintColor: ' white' ,
614- headerStyle: { backgroundColor: ' tomato' },
615- }}
616- >
617- < Stack .Screen
618- name= " Home"
619- component= {Home}
620- options= {{
621- title: ' Awesome app' ,
622- }}
623- / >
624- < Stack .Screen
625- name= " Profile"
626- component= {Profile}
627- options= {{
628- title: ' My profile' ,
629- }}
630- / >
631- < Stack .Screen
632- name= " Settings"
633- component= {Settings}
634- options= {{
635- gestureEnabled: false ,
636- }}
637- / >
638- < / Stack .Navigator >
639- );
640- }
641- ```
642-
643598## Animations
644599
645600You can specify the ` animation ` option to customize the transition animation for screens being pushed or popped.
You can’t perform that action at this time.
0 commit comments