├── README.md
├── assets
    ├── icon.png
    ├── favicon.png
    ├── splash.png
    └── adaptive-icon.png
├── babel.config.js
├── .gitignore
├── package.json
├── app.json
└── App.js


/README.md:
--------------------------------------------------------------------------------
1 | <img src="https://i.ibb.co/HtWhMPk/IMG-20240307-021804.jpg" />
2 | 


--------------------------------------------------------------------------------
/assets/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Hazrat-Ali9/React-Native-Assignment/HEAD/assets/icon.png


--------------------------------------------------------------------------------
/assets/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Hazrat-Ali9/React-Native-Assignment/HEAD/assets/favicon.png


--------------------------------------------------------------------------------
/assets/splash.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Hazrat-Ali9/React-Native-Assignment/HEAD/assets/splash.png


--------------------------------------------------------------------------------
/assets/adaptive-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Hazrat-Ali9/React-Native-Assignment/HEAD/assets/adaptive-icon.png


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = function(api) {
2 |   api.cache(true);
3 |   return {
4 |     presets: ['babel-preset-expo'],
5 |   };
6 | };
7 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
 2 | 
 3 | # dependencies
 4 | node_modules/
 5 | 
 6 | # Expo
 7 | .expo/
 8 | dist/
 9 | web-build/
10 | 
11 | # Native
12 | *.orig.*
13 | *.jks
14 | *.p8
15 | *.p12
16 | *.key
17 | *.mobileprovision
18 | 
19 | # Metro
20 | .metro-health-check*
21 | 
22 | # debug
23 | npm-debug.*
24 | yarn-debug.*
25 | yarn-error.*
26 | 
27 | # macOS
28 | .DS_Store
29 | *.pem
30 | 
31 | # local env files
32 | .env*.local
33 | 
34 | # typescript
35 | *.tsbuildinfo
36 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "assignment-1-react-native",
 3 |   "version": "1.0.0",
 4 |   "main": "node_modules/expo/AppEntry.js",
 5 |   "scripts": {
 6 |     "start": "expo start",
 7 |     "android": "expo start --android",
 8 |     "ios": "expo start --ios",
 9 |     "web": "expo start --web"
10 |   },
11 |   "dependencies": {
12 |     "expo": "~50.0.8",
13 |     "expo-status-bar": "~1.11.1",
14 |     "react": "18.2.0",
15 |     "react-native": "0.73.4",
16 |     "react-native-safe-area-context": "^4.9.0",
17 |     "react-native-vector-icons": "^10.0.3"
18 |   },
19 |   "devDependencies": {
20 |     "@babel/core": "^7.20.0"
21 |   },
22 |   "private": true
23 | }
24 | 


--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "expo": {
 3 |     "name": "assignment-1-react-native",
 4 |     "slug": "assignment-1-react-native",
 5 |     "version": "1.0.0",
 6 |     "orientation": "portrait",
 7 |     "icon": "./assets/icon.png",
 8 |     "userInterfaceStyle": "light",
 9 |     "splash": {
10 |       "image": "./assets/splash.png",
11 |       "resizeMode": "contain",
12 |       "backgroundColor": "#ffffff"
13 |     },
14 |     "assetBundlePatterns": [
15 |       "**/*"
16 |     ],
17 |     "ios": {
18 |       "supportsTablet": true
19 |     },
20 |     "android": {
21 |       "adaptiveIcon": {
22 |         "foregroundImage": "./assets/adaptive-icon.png",
23 |         "backgroundColor": "#ffffff"
24 |       }
25 |     },
26 |     "web": {
27 |       "favicon": "./assets/favicon.png"
28 |     }
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/App.js:
--------------------------------------------------------------------------------
  1 | import { StatusBar } from "expo-status-bar";
  2 | import { Image, StyleSheet, Text, View } from "react-native";
  3 | import { SafeAreaView } from "react-native-safe-area-context";
  4 | import Icon from "react-native-vector-icons/Entypo";
  5 | 
  6 | // Error Fixed
  7 | 
  8 | 
  9 | export default function App() {
 10 |   return (
 11 |     <SafeAreaView style={styles.container}>
 12 |       <StatusBar style="auto" />
 13 |       <View style={styles.contentWrapper}>
 14 |         <View style={styles.hero}>
 15 |           <View>
 16 |             <Image
 17 |               style={styles.image}
 18 |               source={{
 19 |                 uri: "https://miro.medium.com/v2/resize:fit:800/1*C6KqIOLCzoDpottbBxmEZA.png",
 20 |               }}
 21 |             />
 22 |           </View>
 23 | 
 24 |           <View>
 25 |             <Text style={{ fontWeight: 700, fontSize: 20 }}>The Octocat</Text>
 26 |             <Text style={{ color: "#257FFF" }}>@ootocat</Text>
 27 |             <Text style={{ marginTop: 8, fontWeight: 300 }}>
 28 |               Joined 25 Jan 2011
 29 |             </Text>
 30 |           </View>
 31 |         </View>
 32 | 
 33 |         <Text style={{ marginTop: 40, lineHeight: 25, fontSize: 15 }}>
 34 |           React Native: JavaScript framework for mobile app development. Single
 35 |           codebase for iOS and Android.
 36 |         </Text>
 37 | 
 38 |         <View style={styles.stats}>
 39 |           <View style={{ alignItems: "center" }}>
 40 |             <Text>Repost</Text>
 41 |             <Text style={{ fontSize: 18, fontWeight: 700, marginTop: 10 }}>
 42 |               8
 43 |             </Text>
 44 |           </View>
 45 |           <View style={{ alignItems: "center" }}>
 46 |             <Text>Followers</Text>
 47 |             <Text style={{ fontSize: 18, fontWeight: 700, marginTop: 10 }}>
 48 |               2928
 49 |             </Text>
 50 |           </View>
 51 |           <View style={{ alignItems: "center" }}>
 52 |             <Text>Following</Text>
 53 |             <Text style={{ fontSize: 18, fontWeight: 700, marginTop: 10 }}>
 54 |               9
 55 |             </Text>
 56 |           </View>
 57 |         </View>
 58 | 
 59 |         <View style={{ marginTop: 30 }}>
 60 |           <View
 61 |             style={{
 62 |               flexDirection: "row",
 63 |               alignItems: "center",
 64 |               gap: 15,
 65 |               marginBottom: 10,
 66 |             }}
 67 |           >
 68 |             <Icon name="location-pin" size={25} />
 69 |             <Text style={{ fontSize: 15 }}>San Francisco</Text>
 70 |           </View>
 71 |           <View
 72 |             style={{
 73 |               flexDirection: "row",
 74 |               alignItems: "center",
 75 |               gap: 15,
 76 |               marginBottom: 10,
 77 |             }}
 78 |           >
 79 |             <Icon name="link" size={25} />
 80 |             <Text style={{ fontSize: 15 }}>https://github.blog</Text>
 81 |           </View>
 82 |           <View
 83 |             style={{
 84 |               flexDirection: "row",
 85 |               alignItems: "center",
 86 |               gap: 15,
 87 |               marginBottom: 10,
 88 |             }}
 89 |           >
 90 |             <Icon name="twitter" size={25} color={"gray"} />
 91 |             <Text style={{ fontSize: 15, color: "gray" }}>Not Available</Text>
 92 |           </View>
 93 |           <View
 94 |             style={{
 95 |               flexDirection: "row",
 96 |               alignItems: "center",
 97 |               gap: 15,
 98 |               marginBottom: 10,
 99 |             }}
100 |           >
101 |             <Icon name="home" size={25} />
102 |             <Text style={{ fontSize: 15 }}>@github</Text>
103 |           </View>
104 |         </View>
105 |       </View>
106 |     </SafeAreaView>
107 |   );
108 | }
109 | 
110 | const styles = StyleSheet.create({
111 |   container: {
112 |     flex: 1,
113 |     backgroundColor: "#F6F8FF",
114 |     paddingHorizontal: 20,
115 |     paddingVertical: 10,
116 |   },
117 |   contentWrapper: {
118 |     backgroundColor: "#fff",
119 |     padding: 20,
120 |     borderRadius: 10,
121 |     shadowColor: "gray",
122 |     shadowOpacity: 10,
123 |     elevation: 50,
124 |   },
125 |   hero: {
126 |     flexDirection: "row",
127 |     alignItems: "center",
128 |     gap: 20,
129 |   },
130 |   image: {
131 |     height: 80,
132 |     width: 80,
133 |     borderRadius: 99999,
134 |     backgroundColor: "#F6F8FF",
135 |   },
136 | 
137 |   stats: {
138 |     backgroundColor: "#F6F8FF",
139 |     borderRadius: 10,
140 |     padding: 20,
141 |     marginTop: 30,
142 |     flexDirection: "row",
143 |     justifyContent: "space-between",
144 |   },
145 | });
146 | 


--------------------------------------------------------------------------------