Skip to content

Commit 2844c87

Browse files
chnirtchnirt
committed
Add firebase
1 parent a31aa94 commit 2844c87

File tree

14 files changed

+899
-126
lines changed

14 files changed

+899
-126
lines changed

‎README.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,3 +54,7 @@
5454

5555
- https://icons8.com/ouch/search/network
5656
- https://www.freepik.com/free-vectors/illustrations
57+
58+
14. AddButton
59+
60+
- https://itnext.io/react-native-tab-bar-is-customizable-c3c37dcf711f

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
"apollo-client": "^2.6.8",
2525
"apollo-link": "^1.2.13",
2626
"apollo-link-http": "^1.5.16",
27+
"firebase": "^7.7.0",
2728
"formik": "^2.1.2",
2829
"graphql": "^14.5.8",
2930
"graphql-tag": "^2.10.1",

‎src/App.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +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';
1617

1718
function App() {
1819
return (

‎src/components/AddButton.js‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import {Animated, TouchableHighlight, View} from 'react-native';
33
// import Icon from '@expo/vector-icons/FontAwesome';
44
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
55

6+
import {primaryColor} from '../theme';
7+
68
const SIZE = 80;
79
class AddButton extends Component {
810
mode = new Animated.Value(0);
@@ -66,7 +68,7 @@ class AddButton extends Component {
6668
width: SIZE / 2,
6769
height: SIZE / 2,
6870
borderRadius: SIZE / 4,
69-
backgroundColor: '#48A2F8',
71+
backgroundColor: primaryColor,
7072
}}>
7173
<FontAwesome5 name="rocket" size={16} color="#F8F8F8" />
7274
</TouchableHighlight>
@@ -87,7 +89,7 @@ class AddButton extends Component {
8789
width: SIZE / 2,
8890
height: SIZE / 2,
8991
borderRadius: SIZE / 4,
90-
backgroundColor: '#48A2F8',
92+
backgroundColor: primaryColor,
9193
}}>
9294
<FontAwesome5 name="home" size={16} color="#F8F8F8" />
9395
</TouchableHighlight>
@@ -108,21 +110,21 @@ class AddButton extends Component {
108110
width: SIZE / 2,
109111
height: SIZE / 2,
110112
borderRadius: SIZE / 4,
111-
backgroundColor: '#48A2F8',
113+
backgroundColor: primaryColor,
112114
}}>
113115
<FontAwesome5 name="archive" size={16} color="#F8F8F8" />
114116
</TouchableHighlight>
115117
</Animated.View>
116118
<TouchableHighlight
117119
onPress={this.toggleView}
118-
underlayColor="#2882D8"
120+
underlayColor="#ff6699"
119121
style={{
120122
alignItems: 'center',
121123
justifyContent: 'center',
122124
width: SIZE,
123125
height: SIZE,
124126
borderRadius: SIZE / 2,
125-
backgroundColor: '#48A2F8',
127+
backgroundColor: primaryColor,
126128
}}>
127129
<Animated.View
128130
style={{

‎src/navigation/AuthLoadingNavigator.js‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,25 @@
11
import React, {useEffect, useContext} from 'react';
22
import {StyleSheet, View, ActivityIndicator, StatusBar} from 'react-native';
3+
import * as firebase from 'firebase';
34

4-
import {CTX} from '../tools/context';
5+
// import {CTX} from '../tools/context';
56

67
export default function AuthLoadingScreen(props) {
78
const {navigation} = props;
89
const {navigate} = navigation;
910

10-
const authContext = useContext(CTX);
11-
const {token} = authContext;
11+
// const authContext = useContext(CTX);
12+
// const {token} = authContext;
1213

1314
useEffect(() => {
1415
_bootstrapAsync();
1516
});
1617

1718
function _bootstrapAsync() {
18-
navigate(token ? 'Dashboard' : 'Auth');
19+
firebase.auth().onAuthStateChanged(user => {
20+
navigate(user ? 'Dashboard' : 'Auth');
21+
});
22+
// navigate(token ? 'Dashboard' : 'Auth');
1923
}
2024

2125
return (

‎src/navigation/ContentDrawer.js‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,26 @@
11
import React, {useContext} from 'react';
22
import Animated from 'react-native-reanimated';
33
import {Text, Button} from 'react-native';
4+
import * as firebase from 'firebase';
45

5-
import {CTX} from '../tools/context';
6+
// import {CTX} from '../tools/context';
67

78
export default function CustomDrawerContent({progress, ...rest}) {
89
const {navigation, closeDrawer} = rest;
910
const {navigate} = navigation;
1011

11-
const authContext = useContext(CTX);
12-
const {_logout} = authContext;
12+
// const authContext = useContext(CTX);
13+
// const {_logout} = authContext;
1314

1415
// const {loading, error, data} = useQuery(GET_GREETING);
1516
function _onClose() {
1617
closeDrawer();
1718
}
1819

1920
function _onLogout() {
20-
_logout();
21+
firebase.auth().signOut();
22+
// _logout();
23+
closeDrawer();
2124
navigate('Login');
2225
}
2326

‎src/navigation/DashboardNavigator.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@ export default function DashboardStackNavigator(props) {
2121
<FontAwesome5Icon
2222
style={{paddingLeft: 20}}
2323
name={'bars'}
24-
// color={'red'}
2524
size={24}
2625
onPress={toggleDrawer}
2726
/>
@@ -30,7 +29,6 @@ export default function DashboardStackNavigator(props) {
3029
<FontAwesome5Icon
3130
style={{paddingRight: 20}}
3231
name={'bell'}
33-
// color={'red'}
3432
size={24}
3533
onPress={toggleDrawer}
3634
/>

‎src/navigation/TabNavigator.js‎

Lines changed: 91 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -9,90 +9,104 @@ import Post from '../screens/Post';
99
import Notification from '../screens/Notification';
1010
import Profile from '../screens/Profile';
1111
import {AddButton} from '../components/AddButton';
12+
import {ImageBackground} from 'react-native';
1213

1314
const Tab = createBottomTabNavigator();
1415

1516
export default function TabNavigator(props) {
1617
return (
17-
<Tab.Navigator
18-
initialRouteName="Home"
19-
options={{
20-
// title: 'routeName',
21-
tabBarOnPress: ({navigation, defaultHandler}) => {
22-
console.log('New Tab Screen tabBarOnPress working');
23-
defaultHandler();
24-
},
25-
}}
26-
tabBarOnPress={({previousScene, scene, jumpToIndex}) => {
27-
const {route, index, focused} = scene;
28-
29-
if (focused) {
30-
navigation.state.params.scrollToTop();
31-
}
32-
jumpToIndex(0);
33-
}}
34-
tabBarOptions={{
35-
activeTintColor: '#161F3D',
36-
showLabel: false,
37-
}}>
38-
<Tab.Screen
39-
name="Home"
40-
options={{
41-
tabBarIcon: ({color, size}) => (
42-
<FontAwesome5 name={'home'} color={color} size={size} />
43-
),
44-
}}
45-
children={() => <Home {...props} />}
46-
/>
47-
<Tab.Screen
48-
name="Message"
49-
options={{
50-
tabBarIcon: ({color, size}) => (
51-
<FontAwesome5 name={'comments'} color={color} size={size} />
52-
),
53-
}}
54-
children={() => <Message {...props} />}
55-
/>
56-
<Tab.Screen
57-
name="Post"
18+
<ImageBackground
19+
style={{flex: 1}}
20+
source={require('../assets/background.png')}>
21+
<Tab.Navigator
22+
initialRouteName="Home"
5823
options={{
59-
tabBarIcon: ({color, size}) => (
60-
<AddButton />
61-
// <FontAwesome5
62-
// name={'plus-circle'}
63-
// // color={'#E9446A'}
64-
// size={44}
65-
// style={{
66-
// color: '#E9446A',
67-
// shadowColor: '#E9446A',
68-
// shadowOffset: {width: 0, height: 0},
69-
// shadowRadius: 10,
70-
// shadowOpacity: 0.3,
71-
// }}
72-
// />
73-
),
24+
// title: 'routeName',
25+
tabBarOnPress: ({navigation, defaultHandler}) => {
26+
console.log('New Tab Screen tabBarOnPress working');
27+
defaultHandler();
28+
},
7429
}}
75-
// children={() => <Post {...props} />}
76-
/>
77-
<Tab.Screen
78-
name="Notification"
79-
options={{
80-
tabBarIcon: ({color, size}) => (
81-
<FontAwesome5 name={'bell'} color={color} size={size} />
82-
),
83-
}}
84-
children={() => <Notification {...props} />}
85-
/>
86-
<Tab.Screen
87-
name="Profile"
88-
component={Profile}
89-
options={{
90-
tabBarIcon: ({color, size}) => (
91-
<FontAwesome5 name={'user'} color={color} size={size} />
92-
),
30+
tabBarOnPress={({previousScene, scene, jumpToIndex}) => {
31+
const {route, index, focused} = scene;
32+
33+
if (focused) {
34+
navigation.state.params.scrollToTop();
35+
}
36+
jumpToIndex(0);
9337
}}
94-
children={props => <Profile {...props} />}
95-
/>
96-
</Tab.Navigator>
38+
tabBarOptions={{
39+
activeTintColor: '#161F3D',
40+
showLabel: false,
41+
// style: {
42+
// backgroundColor: 'transparent',
43+
// borderTopWidth: 1,
44+
// borderTopColor: 'transparent',
45+
// position: 'absolute',
46+
// left: 0,
47+
// right: 0,
48+
// bottom: 0,
49+
// },
50+
}}>
51+
<Tab.Screen
52+
name="Home"
53+
options={{
54+
tabBarIcon: ({color, size}) => (
55+
<FontAwesome5 name={'home'} color={color} size={size} />
56+
),
57+
}}
58+
children={() => <Home {...props} />}
59+
/>
60+
<Tab.Screen
61+
name="Message"
62+
options={{
63+
tabBarIcon: ({color, size}) => (
64+
<FontAwesome5 name={'comments'} color={color} size={size} />
65+
),
66+
}}
67+
children={() => <Message {...props} />}
68+
/>
69+
<Tab.Screen
70+
name="Post"
71+
options={{
72+
tabBarIcon: ({color, size}) => (
73+
<AddButton />
74+
// <FontAwesome5
75+
// name={'plus-circle'}
76+
// // color={'#E9446A'}
77+
// size={44}
78+
// style={{
79+
// color: '#E9446A',
80+
// shadowColor: '#E9446A',
81+
// shadowOffset: {width: 0, height: 0},
82+
// shadowRadius: 10,
83+
// shadowOpacity: 0.3,
84+
// }}
85+
// />
86+
),
87+
}}
88+
// children={() => <Post {...props} />}
89+
/>
90+
<Tab.Screen
91+
name="Notification"
92+
options={{
93+
tabBarIcon: ({color, size}) => (
94+
<FontAwesome5 name={'bell'} color={color} size={size} />
95+
),
96+
}}
97+
children={() => <Notification {...props} />}
98+
/>
99+
<Tab.Screen
100+
name="Profile"
101+
component={Profile}
102+
options={{
103+
tabBarIcon: ({color, size}) => (
104+
<FontAwesome5 name={'user'} color={color} size={size} />
105+
),
106+
}}
107+
children={props => <Profile {...props} />}
108+
/>
109+
</Tab.Navigator>
110+
</ImageBackground>
97111
);
98112
}

‎src/screens/Login.js‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {
1212
} from 'react-native';
1313
import {Formik} from 'formik';
1414
import SafeAreaView from 'react-native-safe-area-view';
15+
import * as firebase from 'firebase';
1516

1617
import {CTX} from '../tools/context';
1718
import LoginSchema from '../validation/Login';
@@ -34,12 +35,17 @@ export default function LoginScreen(props) {
3435
const {email, password} = values;
3536
const accessToken = email + password;
3637

37-
if (email === 'trinhchinchin@gmail.com' && password === '123') {
38-
_authenticate(accessToken);
39-
navigate('Dashboard');
40-
} else {
41-
setErrorMessage('Email or Password is not correct.');
42-
}
38+
firebase
39+
.auth()
40+
.signInWithEmailAndPassword(email, password)
41+
.catch(error => setErrorMessage(error.message));
42+
43+
// if (email === 'trinhchinchin@gmail.com' && password === '123') {
44+
// _authenticate(accessToken);
45+
// navigate('Dashboard');
46+
// } else {
47+
// setErrorMessage('Email or Password is not correct.');
48+
// }
4349
}
4450

4551
function _navigateForgot() {
@@ -80,11 +86,11 @@ export default function LoginScreen(props) {
8086
<Text style={styles.greeting}>{'Welcome back.'}</Text>
8187

8288
<View style={styles.errorMessage}>
83-
<Text>{errorMessage}</Text>
89+
<Text style={styles.error}>{errorMessage}</Text>
8490
</View>
8591

8692
<Formik
87-
initialValues={{email: 'trinhchinchin@gmail.com', password: '123'}}
93+
initialValues={{email: 'trinhchinchin@gmail.com', password: '123456'}}
8894
validationSchema={LoginSchema}
8995
onSubmit={values => {
9096
_onLogin(values);

0 commit comments

Comments
 (0)