File tree 5 files changed +0
-212
lines changed
versioned_docs/version-7.x
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
581
581
navigation .jumpTo (' Profile' , { owner: ' Michaś' });
582
582
```
583
583
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
-
638
584
## Animations
639
585
640
586
By 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
671
671
navigation .jumpTo (' Profile' , { owner: ' Satya' });
672
672
```
673
673
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
-
706
674
## Checking if the drawer is open
707
675
708
676
You 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
517
517
``` js
518
518
navigation .jumpTo (' Profile' , { name: ' Michaś' });
519
519
```
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.
805
805
``` js
806
806
navigation .popToTop ();
807
807
```
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.
595
595
navigation .popToTop ();
596
596
```
597
597
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
-
643
598
## Animations
644
599
645
600
You 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