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 (#4 ) (fixed until scrolling)
• [x] Bottom of the home page has the Bottom Navigation UI (#9 ) (fixed until playing/viewing content)
• [x] 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 https://github.com/MJSSA/digital-library-mobile/commit/6884905dade5d14700890b09fa8f11d1e5d8a9d8.