Added a section of home page

package.json

@@ -7,6 +7,7 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "@types/styled-components": "^5.1.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-native-animated-number": "^1.1.1",

src/App.js

@@ -3,6 +3,7 @@ import { View } from 'react-native';
 import Header from './Components/Header';
 import Content from './Components/Content';
 import Footer from './Components/Footer';
+import Home from './Components/Home';
 
 function App() {
   const [selected, setSelected] = useState(0);
@@ -23,4 +24,4 @@ function App() {
   );
 }
 
-export default App;
+export default App;

src/Components/Content/index.js

@@ -1,8 +1,12 @@
 import React from 'react';
 import { View, Text, Image } from 'react-native';
 import Projects from './../Projects';
+import Home from './../Home';
 
 function Content({ selected, titles }) {
+  if(selected === 0){
+    return <Home />
+  }
   if (selected === 3) {
     return <Projects />;
   } else {

src/Components/Home/GettingStarted.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { MainContainer } from './styles';
+import ImageTextSection from '../ImageTextSection';
+
+function GettingStarted({content}){
+    return(
+        <MainContainer>
+            <ImageTextSection
+                title = {content.title}
+                image = {content.image.source}
+                content = {content.content}
+                imageHeight = {273}
+            />
+        </MainContainer>
+    );
+}
+
+export default GettingStarted;

src/Components/Home/OpenSourcePrograms.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { MainContainer } from './styles';
+import ImageTextSection from '../ImageTextSection';
+
+function GettingStarted({content}){
+    return(
+        <MainContainer>
+            <ImageTextSection
+                title = {content.title}
+                imageSide = {'right'}
+                image = {content.image.source}
+                content = {content.content}
+                imageHeight = {208}
+            />
+        </MainContainer>
+    );
+}
+
+export default GettingStarted;

src/Components/Home/OurProjects.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { MainContainer } from './styles';
+import ImageTextSection from '../ImageTextSection';
+
+function GettingStarted({content}){
+    return(
+        <MainContainer>
+            <ImageTextSection
+                title = {content.title}
+                image = {content.image.source}
+                content = {content.content}
+                imageHeight = {261}
+            />
+        </MainContainer>
+    );
+}
+
+export default GettingStarted;

src/Components/Home/WaysToContribute.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { MainContainer } from './styles';
+import ImageTextSection from '../ImageTextSection';
+
+function GettingStarted({content}){
+    return(
+        <MainContainer>
+            <ImageTextSection
+                title = {content.title}
+                image = {content.image.source}
+                content = {content.content}
+                imageSide = {'right'}
+                imageHeight = {220}
+            />
+        </MainContainer>
+    );
+}
+
+export default GettingStarted;

src/Components/Home/index.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import GettingStarted from './GettingStarted';
+import OurProjects from './OurProjects';
+import OpenSourcePrograms from './OpenSourcePrograms';
+import WaysToContribute from './WaysToContribute';
+import { ParentContainer} from './styles';
+import { getHome } from './../../content/home';
+
+const home = getHome();
+const {sections} = home;
+function Home(){
+
+    return(        
+            <ParentContainer>
+                <GettingStarted content={sections[0]}/>
+                <WaysToContribute content={sections[1]}/>
+                <OurProjects content={sections[2]}/>
+                <OpenSourcePrograms content={sections[3]}/>
+            </ParentContainer>
+    );
+}
+
+export default Home;

src/Components/Home/styles.js

@@ -0,0 +1,16 @@
+import { View } from 'react-native';
+import { styled } from "react-native-reflect";
+
+export const MainContainer = styled(View,{
+  flex: 1,
+    flexWrap: 'wrap',
+    justifyContent: 'space-around',
+    flexDirection: 'row',
+})
+
+export const ParentContainer = styled(View,{
+  flexDirection: 'column',
+    flexWrap: 'wrap',
+    marginTop: 32,
+    marginBottom: 32
+})

src/Components/ImageTextSection/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { View, Text, StyleSheet } from 'react-native';
 import ScaledImage from './../ScaledImage';
-
 const ImageTextSection = ({
   title,
   image,
@@ -19,8 +18,8 @@ const ImageTextSection = ({
       />
       <View style={styles.subContainer}>
         <Text style={styles.header}>{title}</Text>
-        {content.map((text) => (
-          <Text style={styles.text}>{text.par}</Text>
+        {content.map((text, i) => (
+          <Text key={i} style={styles.text}>{text.par}</Text>
         ))}
       </View>
     </View>
@@ -46,6 +45,7 @@ const createStyles = (imageSide) =>
     sectionImage: {
       paddingLeft: 16,
       paddingRight: 16,
+      alignSelf: 'center'
     },
     header: {
       flex: 0,

src/Components/SectionBody/index.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { View, Text, StyleSheet, Dimensions } from 'react-native';
+
+const {width} = Dimensions.get('window');
+function SectionBody({content, width}){
+    return (
+        <View style={styles.container} >
+            <Text style={styles.body}>{content}</Text>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    body:  {
+        fontSize: 18,
+        color: '#103BB1',
+        fontFamily:'./../../Avenir-Light',
+        textAlign:"left",
+        flexWrap:"wrap",
+        fontWeight: 200,
+      },
+    container: {
+      flex: 1,
+      width: (width - 0.7*width>=400) ? width*0.7 : width*0.9,
+      marginTop: 8,
+      paddingLeft: 16,
+      paddingRight: 16,
+    },
+  });
+
+  export default SectionBody;
+

src/Components/SectionHeader/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View, Text, StyleSheet } from 'react-native';
 
-function SectionHeader({ title, index }) {
+function SectionHeader({ title, index}) {
   return (
     <View style={styles.container} key={title + index}>
       <Text style={styles.header}>{title}</Text>
@@ -20,7 +20,7 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     width: '100%',
-    paddingTop: 64,
+    paddingTop: 32,
     paddingLeft: 16,
     paddingRight: 16,
   },

src/Components/SectionImage/index.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import {View, Image } from 'react-native';
+
+
+function SectionImage({source, width, height}){
+    const viewStyle = {
+        alignSelf: 'center',
+        width: 350,
+        marginTop: 32+8,
+    }
+    const imageStyle = {
+        width: width,
+        height: height,
+        alignSelf: 'center',
+    }
+    return(
+        <View style={viewStyle}>
+        <Image 
+            source={source}
+            style = {imageStyle}
+        />
+        </View>
+    )
+}
+
+
+export default SectionImage;