Skip to content

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

update changes and add social login buttons

parent 22074f26
Hide whitespace changes
Inline Side-by-side
Showing with 196 additions and 19 deletions
.gitignore
View file @ f724a1cc
......@@ -5,6 +5,7 @@
# Xcode
#
build/
.vscode
*.pbxuser
!default.pbxuser
*.mode1v3
......
android/app/build.gradle
View file @ f724a1cc
apply plugin: "com.android.application"
apply plugin: "com.facebook.react"
// project.ext.vectoricons = [
// iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf' ] // Name of the font files you want to copy
// ]
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
import com.android.build.OutputFile
/**
......
ios/Podfile.lock
View file @ f724a1cc
......@@ -391,6 +391,8 @@ PODS:
- RNScreens (3.19.0):
- React-Core
- React-RCTImage
- RNVectorIcons (9.2.0):
- React-Core
- SocketRocket (0.6.0)
- Yoga (1.14.0)
- YogaKit (1.18.1):
......@@ -458,6 +460,7 @@ DEPENDENCIES:
- React-runtimeexecutor (from `../node_modules/react-native/ReactCommon/runtimeexecutor`)
- ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
- RNScreens (from `../node_modules/react-native-screens`)
- RNVectorIcons (from `../node_modules/react-native-vector-icons`)
- Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
SPEC REPOS:
......@@ -552,6 +555,8 @@ EXTERNAL SOURCES:
:path: "../node_modules/react-native/ReactCommon"
RNScreens:
:path: "../node_modules/react-native-screens"
RNVectorIcons:
:path: "../node_modules/react-native-vector-icons"
Yoga:
:path: "../node_modules/react-native/ReactCommon/yoga"
......@@ -606,6 +611,7 @@ SPEC CHECKSUMS:
React-runtimeexecutor: 311feb67600774723fe10eb8801d3138cae9ad67
ReactCommon: 03be76588338a27a88d103b35c3c44a3fd43d136
RNScreens: ea4cd3a853063cda19a4e3c28d2e52180c80f4eb
RNVectorIcons: fcc2f6cb32f5735b586e66d14103a74ce6ad61f8
SocketRocket: fccef3f9c5cedea1353a9ef6ada904fde10d6608
Yoga: 921eb014669cf9c718ada68b08d362517d564e0c
YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
......
ios/testPrj.xcodeproj/project.pbxproj
View file @ f724a1cc
......@@ -13,6 +13,7 @@
13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; };
13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
7699B88040F8A987B510C191 /* libPods-testPrj-testPrjTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 19F6CBCC0A4E27FBF8BF4A61 /* libPods-testPrj-testPrjTests.a */; };
7A2760C32994E12F005C881D /* Fonts in Resources */ = {isa = PBXBuildFile; fileRef = 7A2760C22994E12F005C881D /* Fonts */; };
81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */; };
/* End PBXBuildFile section */
......@@ -41,6 +42,7 @@
5709B34CF0A7D63546082F79 /* Pods-testPrj.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-testPrj.release.xcconfig"; path = "Target Support Files/Pods-testPrj/Pods-testPrj.release.xcconfig"; sourceTree = "<group>"; };
5B7EB9410499542E8C5724F5 /* Pods-testPrj-testPrjTests.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-testPrj-testPrjTests.debug.xcconfig"; path = "Target Support Files/Pods-testPrj-testPrjTests/Pods-testPrj-testPrjTests.debug.xcconfig"; sourceTree = "<group>"; };
5DCACB8F33CDC322A6C60F78 /* libPods-testPrj.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-testPrj.a"; sourceTree = BUILT_PRODUCTS_DIR; };
7A2760C22994E12F005C881D /* Fonts */ = {isa = PBXFileReference; lastKnownFileType = folder; name = Fonts; path = "../node_modules/react-native-vector-icons/Fonts"; sourceTree = "<group>"; };
81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.storyboard; name = LaunchScreen.storyboard; path = testPrj/LaunchScreen.storyboard; sourceTree = "<group>"; };
89C6BE57DB24E9ADA2F236DE /* Pods-testPrj-testPrjTests.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-testPrj-testPrjTests.release.xcconfig"; path = "Target Support Files/Pods-testPrj-testPrjTests/Pods-testPrj-testPrjTests.release.xcconfig"; sourceTree = "<group>"; };
ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; };
......@@ -116,6 +118,7 @@
83CBB9F61A601CBA00E9B192 = {
isa = PBXGroup;
children = (
7A2760C22994E12F005C881D /* Fonts */,
13B07FAE1A68108700A75B9A /* testPrj */,
832341AE1AAA6A7D00B99B32 /* Libraries */,
00E356EF1AD99517003FC87E /* testPrjTests */,
......@@ -242,6 +245,7 @@
isa = PBXResourcesBuildPhase;
buildActionMask = 2147483647;
files = (
7A2760C32994E12F005C881D /* Fonts in Resources */,
81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */,
13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
);
......
ios/testPrj/Info.plist
View file @ f724a1cc
......@@ -51,5 +51,24 @@
</array>
<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>
<key>UIAppFonts</key>
<array>
<string>AntDesign.ttf</string>
<string>EvilIcons.ttf</string>
<string>FontAwesome.ttf</string>
<string>FontAwesome5_Regular.ttf</string>
<string>Fontisto.ttf</string>
<string>Ionicons.ttf</string>
<string>MaterialIcons.ttf</string>
<string>SimpleLineIcons.ttf</string>
<string>Entypo.ttf</string>
<string>Feather.ttf</string>
<string>FontAwesome5_Brands.ttf</string>
<string>FontAwesome5_Solid.ttf</string>
<string>Foundation.ttf</string>
<string>MaterialCommunityIcons.ttf</string>
<string>Octicons.ttf</string>
<string>Zocial.ttf</string>
</array>
</dict>
</plist>
package-lock.json
View file @ f724a1cc
......@@ -14,7 +14,8 @@
"react": "18.2.0",
"react-native": "0.71.1",
"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"
},
"devDependencies": {
"@babel/core": "^7.20.0",
......@@ -12952,6 +12953,54 @@
"react-native": "*"
}
},
"node_modules/react-native-vector-icons": {
"version": "9.2.0",
"resolved": "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-9.2.0.tgz",
"integrity": "sha512-wKYLaFuQST/chH3AJRjmOLoLy3JEs1JR6zMNgTaemFpNoXs0ztRnTxcxFD9xhX7cJe1/zoN5BpQYe7kL0m5yyA==",
"dependencies": {
"prop-types": "^15.7.2",
"yargs": "^16.1.1"
},
"bin": {
"fa5-upgrade": "bin/fa5-upgrade.sh",
"generate-icon": "bin/generate-icon.js"
}
},
"node_modules/react-native-vector-icons/node_modules/cliui": {
"version": "7.0.4",
"resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
"integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
"dependencies": {
"string-width": "^4.2.0",
"strip-ansi": "^6.0.0",
"wrap-ansi": "^7.0.0"
}
},
"node_modules/react-native-vector-icons/node_modules/yargs": {
"version": "16.2.0",
"resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
"integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
"dependencies": {
"cliui": "^7.0.2",
"escalade": "^3.1.1",
"get-caller-file": "^2.0.5",
"require-directory": "^2.1.1",
"string-width": "^4.2.0",
"y18n": "^5.0.5",
"yargs-parser": "^20.2.2"
},
"engines": {
"node": ">=10"
}
},
"node_modules/react-native-vector-icons/node_modules/yargs-parser": {
"version": "20.2.9",
"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
"integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
"engines": {
"node": ">=10"
}
},
"node_modules/react-native/node_modules/@jest/types": {
"version": "26.6.2",
"resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
......
package.json
View file @ f724a1cc
......@@ -16,7 +16,8 @@
"react": "18.2.0",
"react-native": "0.71.1",
"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"
},
"devDependencies": {
"@babel/core": "^7.20.0",
......
src/components/Login.js
View file @ f724a1cc
import React from 'react';
import {View, Text, Touchable, TouchableOpacity} from 'react-native';
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 {darkGreen} from '../constants/Constants';
import Field from './Field';
const Login = (props) => {
const Login = props => {
return (
<Background>
<View style={{alignItems: 'center', width: '100%'}}>
......@@ -20,8 +21,7 @@ const Login = (props) => {
</Text>
<View
style={{
height: 700,
height: 400,
width: 360,
paddingTop: 100,
alignItems: 'center',
......@@ -32,16 +32,49 @@ const Login = (props) => {
/>
<Field placeholder="Password" secureTextEntry={true} />
<View
style={{alignItems: 'flex-end', width: '78%', paddingRight: 16, marginBottom: 200}}>
style={{
alignItems: 'flex-end',
width: '78%',
paddingRight: 16,
marginBottom: 200,
}}>
<Text style={{color: darkGreen, fontWeight: 'bold', fontSize: 16}}>
Forgot Password ?
</Text>
</View>
<Btn textColor='white' bgColor={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: darkGreen, fontWeight: 'bold', fontSize: 16 }}>Signup</Text>
<Btn
textColor="white"
bgColor={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: 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>
......@@ -50,4 +83,27 @@ const Login = (props) => {
);
};
export default Login;
\ No newline at end of file
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/Signup.js
View file @ f724a1cc
import React from 'react';
import {View, Text, Touchable, TouchableOpacity} from 'react-native';
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 {darkGreen} from '../constants/Constants';
......@@ -20,7 +21,6 @@ const Signup = props => {
</Text>
<View
style={{
width: 360,
alignItems: 'center',
}}>
......@@ -38,9 +38,8 @@ const Signup = props => {
display: 'flex',
flexDirection: 'row',
width: '78%',
paddingRight: 12
}}>
</View>
paddingRight: 12,
}}></View>
<Btn
textColor="white"
bgColor={darkGreen}
......@@ -67,10 +66,46 @@ const Signup = props => {
</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>
);
};
export default Signup;
\ No newline at end of file
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 Signup;
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