Exercises Done

1. core-components/App.js

@@ -1,20 +1,38 @@
 import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View } from 'react-native';
+import { SafeAreaView, StyleSheet, Text, View, Image, Button, Linking} from 'react-native';
 
 export default function App() {
   return (
-    <View style={styles.container}>
-      <Text>Open up App.js to start working on your app!</Text>
-      <StatusBar style="auto" />
-    </View>
+    <SafeAreaView style={styles.container}>
+      <View>
+        <Image source={{ 
+          uri:
+          'https://miro.medium.com/max/3150/1*0cwNajzEzzZ1iGRgau3Giw.jpeg',
+        }} 
+        style={styles.image}
+        />
+        <Text style={styles.text}>Khadija Djarraya</Text>
+        <Text style={styles.text}>this is my first react native app</Text>
+        <Button title="check my github" value='connect' onPress={ ()=>{ Linking.openURL('https://github.com/khadija-djarraya')}}/>
+      </View>
+    </SafeAreaView>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
-    backgroundColor: '#fff',
+    flex: 2,
+    marginTop:StatusBar.currentHeight,
+    backgroundColor: '#123456' 
+  },
+  image:{ 
+    height:200, 
+    width:100,
     alignItems: 'center',
-    justifyContent: 'center',
+    justifyContent: 'center'
   },
+  text:{
+    fontFamily:"Fantasy",
+    color:"white"
+  }
 });

1. core-components/README.md

@@ -4,18 +4,18 @@ In this exercise, you'll build a one view mobile app that introduces you to peop
 
 ## Getting started
 
-- [ ] Start the project by running `npm start`
-- [ ] Use **Expo Go** on your mobile device to preview the changes
+- [X] Start the project by running `npm start`
+- [X] Use **Expo Go** on your mobile device to preview the changes
 
 ## Steps
 
-- [ ] Open `App.js` file, all the changes will be made here
-- [ ] Remove the boilerplate code. You should have an empty component
-- [ ] Use `SafeAreaView` component to make sure your content is not interfering with the screen borders of your device
-- [ ] Use `View` and `Image` to add image of yourself. You can use a URL or import for this.
-- [ ] Use `Text` to add your name and your life motto
-- [ ] Use `Button` with the value **connect** that should navigate to your github profile on press
-- [ ] Apply some styling using `StyleSheet`.
+- [X] Open `App.js` file, all the changes will be made here
+- [X] Remove the boilerplate code. You should have an empty component
+- [X] Use `SafeAreaView` component to make sure your content is not interfering with the screen borders of your device
+- [X] Use `View` and `Image` to add image of yourself. You can use a URL or import for this.
+- [X] Use `Text` to add your name and your life motto
+- [X] Use `Button` with the value **connect** that should navigate to your github profile on press
+- [X] Apply some styling using `StyleSheet`.
   - Change the background color
   - Change the size of the image
   - Change the font families, sizes, and weights