Skip to content

R
react-native-learning
Commit 86e31647 authored by Shahzad Bhatti's avatar Shahzad Bhatti
Browse files
Options

Google Sign In Working

parent 79e3657f
Hide whitespace changes
Inline Side-by-side
Showing with 628 additions and 220 deletions
App.tsx
View file @ 86e31647
import React, {useState} from 'react'; import React, {useState} from 'react';
import Lottie from 'lottie-react-native'; import Lottie from 'lottie-react-native';
import Home from './src/components/Home';
import Login from './src/components/Login';
import Signup from './src/components/Signup';
import Cart from './src/components/Cart';
import Icon from 'react-native-vector-icons/FontAwesome';
import ProductDetail from './src/components/ProductDetail';
import MedicineList from './src/components/MedicineList';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import CartProvider from './src/store/CartContext'; import CartProvider from './src/store/CartContext';
import {Colors} from './src/constants/Constants'; import RootNavigation from './src/navigation';
import AuthContextProvider from './src/store/AuthContext';
const Stack = createNativeStackNavigator();
function App() { function App() {
const [isLoading, setLoading] = useState(true); const [isLoading, setLoading] = useState(true);
setTimeout(() => { setTimeout(() => {
setLoading(false); setLoading(false);
}, 6000); }, 3000);
if (isLoading) { if (isLoading) {
return ( const img = require('./src/assets/splash_screen.json');
<Lottie return <Lottie source={img} autoPlay loop />;
source={require('./src/assets/splash_screen.json')}
autoPlay
loop
/>
);
} }
return ( return (
<CartProvider> <CartProvider>
<NavigationContainer> <AuthContextProvider>
<Stack.Navigator> <RootNavigation />
<Stack.Screen name="Home" component={Home} options={{title: ''}} /> </AuthContextProvider>
<Stack.Screen name="Signup" component={Signup} />
<Stack.Screen name="Login" component={Login} />
<Stack.Screen
name="MedicineList"
component={MedicineList}
options={{
title: 'Product List',
headerRight: () => (
<Icon
name="shopping-cart"
size={30}
color={Colors.primary500}></Icon>
),
}}
/>
<Stack.Screen
name="ProductDetail"
component={ProductDetail}
options={{
title: 'Product Detail',
headerRight: () => (
<Icon
name="shopping-cart"
size={30}
color={Colors.primary500}></Icon>
),
}}
/>
<Stack.Screen name="Cart" component={Cart} />
</Stack.Navigator>
</NavigationContainer>
</CartProvider> </CartProvider>
); );
} }
......
ios/testPrj/Info.plist
View file @ 86e31647
...@@ -20,6 +20,17 @@ ...@@ -20,6 +20,17 @@
<string>$(MARKETING_VERSION)</string> <string>$(MARKETING_VERSION)</string>
<key>CFBundleSignature</key> <key>CFBundleSignature</key>
<string>????</string> <string>????</string>
<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleTypeRole</key>
<string>Editor</string>
<key>CFBundleURLSchemes</key>
<array>
<string>com.googleusercontent.apps.84917563501-sa7pcjfh516f7ljlb6eln2tkpk4ko98f</string>
</array>
</dict>
</array>
<key>CFBundleVersion</key> <key>CFBundleVersion</key>
<string>$(CURRENT_PROJECT_VERSION)</string> <string>$(CURRENT_PROJECT_VERSION)</string>
<key>LSRequiresIPhoneOS</key> <key>LSRequiresIPhoneOS</key>
...@@ -37,20 +48,6 @@ ...@@ -37,20 +48,6 @@
</dict> </dict>
<key>NSLocationWhenInUseUsageDescription</key> <key>NSLocationWhenInUseUsageDescription</key>
<string></string> <string></string>
<key>UILaunchStoryboardName</key>
<string>LaunchScreen</string>
<key>UIRequiredDeviceCapabilities</key>
<array>
<string>armv7</string>
</array>
<key>UISupportedInterfaceOrientations</key>
<array>
<string>UIInterfaceOrientationPortrait</string>
<string>UIInterfaceOrientationLandscapeLeft</string>
<string>UIInterfaceOrientationLandscapeRight</string>
</array>
<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>
<key>UIAppFonts</key> <key>UIAppFonts</key>
<array> <array>
<string>AntDesign.ttf</string> <string>AntDesign.ttf</string>
...@@ -70,5 +67,19 @@ ...@@ -70,5 +67,19 @@
<string>Octicons.ttf</string> <string>Octicons.ttf</string>
<string>Zocial.ttf</string> <string>Zocial.ttf</string>
</array> </array>
<key>UILaunchStoryboardName</key>
<string>LaunchScreen</string>
<key>UIRequiredDeviceCapabilities</key>
<array>
<string>armv7</string>
</array>
<key>UISupportedInterfaceOrientations</key>
<array>
<string>UIInterfaceOrientationPortrait</string>
<string>UIInterfaceOrientationLandscapeLeft</string>
<string>UIInterfaceOrientationLandscapeRight</string>
</array>
<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>
</dict> </dict>
</plist> </plist>
package.json
View file @ 86e31647
...@@ -10,12 +10,15 @@ ...@@ -10,12 +10,15 @@
"test": "jest" "test": "jest"
}, },
"dependencies": { "dependencies": {
"@react-native-firebase/app": "^17.2.0", "@react-native-firebase/app": "^17.3.0",
"@react-native-google-signin/google-signin": "^9.0.2",
"@react-navigation/native": "^6.1.3", "@react-navigation/native": "^6.1.3",
"@react-navigation/native-stack": "^6.9.9", "@react-navigation/native-stack": "^6.9.9",
"lottie-react-native": "^5.1.5", "lottie-react-native": "^5.1.5",
"react": "18.2.0", "react": "18.2.0",
"react-devtools": "^4.27.2",
"react-native": "0.71.1", "react-native": "0.71.1",
"react-native-axios": "^0.17.1",
"react-native-safe-area-context": "^4.5.0", "react-native-safe-area-context": "^4.5.0",
"react-native-screens": "^3.19.0", "react-native-screens": "^3.19.0",
"react-native-vector-icons": "^9.2.0", "react-native-vector-icons": "^9.2.0",
......
src/components/Background.js
View file @ 86e31647
import React from 'react'; import React from 'react';
import {View, ImageBackground} from 'react-native'; import {View} from 'react-native';
const Background = ({ children }) => { const Background = ({children}) => {
return ( return <View style={{position: 'absolute', padding: 16}}>{children}</View>;
<View style={{ position: "absolute" }}>{children}</View> };
);
}
export default Background; export default Background;
\ No newline at end of file
src/components/Field.js deleted 100644 → 0
View file @ 79e3657f
import React from 'react';
import {TextInput} from 'react-native';
import {Colors} from '../constants/Constants';
const Field = props => {
return (
<TextInput
{...props}
style={{borderRadius: 100, color: Colors.darkGreen, paddingHorizontal: 10, width: '78%', backgroundColor: 'rgb(220,220, 220)', marginVertical: 10}}
placeholderTextColor={Colors.darkGreen}></TextInput>
);
};
export default Field;
\ No newline at end of file
src/components/Login.js deleted 100644 → 0
View file @ 79e3657f
import React from 'react';
import {View, Text, StyleSheet, TouchableOpacity} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import Background from './Background';
import Btn from './Button';
import {Colors} from '../constants/Constants';
import Field from './Field';
const Login = props => {
return (
<Background>
<View style={{alignItems: 'center', width: '100%'}}>
<Text
style={{
color: Colors.green,
fontSize: 32,
fontWeight: 'bold',
marginVertical: 20,
}}>
Sign In
</Text>
<View
style={{
height: 400,
width: 360,
paddingTop: 100,
alignItems: 'center',
}}>
<Field
placeholder="Email / Username"
keyboardType={'email-address'}
/>
<Field placeholder="Password" secureTextEntry={true} />
<View
style={{
alignItems: 'flex-end',
width: '78%',
paddingRight: 16,
marginBottom: 200,
}}>
<Text style={{color: Colors.darkGreen, fontWeight: 'bold', fontSize: 16}}>
Forgot Password ?
</Text>
</View>
<Btn
textColor="white"
bgColor={Colors.darkGreen}
btnLabel="Login"
Press={() => alert('Logged In')}
/>
<View
style={{
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
}}>
<Text style={{fontSize: 16, fontWeight: 'bold'}}>
Don't have an account ?{' '}
</Text>
<TouchableOpacity
onPress={() => props.navigation.navigate('Signup')}>
<Text
style={{color: Colors.darkGreen, fontWeight: 'bold', fontSize: 16}}>
Signup
</Text>
</TouchableOpacity>
</View>
<View style={styles.container}>
<TouchableOpacity style={styles.button}>
<Icon.Button name="facebook" style={styles.facebook}>
Login with Facebook
</Icon.Button>
</TouchableOpacity>
<TouchableOpacity style={styles.button}>
<Icon.Button name="google" style={styles.google}>
Login with Google
</Icon.Button>
</TouchableOpacity>
</View>
</View>
</View>
</Background>
);
};
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
justifyContent: 'space-between',
paddingHorizontal: 10,
},
button: {
paddingVertical: 10,
paddingHorizontal: 10,
borderRadius: 5,
},
buttonText: {
color: 'white',
fontWeight: 'bold',
},
facebook: {
backgroundColor: '#3b5998',
},
google: {
backgroundColor: '#ff3333',
},
});
export default Login;
src/components/Cart.js → src/components/screens/Cart.js
View file @ 86e31647
import React, {useContext, useState} from 'react'; import React, {useContext, useState} from 'react';
import {View, Text, StyleSheet, Button, Image} from 'react-native'; import {View, Text, StyleSheet, Button, Image} from 'react-native';
import {CartContext} from '../store/CartContext'; import {CartContext} from '../../store/CartContext';
const CartItem = ({item}) => { const CartItem = ({item}) => {
const {removeFromCart, updateQuantity} = useContext(CartContext); const {removeFromCart, updateQuantity} = useContext(CartContext);
...@@ -56,14 +57,13 @@ const Cart = () => { ...@@ -56,14 +57,13 @@ const Cart = () => {
const styles = StyleSheet.create({ const styles = StyleSheet.create({
cartContiner: { cartContiner: {
flex: 1, // flex: 1,
}, },
itemContainer: { itemContainer: {
flex: 0.5, // flex: 0.5,
padding: 10, padding: 10,
flexDirection: 'row', // flexDirection: 'row',
justifyContent: 'flex-start', // justifyContent: 'flex-start',
height: '10%',
}, },
imageContainer: { imageContainer: {
flex: 1, flex: 1,
......
src/components/Home.js → src/components/screens/Home.js
View file @ 86e31647
import React from 'react'; import React from 'react';
import {View, StyleSheet} from 'react-native'; import {View, StyleSheet} from 'react-native';
import Background from './Background'; import Background from '../Background';
import Btn from './Button'; import Btn from '../Button';
import {Colors} from '../constants/Constants'; import {Colors} from '../../constants/Constants';
const Home = props => { const Home = props => {
return ( return (
...@@ -20,12 +20,12 @@ const Home = props => { ...@@ -20,12 +20,12 @@ const Home = props => {
btnLabel="Signup" btnLabel="Signup"
Press={() => props.navigation.navigate('Signup')} Press={() => props.navigation.navigate('Signup')}
/> />
<Btn {/* <Btn
bgColor="white" bgColor="white"
textColor="blue" textColor="blue"
btnLabel="Products" btnLabel="Products"
Press={() => props.navigation.navigate('MedicineList')} Press={() => props.navigation.navigate('MedicineList')}
/> /> */}
</View> </View>
</Background> </Background>
); );
......
src/components/screens/Login.js 0 → 100644
View file @ 86e31647
import React, {useState, useEffect, useContext} from 'react';
import {View, Text, StyleSheet, TouchableOpacity, Alert} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import Background from '../Background';
import Btn from '../Button';
import {Colors} from '../../constants/Constants';
import Field from '../ui/Field';
import {useNavigation} from '@react-navigation/native';
import {googleLogin, login} from '../../util/auth';
import {AuthContext} from '../../store/AuthContext';
// import Button from '../ui/Button';
import {GoogleSignin} from '@react-native-google-signin/google-signin';
const Login = () => {
const navigation = useNavigation();
const authCtx = useContext(AuthContext);
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
useEffect(() => {
GoogleSignin.configure();
}, []);
const loginHandler = async () => {
try {
const res = await login(email, password);
authCtx.authenticate(res.data.idToken);
} catch (error) {
console.log(error);
Alert.alert('Signup Failed', 'Something went wrong!');
}
// navigation.navigate('MedicineList');
// Alert.alert('Logged In', `you are login as ${email} with ${password}`);
};
const googleLoginHandler = async () => {
try {
const res = await googleLogin();
console.log(res.idToken);
authCtx.authenticate(res.idToken);
} catch (error) {
console.log(error);
Alert.alert('Signup Failed', 'Something went wrong!');
}
// navigation.navigate('MedicineList');
};
const facebookLoginHandler = () => {
console.log('i am in facebookLoginHandler');
const result = googleLogin();
console.log(result);
};
return (
<Background>
<View style={styles.mainContainer}>
<View style={styles.formContainer}>
<Field
placeholder="Email / Username"
value={email}
onChangeText={setEmail}
keyboardType={'email-address'}
/>
<Field
placeholder="Password"
value={password}
onChangeText={setPassword}
secureTextEntry={true}
/>
<View style={styles.forgotContiner}>
<Text style={styles.forgotText}>Forgot Password ?</Text>
</View>
<Btn
textColor="white"
bgColor={Colors.darkGreen}
btnLabel="Login"
Press={loginHandler}
/>
<View style={styles.noAccountContiner}>
<Text style={styles.noAccText}>Don't have an account ?</Text>
<TouchableOpacity onPress={() => navigation.navigate('Signup')}>
<Text style={styles.sigupText}>Signup</Text>
</TouchableOpacity>
</View>
<View style={styles.socialLoginContainer}>
<TouchableOpacity style={styles.button}>
<Icon.Button
name="facebook"
style={styles.facebook}
// onPress={() => {
// // onFacebookButtonPress().then(() =>
// console.log('Signed in with Facebook!')
// // )
// }
>
Login with Facebook
</Icon.Button>
</TouchableOpacity>
<TouchableOpacity style={styles.button}>
<Icon.Button
name="google"
style={styles.google}
onPress={googleLoginHandler}>
Login with Google
</Icon.Button>
</TouchableOpacity>
</View>
</View>
</View>
</Background>
);
};
const styles = StyleSheet.create({
mainContainer: {alignItems: 'center', width: '100%'},
formContainer: {
height: 400,
width: 360,
paddingTop: 100,
alignItems: 'center',
},
forgotContiner: {
alignItems: 'flex-end',
width: '78%',
paddingRight: 16,
marginBottom: 200,
},
forgotText: {
color: Colors.darkGreen,
fontWeight: 'bold',
fontSize: 16,
},
socialLoginContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
paddingHorizontal: 10,
},
button: {
paddingVertical: 10,
paddingHorizontal: 10,
borderRadius: 5,
},
sigupText: {
color: Colors.darkGreen,
fontWeight: 'bold',
fontSize: 16,
},
buttonText: {
color: 'white',
fontWeight: 'bold',
},
noAccountContiner: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
},
noAccText: {fontSize: 16, fontWeight: 'bold'},
facebook: {
backgroundColor: '#3b5998',
},
google: {
backgroundColor: '#ff3333',
},
});
export default Login;
src/components/MedicineList.js → src/components/screens/MedicineList.js
View file @ 86e31647
...@@ -15,37 +15,37 @@ const items = [ ...@@ -15,37 +15,37 @@ const items = [
id: 1, id: 1,
name: 'Panadol', name: 'Panadol',
price: 18.0, price: 18.0,
image: require('../assets/images/products/panadol.png'), image: require('../../assets/images/products/panadol.png'),
}, },
{ {
id: 2, id: 2,
name: 'Amoxil 125mg Syrup', name: 'Amoxil 125mg Syrup',
price: 128.0, price: 128.0,
image: require('../assets/images/products/amoxil-syrup-125mg.jpg'), image: require('../../assets/images/products/amoxil-syrup-125mg.jpg'),
}, },
{ {
id: 3, id: 3,
name: 'Arinac Forte', name: 'Arinac Forte',
price: 50.0, price: 50.0,
image: require('../assets/images/products/arinac-forte.jpg'), image: require('../../assets/images/products/arinac-forte.jpg'),
}, },
{ {
id: 4, id: 4,
name: 'Telfast 120mg', name: 'Telfast 120mg',
price: 75.0, price: 75.0,
image: require('../assets/images/products/telfast-120mg.jpg'), image: require('../../assets/images/products/telfast-120mg.jpg'),
}, },
{ {
id: 5, id: 5,
name: 'Risek 40mg Tablet', name: 'Risek 40mg Tablet',
price: 120.0, price: 120.0,
image: require('../assets/images/products/risek-40mg.jpg'), image: require('../../assets/images/products/risek-40mg.jpg'),
}, },
{ {
id: 6, id: 6,
name: 'Coferb Cough Syrup', name: 'Coferb Cough Syrup',
price: 90.0, price: 90.0,
image: require('../assets/images/products/coferb-syp.jpg'), image: require('../../assets/images/products/coferb-syp.jpg'),
}, },
]; ];
......
src/components/ProductDetail.js → src/components/screens/ProductDetail.js
View file @ 86e31647
import React, {useContext, useState} from 'react'; import React, {useContext, useState} from 'react';
import {View, Text, Image, Button, StyleSheet} from 'react-native'; import {View, Text, Image, Button, StyleSheet} from 'react-native';
import {useNavigation} from '@react-navigation/native'; import {useNavigation} from '@react-navigation/native';
import {CartContext} from '../store/CartContext'; import {CartContext} from '../../store/CartContext';
import FlatButton from './ui/FlatButton'; import FlatButton from '../ui/FlatButton';
const ProductDetail = porps => { const ProductDetail = porps => {
const item = porps.route.params.item; const item = porps.route.params.item;
...@@ -18,10 +18,9 @@ const ProductDetail = porps => { ...@@ -18,10 +18,9 @@ const ProductDetail = porps => {
}; };
const handleAddToCart = () => { const handleAddToCart = () => {
addToCart({...item, quantity}); addToCart({...item, quantity});
navigation.navigate('ProductDetail'); navigation.navigate('MedicineList');
}; };
const incrementQuantity = () => { const incrementQuantity = () => {
setQuantity(prevQuantity => prevQuantity + 1); setQuantity(prevQuantity => prevQuantity + 1);
}; };
......
src/components/Signup.js → src/components/screens/Signup.js
View file @ 86e31647
import React from 'react'; import React, {useState, useContext} from 'react';
import {View, Text, StyleSheet, TouchableOpacity} from 'react-native'; import {View, Text, StyleSheet, TouchableOpacity, Alert} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome'; import Icon from 'react-native-vector-icons/FontAwesome';
import Background from './Background'; import Background from '../Background';
import Btn from './Button'; import Btn from '../Button';
import {Colors} from '../constants/Constants'; import {Colors} from '../../constants/Constants';
import Field from './Field'; import Field from '../ui/Field';
import {useNavigation} from '@react-navigation/native';
import {AuthContext} from '../../store/AuthContext';
import {signup} from '../../util/auth';
const Signup = () => {
const navigation = useNavigation();
const [firstName, setFirstName] = useState('');
const [lastName, setLastName] = useState('');
const [email, setEmail] = useState('');
const [confirmEmail, setConfirmEmail] = useState('');
const [password, setPassword] = useState('');
const [confirmPassword, setConfirmPassword] = useState('');
const [contact, setContact] = useState('');
const authCtx = useContext(AuthContext);
const submitHandler = async () => {
const emailIsValid = email.includes('@');
const passwordIsValid = password.length > 6;
const emailsAreEqual = email === confirmEmail;
const passwordsAreEqual = password === confirmPassword;
if (
!emailIsValid ||
!passwordIsValid ||
!emailsAreEqual ||
!passwordsAreEqual
) {
Alert.alert('Invalid input', 'Please check your entered credentials.');
return;
} else {
try {
const res = await signup(email, password);
authCtx.authenticate(res.data.idToken);
} catch (error) {
console.log(error);
Alert.alert('Signup Failed', 'Something went wrong!');
}
navigation.navigate('MedicineList');
}
};
const Signup = props => {
return ( return (
<Background> <Background>
<View style={{alignItems: 'center', width: '100%'}}> <View style={styles.mainContiner}>
<Text <Text style={styles.signupText}>Sign Up</Text>
style={{ <View style={styles.formContiner}>
color: Colors.green, <Field
fontSize: 32, placeholder="First Name"
fontWeight: 'bold', value={firstName}
marginTop: 10, onChangeText={setFirstName}
}}> />
Sign Up <Field
</Text> placeholder="Last Name"
<View value={lastName}
style={{ onChangeText={setLastName}
width: 360, />
alignItems: 'center',
}}>
<Field placeholder="First Name" />
<Field placeholder="Last Name" />
<Field <Field
placeholder="Email / Username" placeholder="Email / Username"
keyboardType={'email-address'} keyboardType={'email-address'}
value={email}
onChangeText={setEmail}
/>
<Field
placeholder="Confirm Email"
keyboardType={'email-address'}
value={confirmEmail}
onChangeText={setConfirmEmail}
/>
<Field
placeholder="Password"
secureTextEntry={true}
value={password}
onChangeText={setPassword}
/>
<Field
placeholder="Confirm Password"
secureTextEntry={true}
value={confirmPassword}
onChangeText={setConfirmPassword}
/>
<Field
placeholder="Contact Number"
keyboardType={'default'}
value={contact}
onChangeText={setContact}
/> />
<Field placeholder="Contact Number" keyboardType={'default'} />
<Field placeholder="Password" secureTextEntry={true} />
<Field placeholder="Confirm Password" secureTextEntry={true} />
<View <View
style={{ style={{
display: 'flex', display: 'flex',
...@@ -44,10 +102,7 @@ const Signup = props => { ...@@ -44,10 +102,7 @@ const Signup = props => {
textColor="white" textColor="white"
bgColor={Colors.darkGreen} bgColor={Colors.darkGreen}
btnLabel="Signup" btnLabel="Signup"
Press={() => { Press={submitHandler}
alert('Accoutn created');
props.navigation.navigate('Login');
}}
/> />
<View <View
style={{ style={{
...@@ -58,15 +113,18 @@ const Signup = props => { ...@@ -58,15 +113,18 @@ const Signup = props => {
<Text style={{fontSize: 16, fontWeight: 'bold'}}> <Text style={{fontSize: 16, fontWeight: 'bold'}}>
Already have an account ?{' '} Already have an account ?{' '}
</Text> </Text>
<TouchableOpacity <TouchableOpacity onPress={() => navigation.navigate('Login')}>
onPress={() => props.navigation.navigate('Login')}>
<Text <Text
style={{color: Colors.darkGreen, fontWeight: 'bold', fontSize: 16}}> style={{
color: Colors.darkGreen,
fontWeight: 'bold',
fontSize: 16,
}}>
Login Login
</Text> </Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
<View style={styles.container}> <View style={styles.socialContainer}>
<TouchableOpacity style={styles.button}> <TouchableOpacity style={styles.button}>
<Icon.Button name="facebook" style={styles.facebook}> <Icon.Button name="facebook" style={styles.facebook}>
Login with Facebook Login with Facebook
...@@ -84,9 +142,19 @@ const Signup = props => { ...@@ -84,9 +142,19 @@ const Signup = props => {
); );
}; };
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { mainContiner: {alignItems: 'center', width: '100%', padding: 10},
signupText: {
color: Colors.green,
fontSize: 32,
fontWeight: 'bold',
marginTop: 10,
},
formContiner: {
width: 360,
alignItems: 'center',
},
socialContainer: {
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'space-between', justifyContent: 'space-between',
paddingHorizontal: 10, paddingHorizontal: 10,
......
src/components/ui/Field.js 0 → 100644
View file @ 86e31647
import React from 'react';
import {StyleSheet, TextInput} from 'react-native';
import {Colors} from '../../constants/Constants';
const Field = props => {
return (
<TextInput
{...props}
style={styles.textInput}
placeholderTextColor={Colors.darkGreen}
/>
);
};
const styles = StyleSheet.create({
textInput: {
borderRadius: 100,
color: Colors.darkGreen,
paddingHorizontal: 10,
height: 40,
width: '78%',
backgroundColor: 'rgb(220,220, 220)',
marginVertical: 10,
},
});
export default Field;
src/constants/APIs.js 0 → 100644
View file @ 86e31647
export const API_KEY = 'AIzaSyCfHdM8i97bYT4YQgC52sUWmkef2uZsxWA';
export const FB_APP_ID = '921156519073351';
\ No newline at end of file
src/navigation/AuthStack.js 0 → 100644
View file @ 86e31647
import React, {useContext} from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import Cart from '../components/screens/Cart';
import MedicineList from '../components/screens/MedicineList';
import ProductDetail from '../components/screens/ProductDetail';
import Icon from 'react-native-vector-icons/FontAwesome';
import {Colors} from '../constants/Constants';
import {AuthContext} from '../store/AuthContext';
const Stack = createNativeStackNavigator();
export default function AuthStack() {
const authCtx = useContext(AuthContext);
return (
<NavigationContainer>
<Stack.Navigator
screenOptions={{
headerShown: true,
tabBarStyle: {backgroundColor: '#0e1529'},
}}
sceneContainerStyle={{backgroundColor: '#0e1529'}}>
<Stack.Screen
name="MedicineList"
component={MedicineList}
options={{
title: 'Product List',
headerRight: () => {
return (
<Icon
onPress={authCtx.logout}
name="sign-out"
size={30}
color={Colors.primary500}></Icon>
);
},
}}
/>
<Stack.Screen
name="ProductDetail"
component={ProductDetail}
options={{
title: 'Product Detail',
headerRight: () => (
<Icon
name="shopping-cart"
size={30}
color={Colors.primary500}></Icon>
),
}}
/>
<Stack.Screen name="Cart" component={Cart} />
</Stack.Navigator>
</NavigationContainer>
);
}
src/navigation/UnauthStack.js 0 → 100644
View file @ 86e31647
import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import Home from '../components/screens/Home';
import Signup from '../components/screens/Signup';
import Login from '../components/screens/Login';
const Stack = createNativeStackNavigator();
export default function UnauthStack() {
return (
<NavigationContainer>
<Stack.Navigator
screenOptions={{
cardStyle: {
backgroundColor: '#0e1529',
},
headerShown: false,
}}>
<Stack.Screen name="Home" component={Home} />
<Stack.Screen name="Signup" component={Signup} />
<Stack.Screen name="Login" component={Login} />
</Stack.Navigator>
</NavigationContainer>
);
}
src/navigation/index.js 0 → 100644
View file @ 86e31647
import React, {useContext} from 'react';
import AuthStack from './AuthStack';
import UnauthStack from './UnauthStack';
import {AuthContext} from '../store/AuthContext';
export default function RootNavigation() {
const authCtx = useContext(AuthContext);
return authCtx.isAuthenticated == false ? <UnauthStack /> : <AuthStack />;
// return user ? <UserStack /> : <AuthStack />;
}
src/store/AuthContext.js 0 → 100644
View file @ 86e31647
import {createContext, useState} from 'react';
export const AuthContext = createContext({
token: '',
isAuthenticated: false,
authenticate: token => {},
logout: () => {},
});
function AuthContextProvider({children}) {
const [authToken, setAuthToken] = useState(null);
const value = {
token: authToken,
isAuthenticated: !!authToken,
authenticate: token => {
setAuthToken(token);
},
logout: () => {
setAuthToken(null);
},
};
return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
}
export default AuthContextProvider;
src/util/auth.js 0 → 100644
View file @ 86e31647
import axios from 'react-native-axios';
import {
GoogleSignin,
statusCodes,
} from '@react-native-google-signin/google-signin';
// import auth from '@react-native-firebase/auth';
// import {LoginManager, AccessToken} from 'react-native-fbsdk-next';
// import axios from 'axios';
import {API_KEY} from '../constants/APIs';
export const signup = (email, password) => {
const url = `https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=${API_KEY}`;
return axios.post(url, {
email,
password,
returnSecureToken: true,
});
};
export const login = (email, password) => {
const url = `https://identitytoolkit.googleapis.com/v1/accounts:signInWithPassword?key=${API_KEY}`;
return axios.post(url, {
email,
password,
returnSecureToken: true,
});
};
export const googleLogin = async () => {
try {
GoogleSignin.signOut();
await GoogleSignin.hasPlayServices();
const userInfo = await GoogleSignin.signIn();
// this.setState({userInfo});
// console.log(userInfo);
return userInfo;
} catch (error) {
if (error.code === statusCodes.SIGN_IN_CANCELLED) {
// user cancelled the login flow
} else if (error.code === statusCodes.IN_PROGRESS) {
// operation (e.g. sign in) is in progress already
} else if (error.code === statusCodes.PLAY_SERVICES_NOT_AVAILABLE) {
// play services not available or outdated
} else {
// some other error happened
}
}
};
// export const onFacebookButtonPress = async () => {
// // // Attempt login with permissions
// // const result = await LoginManager.logInWithPermissions([
// // 'public_profile',
// // 'email',
// // ]);
// // if (result.isCancelled) {
// // throw 'User cancelled the login process';
// // }
// // // Once signed in, get the users AccesToken
// // const data = await AccessToken.getCurrentAccessToken();
// // if (!data) {
// // throw 'Something went wrong obtaining access token';
// // }
// // // Create a Firebase credential with the AccessToken
// // const facebookCredential = auth.FacebookAuthProvider.credential(
// // data.accessToken,
// // );
// // // Sign-in the user with the credential
// // return auth().signInWithCredential(facebookCredential);
// };
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment