added data to content and added scrollview

src/Components/Content/index.js

@@ -4,6 +4,7 @@ import Projects from './../Projects';
 import Home from './../Home';
 import AboutUs from './../AboutUs';
 import Contribute from '../Contribute';
+import OurEvents from './../OurEvents';
 
 function Content({ selected, titles }) {
   if (selected === 0) {
@@ -12,7 +13,9 @@ function Content({ selected, titles }) {
     return <AboutUs />;
   } else if (selected === 3) {
     return <Projects />;
-  } 
+  } else if(selected === 4) {
+    return <OurEvents />; 
+  }
   if (selected === 5) {
     return <Contribute />;
   } else {

src/Components/Header/index.js

@@ -64,6 +64,7 @@ function MenuItem(index, selected, setSelected, title) {
 const styles = StyleSheet.create({
   logoContainer: {
     flex: 1,
+    marginRight:80,
   },
   buttonContainer: { marginTop: 25, marginLeft: 40 },
 });

src/Components/ImageContent/index.js

@@ -26,11 +26,12 @@ const ImageContent = ({
         }
       }}
     >
+    <View style={styles.sectionImage}>
       <ScaledImage
         source={image}
         width={imageContainerWidth}
-        style={styles.sectionImage}
       />
+    </View>
       <View style={styles.subContainer}>
         <Children />
       </View>
@@ -55,7 +56,6 @@ const createStyles = (imageSide) =>
       minWidth: 200,
     },
     sectionImage: {
-      flex: 1,
       paddingLeft: 16,
       paddingRight: 16,
     },

src/Components/ImageTextSection/index.js

@@ -12,11 +12,12 @@ const ImageTextSection = ({
   const styles = createStyles(imageSide);
   return (
     <View style={styles.container}>
+      <View style={styles.sectionImage}>
       <ScaledImage
         source={image}
         height={imageHeight}
-        style={styles.sectionImage}
       />
+      </View>
       <View style={styles.subContainer}>
         <Text style={styles.header}>{title}</Text>
         {content.map((text) => (

src/Components/OurEvents/index.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import ImageContent from './../ImageContent';
+import SectionHeader from './../SectionHeader';
+import { getEvents } from './../../content/our_events';
+import { Box, Content, Description } from './styles';
+
+
+function OurEvents() {
+  const content = getEvents();
+  const renderContent = (index, section) => {
+    return (
+      <Content key={index}>
+        <SectionHeader title={section.title} />
+        {section.content.map((content, indx) => {
+          return <Description key={indx}>{content.par}</Description>;
+        })}
+      </Content>
+    );
+  };
+
+  return (
+    <Box>
+    {content.sections.map((section, index) => {
+      return (
+        <ImageContent
+          image={section.image.source}
+          imageSide={index % 2 === 0 ? 'right' : 'left'}
+          Children={() => renderContent(index, section)}
+        />
+      );
+    })}
+    </Box>
+
+  );
+}
+export default OurEvents;

src/Components/OurEvents/styles.js

@@ -0,0 +1,66 @@
+import { View, Text, StyleSheet } from 'react-native';
+import { styled } from 'react-native-reflect';
+
+export const Box = styled(View, {
+  flex: 1,
+  width: '80%',
+  flexDirection: 'column',
+  paddingLeft: 16,
+  paddingRight: 16,
+  flexWrap: 'wrap',
+  marginTop: 32,
+});
+
+export const Content = styled(View, {
+  flexDirection: 'column',
+  paddingLeft: 16,
+  marginRight:77,
+});
+
+export const Description = styled(Text, {
+  flex: 1,
+  marginTop: 32,
+  paddingLeft: 16,
+  fontSize: 18,
+  flexGrow: 1,
+  fontWeight: 200,
+  color: '#103B81',
+  textAlign: 'left',
+});
+
+const styles = StyleSheet.create({
+  container: {
+    display: 'flex',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    marginTop: 18,
+    marginBottom: 18,
+  },
+  card: {
+    width: '33%',
+    minWidth: 251,
+  },
+  cardMiddle: {
+    alignItems: 'center',
+  },
+  cardLast: {
+    alignItems: 'flex-end',
+  },
+  imageText: {
+    fontSize: 14,
+    fontWeight: '300',
+    fontFamily: 'Avenir',
+    textAlign: 'center',
+    width: 180,
+    flex: 1,
+    color: '#103B81',
+  },
+  description: {
+    fontSize: 14,
+    fontWeight: '300',
+    color: '#103B81',
+    marginLeft: 32,
+  },
+});
+
+export default styles;

src/content/our_events.js

@@ -0,0 +1,31 @@
+const our_events={
+    sections: [
+        {
+            title: "EVENTS",
+            image: {
+                source:require("./../assets/our_events.png"),
+            },
+            content: [
+                {
+                    par : "We at AnitaB.org Open Source beleive in Inspiration through Action. To facilitate our Open Souce journey and continue the AnitaB.org legacy we conduct enthralling events all year long, with the purpose of bridging the gap between creative developers and our Open Source community. Keep scrolling to catch a glipse of few such events! ",
+                }
+            ]
+        },
+        {
+            title: "TITLE 2",
+            image:{
+                source:require("./../assets/our_events.png"),
+            },
+            content: [
+                {
+                    par: "We at AnitaB.org Open Source beleive in Inspiration through Action. To facilitate our Open Souce journey and continue the AnitaB.org legacy we conduct enthralling events all year long, with the purpose of bridging the gap between creative developers and our Open Source community. Keep scrolling to catch a glipse of few such events! ",
+                }
+            ]
+        }
+    ]
+}
+
+
+export const getEvents = () => {
+    return our_events;
+  };

yarn.lock

@@ -5353,9 +5353,9 @@ inherits@2.0.3:
   integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=
 
 ini@^1.3.5:
-  version "1.3.5"
-  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
-  integrity sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==
+  version "1.3.8"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.8.tgz#a29da425b48806f34767a4efce397269af28432c"
+  integrity sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==
 
 inline-style-prefixer@^5.1.0:
   version "5.1.2"