Add list of home items (#3)

MJSSA · Jan 26, 2021 · 805f233 · 805f233
1 parent 2c7b676
commit 805f233
Show file tree

Hide file tree

Showing 5 changed files with 120 additions and 8 deletions.
diff --git a/App.js b/App.js
@@ -2,6 +2,7 @@ import Ionicons from "@expo/vector-icons/Ionicons";
 import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
 import { NavigationContainer } from "@react-navigation/native";
 import React from "react";
+import { Image, StatusBar, View } from "react-native";
 import HomeScreen from "./screens/HomeScreen";
 import MoreScreen from "./screens/MoreScreen";
 import NewsScreen from "./screens/NewsScreen";
@@ -12,6 +13,18 @@ const Tab = createBottomTabNavigator();
 export default function App() {
   return (
     <NavigationContainer>
+      {/* Move to NavBar/Header component */}
+      <StatusBar style="light" />
+      <View
+        style={{
+          backgroundColor: "black",
+          alignItems: "center",
+          // justifyContent: "center",
+        }}
+      >
+        <Image source={require("./img/logo.png")} />
+      </View>
+
       <Tab.Navigator
         screenOptions={({ route }) => ({
           tabBarIcon: ({ focused, color, size }) => {

diff --git a/screens/HomeScreen.js b/screens/HomeScreen.js
@@ -1,16 +1,94 @@
-import { StatusBar } from "expo-status-bar";
 import React from "react";
-import { StyleSheet, Text, View } from "react-native";
+import {
+  FlatList,
+  Image,
+  ScrollView,
+  SectionList,
+  StyleSheet,
+  Text,
+  View,
+} from "react-native";
+
+const data = [
+  {
+    title: "Continue Learning",
+    data: "Test",
+  },
+  {
+    title: "My Learning List",
+    data: "Test",
+  },
+  {
+    title: "Sunday School Lessons",
+    data: "Test",
+  },
+  {
+    title: "Prayers - Audio/Video",
+    data: "Test",
+  },
+  {
+    title: "Evangelical Messages",
+    data: "Test",
+  },
+  {
+    title: "Popular",
+    data: "Test",
+  },
+  {
+    title: "Devotional Hymns - Audio/Video",
+    data: "Test",
+  },
+  {
+    title: "Qurbana Songs - Audio/Video",
+    data: "Test",
+  },
+  {
+    title: "Christmas Carols - Audio/Video",
+    data: "Test",
+  },
+  {
+    title: "Sunday School Class Activities",
+    data: "Test",
+  },
+  {
+    title: "Holy Qurbana Text",
+    data: "Test",
+  },
+  {
+    title: "Evening Prayers Text",
+    data: "Test",
+  },
+  {
+    title: "Devotional Hymns - Lyrics",
+    data: "Test",
+  },
+  {
+    title: "Qurbana Songs - Lyrics",
+    data: "Test",
+  },
+  {
+    title: "Christmas Carols - Lyrics",
+    data: "Test",
+  },
+];
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: "black",
+    backgroundColor: "#191919",
     alignItems: "center",
     justifyContent: "center",
   },
 });
 
+const ListItem = ({ item }) => {
+  return (
+    <View style={{ margin: 10 }}>
+      <Text style={{ color: "white" }}>{item}</Text>
+    </View>
+  );
+};
+
 function HomeScreen() {
   return (
     <View
@@ -22,8 +100,29 @@ function HomeScreen() {
       //   },
       // }}
     >
-      <StatusBar style="light" />
-      <Text style={{ color: "white" }}>Home UI</Text>
+      <ScrollView style={{ flex: 1 }}>
+        <Image source={require("../img/bible-quote-1.png")} />
+        <SectionList
+          ListEmptyComponent={<Text>No content</Text>}
+          sections={data}
+          keyExtractor={(item, index) => item + index}
+          renderSectionHeader={({ section }) => (
+            <>
+              <Text style={{ fontSize: 32, color: "white" }}>
+                {section.title}
+              </Text>
+
+              <FlatList
+                horizontal
+                keyExtractor={(item, index) => item + index}
+                data={section.data}
+                renderItem={({ item, index }) => <ListItem item={item} />}
+              ></FlatList>
+            </>
+          )}
+          renderItem={({ item }) => null}
+        />
+      </ScrollView>
     </View>
   );
 }

diff --git a/screens/MoreScreen.js b/screens/MoreScreen.js
@@ -4,7 +4,7 @@ import { StyleSheet, Text, View } from "react-native";
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: "black",
+    backgroundColor: "#191919",
     alignItems: "center",
     justifyContent: "center",
   },

diff --git a/screens/NewsScreen.js b/screens/NewsScreen.js
@@ -4,7 +4,7 @@ import { StyleSheet, Text, View } from "react-native";
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: "black",
+    backgroundColor: "#191919",
     alignItems: "center",
     justifyContent: "center",
   },

diff --git a/screens/SearchScreen.js b/screens/SearchScreen.js
@@ -4,7 +4,7 @@ import { StyleSheet, Text, View } from "react-native";
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: "black",
+    backgroundColor: "#191919",
     alignItems: "center",
     justifyContent: "center",
   },