Skip to content

Commit a31a8d2

Browse files
chnirtchnirt
committed
Add useNavigation with version5
1 parent 0ba29d4 commit a31a8d2

File tree

15 files changed

+245
-158
lines changed

15 files changed

+245
-158
lines changed

‎README.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,3 +62,7 @@
6262
15. Logo App
6363

6464
- https://dribbble.com/shots/6365319-s-chat-bubbles-logo
65+
66+
16. Disable Rotate
67+
68+
- https://aboutreact.com/react-native-disable-screen-rotation/

‎android/app/src/main/AndroidManifest.xml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
android:name=".MainActivity"
1515
android:label="@string/app_name"
1616
android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
17+
android:screenOrientation="portrait"
1718
android:windowSoftInputMode="adjustResize">
1819
<intent-filter>
1920
<action android:name="android.intent.action.MAIN" />

‎ios/chnirtnavigation5.xcodeproj/project.xcworkspace/contents.xcworkspacedata‎

Lines changed: 7 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎ios/chnirtnavigation5.xcodeproj/project.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
3+
<plist version="1.0">
4+
<dict>
5+
<key>IDEDidComputeMac32BitWarning</key>
6+
<true/>
7+
</dict>
8+
</plist>

‎ios/chnirtnavigation5/Info.plist‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,8 +67,6 @@
6767
<key>UISupportedInterfaceOrientations</key>
6868
<array>
6969
<string>UIInterfaceOrientationPortrait</string>
70-
<string>UIInterfaceOrientationLandscapeLeft</string>
71-
<string>UIInterfaceOrientationLandscapeRight</string>
7270
</array>
7371
<key>UIViewControllerBasedStatusBarAppearance</key>
7472
<false/>

‎src/App.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {ApolloProvider} from '@apollo/react-hooks';
1313
import InitNavigator from './navigation/InitNavigator';
1414
import ContextProvider from './tools/context';
1515
import client from './tools/apollo';
16-
import firebase from './tools/firebase';
16+
import './tools/firebase';
1717

1818
function App() {
1919
return (

‎src/navigation/AuthNavigator.js‎

Lines changed: 34 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,35 @@
1-
import {createStackNavigator} from 'react-navigation-stack';
2-
import Login from '../screens/Login';
3-
import Register from '../screens/Register';
4-
import Forgot from '../screens/Forgot';
1+
import React from 'react';
2+
import {createStackNavigator} from '@react-navigation/stack';
53

6-
export default createStackNavigator(
7-
{
8-
Login,
9-
Register,
10-
Forgot,
11-
},
12-
{
13-
initialRouteName: 'Login',
14-
headerMode: 'none',
15-
},
16-
);
4+
import LoginScreen from '../screens/Login';
5+
import RegisterScreen from '../screens/Register';
6+
import ForgotScreen from '../screens/Forgot';
7+
8+
const Stack = createStackNavigator();
9+
10+
export default function AuthNavigator() {
11+
return (
12+
<Stack.Navigator
13+
initialRouteName="Login"
14+
headerMode="none"
15+
screenOptions={{
16+
headerTintColor: 'red',
17+
}}>
18+
<Stack.Screen
19+
name="Login"
20+
component={LoginScreen}
21+
options={{title: 'Login'}}
22+
/>
23+
<Stack.Screen
24+
name="Register"
25+
component={RegisterScreen}
26+
options={{title: 'Register'}}
27+
/>
28+
<Stack.Screen
29+
name="Forgot"
30+
component={ForgotScreen}
31+
options={{title: 'Forgot'}}
32+
/>
33+
</Stack.Navigator>
34+
);
35+
}

‎src/navigation/ContentDrawer.js‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, {useContext} from 'react';
22
import Animated from 'react-native-reanimated';
3-
import {Text, Button} from 'react-native';
3+
import {Text, Image, TouchableOpacity} from 'react-native';
4+
import SafeAreaView from 'react-native-safe-area-view';
45
import * as firebase from 'firebase';
56

67
// import {CTX} from '../tools/context';
@@ -37,9 +38,17 @@ export default function CustomDrawerContent({progress, ...rest}) {
3738
justifyContent: 'center',
3839
transform: [{translateX}],
3940
}}>
40-
<Text>Hello</Text>
41-
<Button onPress={_onClose} title="Close" color="#841584" />
42-
<Button onPress={_onLogout} title="Log out" color="#841584" />
41+
{/* <SafeAreaView style={{flex: 1}}> */}
42+
43+
<Image
44+
style={{width: 380, height: 150}}
45+
source={require('../assets/background.png')}
46+
/>
47+
<Text>Hello, Chin</Text>
48+
<TouchableOpacity onPress={_onLogout}>
49+
<Text style={{color: 'black'}}>Log out</Text>
50+
</TouchableOpacity>
51+
{/* </SafeAreaView> */}
4352
</Animated.View>
4453
);
4554
}

‎src/navigation/DashboardNavigator.js‎

Lines changed: 41 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,71 @@
11
import React from 'react';
22
import {createStackNavigator} from '@react-navigation/stack';
33
import FontAwesome5Icon from 'react-native-vector-icons/FontAwesome5';
4+
import {useNavigation} from '@react-navigation/native';
45

56
import TabNavigator from './TabNavigator';
7+
import PostScreen from '../screens/Post';
68

79
const Stack = createStackNavigator();
810

911
export default function DashboardStackNavigator(props) {
10-
const {toggleDrawer} = props;
12+
const navigation = useNavigation();
13+
const {toggleDrawer} = navigation;
1114

1215
return (
13-
<Stack.Navigator>
16+
<Stack.Navigator mode="modal">
1417
<Stack.Screen
15-
name="DashboardTabNavigator"
1618
options={{
17-
title: 'Chnirt',
18-
headerTitleAlign: 'left',
19-
headerStyle: {backgroundColor: '#fff'},
19+
headerShown: false,
20+
}}
21+
// name="DashboardTabNavigator"
22+
// options={{
23+
// title: 'Chnirt',
24+
// headerTitleAlign: 'left',
25+
// headerStyle: {backgroundColor: '#fff'},
26+
// headerLeft: () => (
27+
// <FontAwesome5Icon
28+
// style={{paddingLeft: 20}}
29+
// name={'bars'}
30+
// size={24}
31+
// onPress={toggleDrawer}
32+
// />
33+
// ),
34+
// headerRight: () => (
35+
// <FontAwesome5Icon
36+
// style={{paddingRight: 20}}
37+
// name={'bell'}
38+
// size={24}
39+
// onPress={props => {
40+
// console.log(props);
41+
// }}
42+
// />
43+
// ),
44+
// }}
45+
component={TabNavigator}
46+
/>
47+
<Stack.Screen
48+
name="PostModal"
49+
options={{
50+
headerTitle: null,
2051
headerLeft: () => (
2152
<FontAwesome5Icon
2253
style={{paddingLeft: 20}}
23-
name={'bars'}
54+
name={'times'}
2455
size={24}
25-
onPress={toggleDrawer}
56+
onPress={() => navigation.goBack()}
2657
/>
2758
),
2859
headerRight: () => (
2960
<FontAwesome5Icon
3061
style={{paddingRight: 20}}
31-
name={'bell'}
62+
name={'paper-plane'}
3263
size={24}
3364
onPress={toggleDrawer}
3465
/>
3566
),
3667
}}
37-
children={() => <TabNavigator {...props} />}
68+
component={PostScreen}
3869
/>
3970
</Stack.Navigator>
4071
);

‎src/navigation/DrawerNavigator.js‎

Lines changed: 17 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,32 @@
11
import React from 'react';
22
import {createDrawerNavigator} from '@react-navigation/drawer';
3-
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
43

54
import DashboardNavigator from './DashboardNavigator';
65
import CustomDrawerContent from './ContentDrawer';
6+
import {primaryColor} from '../theme';
77

88
const Drawer = createDrawerNavigator();
99

1010
export default function DrawerNavigator(props) {
1111
return (
1212
<Drawer.Navigator
13-
// headerLeft={() => (
14-
// <Icon
15-
// style={{paddingLeft: 10}}
16-
// onPress={() => navigation.openDrawer()}
17-
// name={Platform.OS === 'ios' ? 'ios-menu' : 'md-menu'}
18-
// size={30}
19-
// />
20-
// )}
21-
// headerMode="screen"
22-
// screenOptions={{
23-
// headerTintColor: 'white',
24-
// headerStyle: {backgroundColor: 'tomato'},
25-
// }}
26-
// drawerStyle={{
27-
// backgroundColor: '#c6cbef',
28-
// width: 240,
29-
// }}
13+
// drawerBackgroundColor="#c6cbef"
14+
drawerPosition="left" // "left", "right"
15+
drawerType="front" // "back", "front", "slide"
16+
drawerWidth={250}
17+
// edgeWidth
18+
hideStatusBar={true}
19+
statusBarAnimation="fade" // "fade", "none", "slide"
20+
keyboardDismissMode="none" // "none", "on-drag"
21+
// minSwipeDistance
22+
// overlayColor={0} // 0, 1
23+
// lazy={true} // true, false
24+
defaultNavigationOptions={{}}
25+
drawerOpenRoute="DrawerOpen"
26+
drawerCloseRoute="DrawerClose"
27+
drawerToggleRoute="DrawerToggle"
3028
drawerContentOptions={{
31-
// activeTintColor: primaryColor,
29+
activeTintColor: primaryColor,
3230
itemStyle: {marginVertical: 0},
3331
}}
3432
drawerContent={newProps => (

0 commit comments

Comments
 (0)