Home Page - UI

[GoelBiju]

Description:

Add the user interface for the home page.

Content on MJSSA: http://mjssa.in/index.php, https://www.facebook.com/mjssaonline/
Content on St. Thomas Church - London: https://www.stthomasjsoclondon.org/jsocldn/connect-with-us/sunday-school/

Acceptance criteria:

• Top of the home page has the Top Menu UI (Top Menu - UI #4 ) (fixed until scrolling)
• Bottom of the home page has the Bottom Navigation UI (Bottom menu UI #5 #9 ) (fixed until playing/viewing content)
• Top-most content is the thought of the day; "Bible Quote" for the day/"Thought for the day"

Channels are shown underneath including the following:

• "Continue learning",

• "My Learning List",

• "Sunday School Lessons",

• "Prayers - Audio/Video",

• "Evangelical Messages",

• "Popular",

• "Devotional Hymns - Audio/Video",

• "Qurbana Songs - Audio/Video",

• "Christmas Carols - Audio/Video",

• "Sunday School Textbooks"

• "Sunday School Class Activities"

• "Holy Qurbana Text"

• "Evening Prayers Text"

• "Devotional Hymns - Lyrics"

• "Qurbana Songs - Lyrics"

• "Christmas Carols - Lyrics"

• Within each channel, content specific to the channel shown as thumbnail images

• User can scroll right to view more content for the channel

• User has to scroll down to view remaining channels

• Clicking a content thumbnail opens the Content Information (Popup) UI

Mockups:

[GoelBiju]

It might be worth examining some of the components and design on this Netflix clone demo app.

[GoelBiju]

For SectionList/FlatList it is worth taking a look at this example.

[GoelBiju]

A basic working example of the SectionList with the FlatList has been added in 6884905.