Skip to content

Commit 7f5e946

Browse files
mdroskacperkapusciak
mdros
and
kacperkapusciak
authored
Add Snack links (#1213)
* Add snacks in params section * More snacks * More snacks * Improve snacks * Add conditional screens snack * Add advancade conditional screns snack * Apply code review * Add hiding tabbar snack * Add status bar snack * Add multiple drawers snack * Add custom android back button snack * Add navigation init snack * Add snacks to v7 docs * State persistance snack * Add more examples and group api reference snack * Add example to screen options * Update redux-devtools link * Add snack to screen-options * Add screen-options-group snack * Add screen-options-navigator snack * Add route-prop snack * Apply code review suggestions * chore: fix stack type imports * fix: fix redux-dev-tools links * docs: add snacks from 6.x to 7.x * Update conditional-screens example * Fix focus-status-bar * Fix nesting and params examples * Update params-nested-navigators * Cleanup screen-options-navigator * Remove nesting example from v5 Groups didn't exist back in v5 * Emphasize stack nesting in hiding-tabbar * Remove redundant snack * Update nesting-navigators * Emphasize stack nesting * Emphasize stack nesting * Emphasize stack nesting * Remove useLegacyImplementation from v5 snacks --------- Co-authored-by: kacperkapusciak <kacper.kapusciak@swmansion.com>
1 parent 5368a0e commit 7f5e946

96 files changed

Lines changed: 3163 additions & 90 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎blog/2020-02-06-react-navigation-5.0.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@ We also have JSDoc for the built-in methods and options, so you get their descri
102102

103103
### Redux DevTools integration
104104

105-
If you use [React Native Debugger](https://github.com/jhen0409/react-native-debugger) or [Redux Devtools Extension](https://github.com/zalmoxisus/redux-devtools-extension), you can see navigation actions in the devtools along with the current navigation state. It also supports time-travel debugging!
105+
If you use [React Native Debugger](https://github.com/jhen0409/react-native-debugger) or [Redux Devtools Extension](https://github.com/reduxjs/redux-devtools), you can see navigation actions in the devtools along with the current navigation state. It also supports time-travel debugging!
106106

107107
![Redux Devtools in action](/assets/blog/announcing-5.0/redux-devtools.gif)
108108

‎static/examples/5.x/conditional-screens-advanced.js‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
import * as React from 'react';
2+
import {
3+
Text,
4+
TextInput,
5+
View,
6+
Button,
7+
ActivityIndicator,
8+
StyleSheet,
9+
} from 'react-native';
10+
import { NavigationContainer } from '@react-navigation/native';
11+
import { createStackNavigator } from '@react-navigation/stack';
12+
13+
const Stack = createStackNavigator();
14+
15+
const styles = StyleSheet.create({
16+
input: {
17+
height: 40,
18+
margin: 12,
19+
borderWidth: 1,
20+
padding: 10,
21+
},
22+
});
23+
24+
function SplashScreen() {
25+
return (
26+
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
27+
<Text>Getting token...</Text>
28+
<ActivityIndicator size="large" />
29+
</View>
30+
);
31+
}
32+
33+
function HomeScreen() {
34+
return (
35+
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
36+
<Text>Home Screen</Text>
37+
</View>
38+
);
39+
}
40+
41+
function SimpleSignInScreen({ navigation, route }) {
42+
const [email, setEmail] = React.useState('');
43+
const [password, setPassword] = React.useState('');
44+
const { setUserToken } = route.params;
45+
46+
return (
47+
<View>
48+
<Text>Email</Text>
49+
<TextInput style={styles.input} onChangeText={setEmail} />
50+
<Text>Password</Text>
51+
<TextInput
52+
style={styles.input}
53+
onChangeText={setPassword}
54+
placeholder="Password"
55+
secureTextEntry={true}
56+
/>
57+
<Button title="Sign Up" onPress={() => setUserToken('token')} />
58+
</View>
59+
);
60+
}
61+
62+
export default function App() {
63+
const [isLoading, setIsLoading] = React.useState(true);
64+
const [userToken, setUserToken] = React.useState(null);
65+
66+
const getUserToken = async () => {
67+
// testing purposes
68+
const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
69+
try {
70+
// custom logic
71+
await sleep(2000);
72+
const token = null;
73+
setUserToken(token);
74+
} finally {
75+
setIsLoading(false);
76+
}
77+
};
78+
79+
React.useEffect(() => {
80+
getUserToken();
81+
}, []);
82+
83+
if (isLoading) {
84+
// We haven't finished checking for the token yet
85+
return <SplashScreen />;
86+
}
87+
88+
return (
89+
<NavigationContainer>
90+
<Stack.Navigator>
91+
{userToken == null ? (
92+
// No token found, user isn't signed in
93+
<Stack.Screen
94+
name="SignIn"
95+
component={SimpleSignInScreen}
96+
options={{
97+
title: 'Sign in',
98+
}}
99+
initialParams={{ setUserToken }}
100+
/>
101+
) : (
102+
// User is signed in
103+
<Stack.Screen name="Home" component={HomeScreen} />
104+
)}
105+
</Stack.Navigator>
106+
</NavigationContainer>
107+
);
108+
}

‎static/examples/5.x/conditional-screens.js‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import * as React from 'react';
2+
import { View } from 'react-native';
3+
import { NavigationContainer } from '@react-navigation/native';
4+
import { createStackNavigator } from '@react-navigation/stack';
5+
6+
const Stack = createStackNavigator();
7+
8+
const getIsSignedIn = () => {
9+
// custom logic
10+
return true;
11+
};
12+
13+
export default function App() {
14+
const isSignedIn = getIsSignedIn();
15+
16+
return (
17+
<NavigationContainer>
18+
<Stack.Navigator>
19+
{isSignedIn ? (
20+
<>
21+
<Stack.Screen name="Home" component={HomeScreen} />
22+
<Stack.Screen name="Profile" component={ProfileScreen} />
23+
<Stack.Screen name="Settings" component={SettingsScreen} />
24+
</>
25+
) : (
26+
<>
27+
<Stack.Screen name="SignIn" component={SignInScreen} />
28+
<Stack.Screen name="SignUp" component={SignUpScreen} />
29+
</>
30+
)}
31+
</Stack.Navigator>
32+
</NavigationContainer>
33+
);
34+
}
35+
36+
function HomeScreen() {
37+
return <View />;
38+
}
39+
40+
function ProfileScreen() {
41+
return <View />;
42+
}
43+
44+
function SettingsScreen() {
45+
return <View />;
46+
}
47+
48+
function SignInScreen() {
49+
return <View />;
50+
}
51+
52+
function SignUpScreen() {
53+
return <View />;
54+
}

‎static/examples/5.x/custom-android-back-button.js‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
import * as React from 'react';
2+
import {
3+
Pressable,
4+
Text,
5+
View,
6+
Button,
7+
BackHandler,
8+
StyleSheet,
9+
} from 'react-native';
10+
import { NavigationContainer } from '@react-navigation/native';
11+
import { useFocusEffect } from '@react-navigation/native';
12+
import { createStackNavigator } from '@react-navigation/stack';
13+
14+
const Stack = createStackNavigator();
15+
16+
const listData = [{ key: 'Apple' }, { key: 'Orange' }, { key: 'Carrot' }];
17+
18+
function ScreenWithCustomBackBehavior() {
19+
const [selected, setSelected] = React.useState(listData[0].key);
20+
const [isSelectionModeEnabled, setIsSelectionModeEnabled] =
21+
React.useState(false);
22+
23+
useFocusEffect(
24+
React.useCallback(() => {
25+
const onBackPress = () => {
26+
if (isSelectionModeEnabled) {
27+
setIsSelectionModeEnabled(false);
28+
return true;
29+
} else {
30+
return false;
31+
}
32+
};
33+
34+
const subscription = BackHandler.addEventListener(
35+
'hardwareBackPress',
36+
onBackPress
37+
);
38+
39+
return () => subscription.remove();
40+
}, [isSelectionModeEnabled])
41+
);
42+
43+
return (
44+
<View style={styles.container}>
45+
{listData.map((item) => (
46+
<>
47+
{isSelectionModeEnabled ? (
48+
<Pressable
49+
onPress={() => {
50+
setSelected(item.key);
51+
}}
52+
style={{
53+
textDecorationLine: item.key === selected ? 'underline' : '',
54+
}}
55+
>
56+
<Text
57+
style={{
58+
textDecorationLine: item.key === selected ? 'underline' : '',
59+
...styles.text,
60+
}}
61+
>
62+
{item.key}
63+
</Text>
64+
</Pressable>
65+
) : (
66+
<Text style={styles.text}>
67+
{item.key === selected ? 'Selected: ' : ''}
68+
{item.key}
69+
</Text>
70+
)}
71+
</>
72+
))}
73+
<Button
74+
title="Toggle selection mode"
75+
onPress={() => setIsSelectionModeEnabled(!isSelectionModeEnabled)}
76+
/>
77+
<Text>Selection mode: {isSelectionModeEnabled ? 'ON' : 'OFF'}</Text>
78+
</View>
79+
);
80+
}
81+
82+
export default function App() {
83+
return (
84+
<NavigationContainer>
85+
<Stack.Navigator>
86+
<Stack.Screen
87+
name="CustomScreen"
88+
component={ScreenWithCustomBackBehavior}
89+
/>
90+
</Stack.Navigator>
91+
</NavigationContainer>
92+
);
93+
}
94+
95+
const styles = StyleSheet.create({
96+
container: {
97+
flex: 1,
98+
alignItems: 'center',
99+
justifyContent: 'center',
100+
},
101+
text: {
102+
fontSize: 20,
103+
marginBottom: 20,
104+
},
105+
});

‎static/examples/5.x/focus-status-bar.js‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
import * as React from 'react';
2+
import { View, Text, StatusBar, Button, StyleSheet } from 'react-native';
3+
import { useIsFocused } from '@react-navigation/native';
4+
import { NavigationContainer } from '@react-navigation/native';
5+
import { createStackNavigator } from '@react-navigation/stack';
6+
import {
7+
SafeAreaProvider,
8+
useSafeAreaInsets,
9+
} from 'react-native-safe-area-context';
10+
11+
function FocusAwareStatusBar(props) {
12+
const isFocused = useIsFocused();
13+
14+
return isFocused ? <StatusBar {...props} /> : null;
15+
}
16+
17+
function Screen1({ navigation }) {
18+
const insets = useSafeAreaInsets();
19+
20+
return (
21+
<View
22+
style={[
23+
styles.container,
24+
{
25+
backgroundColor: '#6a51ae',
26+
paddingTop: insets.top,
27+
paddingBottom: insets.bottom,
28+
paddingLeft: insets.left,
29+
paddingRight: insets.right,
30+
},
31+
]}
32+
>
33+
<FocusAwareStatusBar barStyle="light-content" backgroundColor="#6a51ae" />
34+
<Text style={{ color: '#fff' }}>Light Screen</Text>
35+
<Button
36+
title="Next screen"
37+
onPress={() => navigation.navigate('Screen2')}
38+
color="#fff"
39+
/>
40+
</View>
41+
);
42+
}
43+
44+
function Screen2({ navigation }) {
45+
const insets = useSafeAreaInsets();
46+
47+
return (
48+
<View
49+
style={[
50+
styles.container,
51+
{
52+
backgroundColor: '#ecf0f1',
53+
paddingTop: insets.top,
54+
paddingBottom: insets.bottom,
55+
paddingLeft: insets.left,
56+
paddingRight: insets.right,
57+
},
58+
]}
59+
>
60+
<FocusAwareStatusBar barStyle="dark-content" backgroundColor="#ecf0f1" />
61+
<Text>Dark Screen</Text>
62+
<Button
63+
title="Next screen"
64+
onPress={() => navigation.navigate('Screen1')}
65+
/>
66+
</View>
67+
);
68+
}
69+
70+
const Stack = createStackNavigator();
71+
72+
export default function App() {
73+
return (
74+
<SafeAreaProvider>
75+
<NavigationContainer>
76+
<Stack.Navigator screenOptions={{ headerShown: false }}>
77+
<Stack.Screen name="Screen1" component={Screen1} />
78+
<Stack.Screen name="Screen2" component={Screen2} />
79+
</Stack.Navigator>
80+
</NavigationContainer>
81+
</SafeAreaProvider>
82+
);
83+
}
84+
85+
const styles = StyleSheet.create({
86+
container: {
87+
flex: 1,
88+
justifyContent: 'center',
89+
alignItems: 'center',
90+
},
91+
});

0 commit comments

Comments
 (0)