Skip to content

Commit 0e00f47

Browse files
kacperkapusciakkacperkapusciak
committed
docs: add snacks to v7 docs
1 parent ac05c73 commit 0e00f47

File tree

106 files changed

+6206
-0
lines changed

Some content is hidden

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

106 files changed

+6206
-0
lines changed

‎src/SnackHelpers.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,25 @@ const DEPS_VERSIONS = {
4747
'@react-navigation/[email protected]',
4848
'@react-navigation/[email protected]',
4949
],
50+
'7': [
51+
'@expo/vector-icons@*',
52+
'@react-native-community/masked-view@*',
53+
'react-native-gesture-handler@*',
54+
'react-native-pager-view@*',
55+
'react-native-paper@^4.7.2',
56+
'react-native-reanimated@*',
57+
'react-native-safe-area-context@*',
58+
'react-native-screens@*',
59+
'react-native-tab-view@^3.0.0',
60+
'@react-navigation/[email protected]',
61+
'@react-navigation/[email protected]',
62+
'@react-navigation/[email protected]',
63+
'@react-navigation/[email protected]',
64+
'@react-navigation/[email protected]',
65+
'@react-navigation/[email protected]',
66+
'@react-navigation/[email protected]',
67+
'@react-navigation/[email protected]',
68+
],
5069
next: [],
5170
};
5271

‎static/examples/7.x/animated-drawer-content.js‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import * as React from 'react';
2+
import { View, Text } from 'react-native';
3+
import { NavigationContainer } from '@react-navigation/native';
4+
import {
5+
createDrawerNavigator,
6+
DrawerContentScrollView,
7+
DrawerItemList,
8+
DrawerItem,
9+
useDrawerProgress,
10+
} from '@react-navigation/drawer';
11+
import Animated from 'react-native-reanimated';
12+
13+
function Feed() {
14+
return (
15+
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
16+
<Text>Feed Screen</Text>
17+
</View>
18+
);
19+
}
20+
21+
function Article() {
22+
return (
23+
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
24+
<Text>Article Screen</Text>
25+
</View>
26+
);
27+
}
28+
29+
function CustomDrawerContent(props) {
30+
const progress = useDrawerProgress();
31+
32+
const translateX = Animated.interpolateNode(progress, {
33+
inputRange: [0, 1],
34+
outputRange: [-100, 0],
35+
});
36+
37+
return (
38+
<DrawerContentScrollView {...props}>
39+
<Animated.View style={{ transform: [{ translateX }] }}>
40+
<DrawerItemList {...props} />
41+
<DrawerItem label="Help" onPress={() => alert('Link to help')} />
42+
</Animated.View>
43+
</DrawerContentScrollView>
44+
);
45+
}
46+
47+
const Drawer = createDrawerNavigator();
48+
49+
function MyDrawer() {
50+
return (
51+
<Drawer.Navigator
52+
useLegacyImplementation
53+
drawerContent={(props) => <CustomDrawerContent {...props} />}
54+
>
55+
<Drawer.Screen name="Feed" component={Feed} />
56+
<Drawer.Screen name="Article" component={Article} />
57+
</Drawer.Navigator>
58+
);
59+
}
60+
61+
export default function App() {
62+
return (
63+
<NavigationContainer>
64+
<MyDrawer />
65+
</NavigationContainer>
66+
);
67+
}

‎static/examples/7.x/auth-flow.js‎

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
import * as React from 'react';
2+
import { Button, Text, TextInput, View } from 'react-native';
3+
import { NavigationContainer } from '@react-navigation/native';
4+
import { createStackNavigator } from '@react-navigation/stack';
5+
6+
const AuthContext = React.createContext();
7+
8+
function SplashScreen() {
9+
return (
10+
<View>
11+
<Text>Loading...</Text>
12+
</View>
13+
);
14+
}
15+
16+
function HomeScreen() {
17+
const { signOut } = React.useContext(AuthContext);
18+
19+
return (
20+
<View>
21+
<Text>Signed in!</Text>
22+
<Button title="Sign out" onPress={signOut} />
23+
</View>
24+
);
25+
}
26+
27+
function SignInScreen() {
28+
const [username, setUsername] = React.useState('');
29+
const [password, setPassword] = React.useState('');
30+
31+
const { signIn } = React.useContext(AuthContext);
32+
33+
return (
34+
<View>
35+
<TextInput
36+
placeholder="Username"
37+
value={username}
38+
onChangeText={setUsername}
39+
/>
40+
<TextInput
41+
placeholder="Password"
42+
value={password}
43+
onChangeText={setPassword}
44+
secureTextEntry
45+
/>
46+
<Button title="Sign in" onPress={() => signIn({ username, password })} />
47+
</View>
48+
);
49+
}
50+
51+
const Stack = createStackNavigator();
52+
53+
export default function App({ navigation }) {
54+
const [state, dispatch] = React.useReducer(
55+
(prevState, action) => {
56+
switch (action.type) {
57+
case 'RESTORE_TOKEN':
58+
return {
59+
...prevState,
60+
userToken: action.token,
61+
isLoading: false,
62+
};
63+
case 'SIGN_IN':
64+
return {
65+
...prevState,
66+
isSignout: false,
67+
userToken: action.token,
68+
};
69+
case 'SIGN_OUT':
70+
return {
71+
...prevState,
72+
isSignout: true,
73+
userToken: null,
74+
};
75+
}
76+
},
77+
{
78+
isLoading: true,
79+
isSignout: false,
80+
userToken: null,
81+
}
82+
);
83+
84+
React.useEffect(() => {
85+
// Fetch the token from storage then navigate to our appropriate place
86+
const bootstrapAsync = async () => {
87+
let userToken;
88+
89+
try {
90+
// Restore token stored in `SecureStore` or any other encrypted storage
91+
// userToken = await SecureStore.getItemAsync('userToken');
92+
} catch (e) {
93+
// Restoring token failed
94+
}
95+
96+
// After restoring token, we may need to validate it in production apps
97+
98+
// This will switch to the App screen or Auth screen and this loading
99+
// screen will be unmounted and thrown away.
100+
dispatch({ type: 'RESTORE_TOKEN', token: userToken });
101+
};
102+
103+
bootstrapAsync();
104+
}, []);
105+
106+
const authContext = React.useMemo(
107+
() => ({
108+
signIn: async (data) => {
109+
// In a production app, we need to send some data (usually username, password) to server and get a token
110+
// We will also need to handle errors if sign in failed
111+
// After getting token, we need to persist the token using `SecureStore` or any other encrypted storage
112+
// In the example, we'll use a dummy token
113+
114+
dispatch({ type: 'SIGN_IN', token: 'dummy-auth-token' });
115+
},
116+
signOut: () => dispatch({ type: 'SIGN_OUT' }),
117+
signUp: async (data) => {
118+
// In a production app, we need to send user data to server and get a token
119+
// We will also need to handle errors if sign up failed
120+
// After getting token, we need to persist the token using `SecureStore` or any other encrypted storage
121+
// In the example, we'll use a dummy token
122+
123+
dispatch({ type: 'SIGN_IN', token: 'dummy-auth-token' });
124+
},
125+
}),
126+
[]
127+
);
128+
129+
return (
130+
<AuthContext.Provider value={authContext}>
131+
<NavigationContainer>
132+
<Stack.Navigator>
133+
{state.isLoading ? (
134+
// We haven't finished checking for the token yet
135+
<Stack.Screen name="Splash" component={SplashScreen} />
136+
) : state.userToken == null ? (
137+
// No token found, user isn't signed in
138+
<Stack.Screen
139+
name="SignIn"
140+
component={SignInScreen}
141+
options={{
142+
title: 'Sign in',
143+
// When logging out, a pop animation feels intuitive
144+
animationTypeForReplace: state.isSignout ? 'pop' : 'push',
145+
}}
146+
/>
147+
) : (
148+
// User is signed in
149+
<Stack.Screen name="Home" component={HomeScreen} />
150+
)}
151+
</Stack.Navigator>
152+
</NavigationContainer>
153+
</AuthContext.Provider>
154+
);
155+
}

‎static/examples/7.x/basic-header-config.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import * as React from 'react';
2+
import { View, Text } from 'react-native';
3+
import { NavigationContainer } from '@react-navigation/native';
4+
import { createNativeStackNavigator } from '@react-navigation/native-stack';
5+
6+
const Stack = createNativeStackNavigator();
7+
8+
function HomeScreen() {
9+
return (
10+
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
11+
<Text>Home Screen</Text>
12+
</View>
13+
);
14+
}
15+
16+
function App() {
17+
return (
18+
<NavigationContainer>
19+
<Stack.Navigator>
20+
<Stack.Screen
21+
name="Home"
22+
component={HomeScreen}
23+
options={{ title: 'My home' }}
24+
/>
25+
</Stack.Navigator>
26+
</NavigationContainer>
27+
);
28+
}
29+
30+
export default App;

‎static/examples/7.x/bottom-tab-example.js‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import * as React from 'react';
2+
import { Text, View } from 'react-native';
3+
import { NavigationContainer } from '@react-navigation/native';
4+
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
5+
import { MaterialCommunityIcons } from '@expo/vector-icons';
6+
7+
function Feed() {
8+
return (
9+
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
10+
<Text>Feed!</Text>
11+
</View>
12+
);
13+
}
14+
15+
function Profile() {
16+
return (
17+
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
18+
<Text>Profile!</Text>
19+
</View>
20+
);
21+
}
22+
23+
function Notifications() {
24+
return (
25+
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
26+
<Text>Notifications!</Text>
27+
</View>
28+
);
29+
}
30+
31+
const Tab = createBottomTabNavigator();
32+
33+
function MyTabs() {
34+
return (
35+
<Tab.Navigator
36+
initialRouteName="Feed"
37+
screenOptions={{
38+
tabBarActiveTintColor: '#e91e63',
39+
}}
40+
>
41+
<Tab.Screen
42+
name="Feed"
43+
component={Feed}
44+
options={{
45+
tabBarLabel: 'Home',
46+
tabBarIcon: ({ color, size }) => (
47+
<MaterialCommunityIcons name="home" color={color} size={size} />
48+
),
49+
}}
50+
/>
51+
<Tab.Screen
52+
name="Notifications"
53+
component={Notifications}
54+
options={{
55+
tabBarLabel: 'Updates',
56+
tabBarIcon: ({ color, size }) => (
57+
<MaterialCommunityIcons name="bell" color={color} size={size} />
58+
),
59+
}}
60+
/>
61+
<Tab.Screen
62+
name="Profile"
63+
component={Profile}
64+
options={{
65+
tabBarLabel: 'Profile',
66+
tabBarIcon: ({ color, size }) => (
67+
<MaterialCommunityIcons name="account" color={color} size={size} />
68+
),
69+
}}
70+
/>
71+
</Tab.Navigator>
72+
);
73+
}
74+
75+
export default function App() {
76+
return (
77+
<NavigationContainer>
78+
<MyTabs />
79+
</NavigationContainer>
80+
);
81+
}

0 commit comments

Comments
 (0)