Skip to content

Commit 45d7739

Browse files
WoLewickiWoLewicki
committed
fix: add requested changes
1 parent 3b6d1bc commit 45d7739

15 files changed

+86
-33
lines changed

‎docs/material-bottom-tab-navigator.md

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -148,6 +148,19 @@ This event is fired when the user presses the tab button for the current screen
148148
- If the screen for the tab renders a scroll view, scroll to top is performed by `useScrollToTop`
149149
- If the screen for the tab renders a stack navigator, a `popToTop` action is performed on the stack
150150

151+
To prevent the default behavior, you can call `event.preventDefault`:
152+
153+
<samp id="material-bottom-tab-prevent-default">
154+
155+
```js
156+
navigation.addListener('tabPress', e => {
157+
// Prevent default behavior
158+
e.preventDefault();
159+
// Do something manually
160+
// ...
161+
});
162+
```
163+
151164
### Helpers
152165

153166
The tab navigator adds the following methods to the navigation prop:

‎docs/material-top-tab-navigator.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -274,7 +274,7 @@ function MyTabBar({ state, descriptors, navigation, position }) {
274274
});
275275
};
276276

277-
const inputRange = [0, 1, 2];
277+
const inputRange = state.routes.map((_, i) => i);
278278
const opacity = Animated.interpolate(position, {
279279
inputRange,
280280
outputRange: inputRange.map(i => (i === index ? 1 : 0)),
@@ -381,7 +381,7 @@ This event is fired when the user presses the tab button for the current screen
381381
- If the screen for the tab renders a scroll view, scroll to top is performed by `useScrollToTop`
382382
- If the screen for the tab renders a stack navigator, a `popToTop` action is performed on the stack
383383

384-
To prevent the default behavior, you can call `eventPreventDefault`:
384+
To prevent the default behavior, you can call `event.preventDefault`:
385385

386386
<samp id="material-top-tab-prevent-default">
387387

‎docs/navigation-lifecycle.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ function Profile({ navigation }) {
6666
});
6767

6868
return unsubscribe;
69-
});
69+
}, []);
7070

7171
return <ProfileContent />;
7272
}

‎docs/navigation-prop.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -210,7 +210,7 @@ function Profile({ navigation }) {
210210
});
211211

212212
return unsubscribe;
213-
});
213+
}, []);
214214

215215
return <ProfileContent />;
216216
}

‎website/static/examples/next/drawer-actions.js

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,6 @@ import {
99
} from '@react-navigation/drawer';
1010
import { DrawerActions } from '@react-navigation/routers';
1111

12-
const navRef = React.createRef(null);
13-
1412
function HomeScreen({ navigation }) {
1513
const jumpToAction = DrawerActions.jumpTo('Profile', { user: 'Satya' });
1614

@@ -48,11 +46,11 @@ function CustomDrawerContent(props) {
4846
<DrawerItemList {...props} />
4947
<DrawerItem
5048
label="Close drawer"
51-
onPress={() => navRef.current.dispatch(DrawerActions.closeDrawer())}
49+
onPress={() => props.navigation.dispatch(DrawerActions.closeDrawer())}
5250
/>
5351
<DrawerItem
5452
label="Toggle drawer"
55-
onPress={() => navRef.current.dispatch(DrawerActions.toggleDrawer())}
53+
onPress={() => props.navigation.dispatch(DrawerActions.toggleDrawer())}
5654
/>
5755
</DrawerContentScrollView>
5856
);
@@ -62,7 +60,7 @@ const Drawer = createDrawerNavigator();
6260

6361
export default function App() {
6462
return (
65-
<NavigationNativeContainer ref={navRef}>
63+
<NavigationNativeContainer>
6664
<Drawer.Navigator drawerContent={props => CustomDrawerContent(props)}>
6765
<Drawer.Screen name="Home" component={HomeScreen} />
6866
<Drawer.Screen name="Profile" component={ProfileScreen} />

‎website/static/examples/next/drawer-dispatch.js

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,6 @@ import {
99
} from '@react-navigation/drawer';
1010
import { DrawerActions } from '@react-navigation/routers';
1111

12-
const navRef = React.createRef(null);
13-
1412
function Feed({ navigation }) {
1513
return (
1614
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
@@ -41,11 +39,11 @@ function CustomDrawerContent(props) {
4139
<DrawerItemList {...props} />
4240
<DrawerItem
4341
label="Close drawer"
44-
onPress={() => navRef.current.dispatch(DrawerActions.closeDrawer())}
42+
onPress={() => props.navigation.dispatch(DrawerActions.closeDrawer())}
4543
/>
4644
<DrawerItem
4745
label="Toggle drawer"
48-
onPress={() => navRef.current.dispatch(DrawerActions.toggleDrawer())}
46+
onPress={() => props.navigation.dispatch(DrawerActions.toggleDrawer())}
4947
/>
5048
</DrawerContentScrollView>
5149
);
@@ -64,7 +62,7 @@ function MyDrawer() {
6462

6563
export default function App() {
6664
return (
67-
<NavigationNativeContainer ref={navRef}>
65+
<NavigationNativeContainer>
6866
<MyDrawer />
6967
</NavigationNativeContainer>
7068
);

‎website/static/examples/next/drawer-open-close-toggle.js

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,6 @@ import {
77
DrawerItemList,
88
DrawerItem,
99
} from '@react-navigation/drawer';
10-
import { DrawerActions } from '@react-navigation/routers';
11-
12-
const navRef = React.createRef(null);
1310

1411
function Feed({ navigation }) {
1512
return (
@@ -35,11 +32,11 @@ function CustomDrawerContent(props) {
3532
<DrawerItemList {...props} />
3633
<DrawerItem
3734
label="Close drawer"
38-
onPress={() => navRef.current.dispatch(DrawerActions.closeDrawer())}
35+
onPress={() => props.navigation.closeDrawer()}
3936
/>
4037
<DrawerItem
4138
label="Toggle drawer"
42-
onPress={() => navRef.current.dispatch(DrawerActions.toggleDrawer())}
39+
onPress={() => props.navigation.toggleDrawer()}
4340
/>
4441
</DrawerContentScrollView>
4542
);
@@ -58,7 +55,7 @@ function MyDrawer() {
5855

5956
export default function App() {
6057
return (
61-
<NavigationNativeContainer ref={navRef}>
58+
<NavigationNativeContainer>
6259
<MyDrawer />
6360
</NavigationNativeContainer>
6461
);

‎website/static/examples/next/focus-and-blur.js

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,14 @@ function SettingsScreen({ navigation }) {
1717
}
1818

1919
function ProfileScreen({ navigation }) {
20-
React.useEffect(() =>
21-
navigation.addListener('focus', () => alert('Screen was focused'))
20+
React.useEffect(
21+
() => navigation.addListener('focus', () => alert('Screen was focused')),
22+
[]
2223
);
2324

24-
React.useEffect(() =>
25-
navigation.addListener('blur', () => alert('Screen was unfocused'))
25+
React.useEffect(
26+
() => navigation.addListener('blur', () => alert('Screen was unfocused')),
27+
[]
2628
);
2729

2830
return (

‎website/static/examples/next/material-bottom-tab-prevent-default.js

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import * as React from 'react';
2+
import { Text, View } from 'react-native';
3+
import { NavigationNativeContainer } from '@react-navigation/native';
4+
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
5+
6+
function HomeScreen({ navigation }) {
7+
navigation.addListener('tabPress', e => {
8+
// Prevent default behavior
9+
e.preventDefault();
10+
alert('Default behavior prevented');
11+
// Do something manually
12+
// ...
13+
});
14+
return (
15+
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
16+
<Text>Home!</Text>
17+
</View>
18+
);
19+
}
20+
21+
function SettingsScreen() {
22+
return (
23+
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
24+
<Text>Settings!</Text>
25+
</View>
26+
);
27+
}
28+
29+
const Tab = createMaterialBottomTabNavigator();
30+
31+
export default function App() {
32+
return (
33+
<NavigationNativeContainer>
34+
<Tab.Navigator>
35+
<Tab.Screen name="Home" component={HomeScreen} />
36+
<Tab.Screen name="Settings" component={SettingsScreen} />
37+
</Tab.Navigator>
38+
</NavigationNativeContainer>
39+
);
40+
}

‎website/static/examples/next/material-top-tab-custom-tab-bar.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ function MyTabBar({ state, descriptors, navigation, position }) {
3636
});
3737
};
3838
// modify inputRange for custom behavior
39-
const inputRange = [0, 1, 2];
39+
const inputRange = state.routes.map((_, i) => i);
4040
const opacity = Animated.interpolate(position, {
4141
inputRange,
4242
outputRange: inputRange.map(i => (i === index ? 1 : 0)),

‎website/static/examples/next/native-stack-push-pop.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import { NavigationNativeContainer } from '@react-navigation/native';
44
import { createNativeStackNavigator } from '@react-navigation/native-stack';
55
import { enableScreens } from 'react-native-screens';
66

7+
enableScreens();
8+
79
function HomeScreen({ navigation }) {
810
return (
911
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
@@ -46,7 +48,6 @@ function MyStack() {
4648
}
4749

4850
export default function App() {
49-
enableScreens();
5051
return (
5152
<NavigationNativeContainer>
5253
<MyStack />

‎website/static/examples/next/native-stack-with-options.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import { NavigationNativeContainer } from '@react-navigation/native';
44
import { createNativeStackNavigator } from '@react-navigation/native-stack';
55
import { enableScreens } from 'react-native-screens';
66

7+
enableScreens();
8+
79
function Home({ navigation }) {
810
return (
911
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
@@ -73,7 +75,6 @@ function MyStack() {
7375
}
7476

7577
export default function App() {
76-
enableScreens();
7778
return (
7879
<NavigationNativeContainer>
7980
<MyStack />

‎website/static/examples/next/simple-focus-and-blur.js

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,14 @@ function SettingsScreen({ navigation }) {
1616
}
1717

1818
function ProfileScreen({ navigation }) {
19-
React.useEffect(() =>
20-
navigation.addListener('focus', () => alert('Screen was focused'))
19+
React.useEffect(
20+
() => navigation.addListener('focus', () => alert('Screen was focused')),
21+
[]
2122
);
2223

23-
React.useEffect(() =>
24-
navigation.addListener('blur', () => alert('Screen was unfocused'))
24+
React.useEffect(
25+
() => navigation.addListener('blur', () => alert('Screen was unfocused')),
26+
[]
2527
);
2628

2729
return (

‎website/static/examples/next/simple-native-stack.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import { NavigationNativeContainer } from '@react-navigation/native';
44
import { createNativeStackNavigator } from '@react-navigation/native-stack';
55
import { enableScreens } from 'react-native-screens';
66

7+
enableScreens();
8+
79
function Home({ navigation }) {
810
return (
911
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
@@ -61,7 +63,6 @@ function MyStack() {
6163
}
6264

6365
export default function App() {
64-
enableScreens();
6566
return (
6667
<NavigationNativeContainer>
6768
<MyStack />

‎website/static/js/snack.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const DEPS_VERSIONS = {
1111
'@react-navigation/native@^5.0.0-alpha.18',
1212
'@react-navigation/bottom-tabs@^5.0.0-alpha.25',
1313
'@react-navigation/drawer@^5.0.0-alpha.27',
14-
'@react-navigation/material-bottom-tabs@^5.0.0-alpha.24',
14+
'@react-navigation/material-bottom-tabs@^5.0.0-alpha.35',
1515
'@react-navigation/material-top-tabs@^5.0.0-alpha.22',
1616
'@react-navigation/native-stack@^5.0.0-alpha.16',
1717
'@react-navigation/stack@^5.0.0-alpha.43',

0 commit comments

Comments
 (0)