Skip to content

Commit b86e237

Browse files
satya164satya164
committed
Use .with in more examples
1 parent d6fd3df commit b86e237

4 files changed

Lines changed: 84 additions & 106 deletions

File tree

‎versioned_docs/version-7.x/bottom-tab-navigator.md‎

Lines changed: 32 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -405,68 +405,56 @@ Position of the tab bar. Available values are:
405405

406406
When the tab bar is positioned on the `left` or `right`, it is styled as a sidebar. This can be useful when you want to show a sidebar on larger screens and a bottom tab bar on smaller screens:
407407

408-
<Tabs groupId="config" queryString="config">
409-
<TabItem value="static" label="Static" default>
408+
```js static2dynamic
409+
import { useWindowDimensions } from 'react-native';
410+
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
410411

411-
```js
412412
const Tabs = createBottomTabNavigator({
413-
screenOptions: {
414-
tabBarPosition: isLargeScreen ? 'left' : 'bottom',
413+
screens: {
414+
Home: HomeScreen,
415+
Profile: ProfileScreen,
415416
},
417+
}).with(({ Navigator }) => {
418+
const dimensions = useWindowDimensions();
416419

417-
// ...
420+
return (
421+
<Navigator
422+
screenOptions={{
423+
tabBarPosition: dimensions.width >= 768 ? 'left' : 'bottom',
424+
}}
425+
/>
426+
);
418427
});
419428
```
420429

421-
</TabItem>
422-
<TabItem value="dynamic" label="Dynamic">
423-
424-
```js
425-
<Tab.Navigator
426-
screenOptions={{
427-
tabBarPosition: isLargeScreen ? 'left' : 'bottom',
428-
}}
429-
>
430-
```
431-
432-
</TabItem>
433-
</Tabs>
434-
435430
<img src="/assets/navigators/bottom-tabs/bottom-tabs-side.png" alt="Sidebar" style={{ width: '100%' }} />
436431

437432
You can also render a compact sidebar by placing the label below the icon. This is only supported when the [`tabBarVariant`](#tabbarvariant) is set to `material`:
438433

439-
<Tabs groupId="config" queryString="config">
440-
<TabItem value="static" label="Static" default>
434+
```js static2dynamic
435+
import { useWindowDimensions } from 'react-native';
436+
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
441437

442-
```js
443438
const Tabs = createBottomTabNavigator({
444-
screenOptions: {
445-
tabBarPosition: isLargeScreen ? 'left' : 'bottom',
446-
tabBarVariant: isLargeScreen ? 'material' : 'uikit',
447-
tabBarLabelPosition: 'below-icon',
439+
screens: {
440+
Home: HomeScreen,
441+
Profile: ProfileScreen,
448442
},
443+
}).with(({ Navigator }) => {
444+
const dimensions = useWindowDimensions();
449445

450-
// ...
446+
return (
447+
<Navigator
448+
screenOptions={{
449+
tabBarPosition: dimensions.width >= 768 ? 'left' : 'bottom',
450+
tabBarVariant: dimensions.width >= 768 ? 'material' : 'uikit',
451+
tabBarLabelPosition: 'below-icon',
452+
}}
453+
/>
454+
);
451455
});
452456
```
453457

454-
</TabItem>
455-
<TabItem value="dynamic" label="Dynamic">
456-
457-
```js
458-
<Tab.Navigator
459-
screenOptions={{
460-
tabBarPosition: isLargeScreen ? 'left' : 'bottom',
461-
tabBarVariant: isLargeScreen ? 'material' : 'uikit',
462-
tabBarLabelPosition: 'below-icon',
463-
}}
464-
>
465-
```
466-
467-
</TabItem>
468-
</Tabs>
469-
470458
<img src="/assets/navigators/bottom-tabs/bottom-tabs-side-compact.png" alt="Compact sidebar" style={{ width: '100%' }} />
471459

472460
#### `tabBarVariant`

‎versioned_docs/version-7.x/drawer-navigator.md‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -419,25 +419,26 @@ Defaults to `slide` on iOS and `front` on other platforms.
419419

420420
You can conditionally specify the `drawerType` to show a permanent drawer on bigger screens and a traditional drawer on small screens:
421421

422-
```js
422+
```js static2dynamic
423423
import { useWindowDimensions } from 'react-native';
424424
import { createDrawerNavigator } from '@react-navigation/drawer';
425425

426-
const Drawer = createDrawerNavigator();
427-
428-
function MyDrawer() {
426+
const MyDrawer = createDrawerNavigator({
427+
screens: {
428+
Home: HomeScreen,
429+
Profile: ProfileScreen,
430+
},
431+
}).with(({ Navigator }) => {
429432
const dimensions = useWindowDimensions();
430433

431434
return (
432-
<Drawer.Navigator
435+
<Navigator
433436
screenOptions={{
434437
drawerType: dimensions.width >= 768 ? 'permanent' : 'front',
435438
}}
436-
>
437-
{/* Screens */}
438-
</Drawer.Navigator>
439+
/>
439440
);
440-
}
441+
});
441442
```
442443

443444
You can also specify other props such as `drawerStyle` based on screen size to customize the behavior. For example, you can combine it with `defaultStatus="open"` to achieve a master-detail layout:

‎versioned_docs/version-8.x/bottom-tab-navigator.md‎

Lines changed: 32 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -854,68 +854,56 @@ Only supported with `custom` implementation, or if a custom `tabBar` is provided
854854

855855
When the tab bar is positioned on the `left` or `right`, it is styled as a sidebar. This can be useful when you want to show a sidebar on larger screens and a bottom tab bar on smaller screens:
856856

857-
<Tabs groupId="config" queryString="config">
858-
<TabItem value="static" label="Static" default>
857+
```js static2dynamic
858+
import { useWindowDimensions } from 'react-native';
859+
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
859860

860-
```js
861861
const Tabs = createBottomTabNavigator({
862-
screenOptions: {
863-
tabBarPosition: isLargeScreen ? 'left' : 'bottom',
862+
screens: {
863+
Home: HomeScreen,
864+
Profile: ProfileScreen,
864865
},
866+
}).with(({ Navigator }) => {
867+
const dimensions = useWindowDimensions();
865868

866-
// ...
869+
return (
870+
<Navigator
871+
screenOptions={{
872+
tabBarPosition: dimensions.width >= 768 ? 'left' : 'bottom',
873+
}}
874+
/>
875+
);
867876
});
868877
```
869878

870-
</TabItem>
871-
<TabItem value="dynamic" label="Dynamic">
872-
873-
```js
874-
<Tab.Navigator
875-
screenOptions={{
876-
tabBarPosition: isLargeScreen ? 'left' : 'bottom',
877-
}}
878-
>
879-
```
880-
881-
</TabItem>
882-
</Tabs>
883-
884879
<img src="/assets/navigators/bottom-tabs/bottom-tabs-side.png" alt="Sidebar" style={{ width: '100%' }} />
885880

886881
You can also render a compact sidebar by placing the label below the icon. This is only supported when the [`tabBarVariant`](#tabbarvariant) is set to `material`:
887882

888-
<Tabs groupId="config" queryString="config">
889-
<TabItem value="static" label="Static" default>
883+
```js static2dynamic
884+
import { useWindowDimensions } from 'react-native';
885+
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
890886

891-
```js
892887
const Tabs = createBottomTabNavigator({
893-
screenOptions: {
894-
tabBarPosition: isLargeScreen ? 'left' : 'bottom',
895-
tabBarVariant: isLargeScreen ? 'material' : 'uikit',
896-
tabBarLabelPosition: 'below-icon',
888+
screens: {
889+
Home: HomeScreen,
890+
Profile: ProfileScreen,
897891
},
892+
}).with(({ Navigator }) => {
893+
const dimensions = useWindowDimensions();
898894

899-
// ...
895+
return (
896+
<Navigator
897+
screenOptions={{
898+
tabBarPosition: dimensions.width >= 768 ? 'left' : 'bottom',
899+
tabBarVariant: dimensions.width >= 768 ? 'material' : 'uikit',
900+
tabBarLabelPosition: 'below-icon',
901+
}}
902+
/>
903+
);
900904
});
901905
```
902906

903-
</TabItem>
904-
<TabItem value="dynamic" label="Dynamic">
905-
906-
```js
907-
<Tab.Navigator
908-
screenOptions={{
909-
tabBarPosition: isLargeScreen ? 'left' : 'bottom',
910-
tabBarVariant: isLargeScreen ? 'material' : 'uikit',
911-
tabBarLabelPosition: 'below-icon',
912-
}}
913-
>
914-
```
915-
916-
</TabItem>
917-
</Tabs>
918-
919907
<img src="/assets/navigators/bottom-tabs/bottom-tabs-side-compact.png" alt="Compact sidebar" style={{ width: '100%' }} />
920908

921909
#### `tabBarVariant`

‎versioned_docs/version-8.x/drawer-navigator.md‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -503,25 +503,26 @@ Defaults to `slide` on iOS and `front` on other platforms.
503503

504504
You can conditionally specify the `drawerType` to show a permanent drawer on bigger screens and a traditional drawer on small screens:
505505

506-
```js
506+
```js static2dynamic
507507
import { useWindowDimensions } from 'react-native';
508508
import { createDrawerNavigator } from '@react-navigation/drawer';
509509

510-
const Drawer = createDrawerNavigator();
511-
512-
function MyDrawer() {
510+
const MyDrawer = createDrawerNavigator({
511+
screens: {
512+
Home: HomeScreen,
513+
Profile: ProfileScreen,
514+
},
515+
}).with(({ Navigator }) => {
513516
const dimensions = useWindowDimensions();
514517

515518
return (
516-
<Drawer.Navigator
519+
<Navigator
517520
screenOptions={{
518521
drawerType: dimensions.width >= 768 ? 'permanent' : 'front',
519522
}}
520-
>
521-
{/* Screens */}
522-
</Drawer.Navigator>
523+
/>
523524
);
524-
}
525+
});
525526
```
526527

527528
You can also specify other props such as `drawerStyle` based on screen size to customize the behavior. For example, you can combine it with `defaultStatus="open"` to achieve a master-detail layout:

0 commit comments

Comments
 (0)