commit

mahdi-sharifimehr · Dec 29, 2020 · daf71c7 · daf71c7
1 parent 7eb3ac1
commit daf71c7
Showing 1 changed file with 66 additions and 9 deletions.
diff --git a/App.js b/App.js
@@ -10,14 +10,34 @@ const App = () => {
 
   return (
     <View style={styles.body}>
-      <View style={styles.view1}>
-        <Text style={styles.text}>1</Text>
+      <View style={styles.row}>
+        <View style={styles.view1}>
+          <Text style={styles.text}>1</Text>
+        </View>
+        <View style={styles.view2}>
+          <Text style={styles.text}>2</Text>
+        </View>
+        <View style={styles.view3}>
+          <Text style={styles.text}>3</Text>
+        </View>
       </View>
-      <View style={styles.view2}>
-        <Text style={styles.text}>2</Text>
+      <View style={styles.row}>
+        <View style={styles.view4}>
+          <Text style={styles.text}>4</Text>
+        </View>
       </View>
-      <View style={styles.view3}>
-        <Text style={styles.text}>3</Text>
+      <View style={styles.row}>
+        <View style={styles.view5}>
+          <Text style={styles.text}>5</Text>
+        </View>
+      </View>
+      <View style={styles.big_row}>
+        <View style={styles.view6}>
+          <Text style={styles.text}>6</Text>
+        </View>
+        <View style={styles.view7}>
+          <Text style={styles.text}>7</Text>
+        </View>
       </View>
     </View>
   );
@@ -27,7 +47,20 @@ const styles = StyleSheet.create({
   body: {
     flex: 1,
     flexDirection: 'column',
-    backgroundColor: '#0000ff',
+    backgroundColor: '#ffffff',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+  },
+  row: {
+    flexDirection: 'row',
+    backgroundColor: '#ffffff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  big_row: {
+    flex: 1,
+    flexDirection: 'row',
+    backgroundColor: '#ffffff',
     alignItems: 'stretch',
     justifyContent: 'center',
   },
@@ -38,17 +71,41 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   view2: {
-    flex: 1,
+    flex: 2,
     backgroundColor: '#ff00ff',
     alignItems: 'center',
     justifyContent: 'center',
   },
   view3: {
-    flex: 1,
+    flex: 3,
     backgroundColor: '#ffff00',
     alignItems: 'center',
     justifyContent: 'center',
   },
+  view4: {
+    flex: 1,
+    backgroundColor: '#ff0000',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  view5: {
+    flex: 1,
+    backgroundColor: '#0fff0f',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  view6: {
+    flex: 1,
+    backgroundColor: '#ffffff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  view7: {
+    flex: 1,
+    backgroundColor: '#0000ff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
   text: {
     color: '#000000',
     fontSize: 35,