(feat/design): use one big SectionList to scroll all manga

- each Manga List is just its own section
  - tried to do this with manual styles a number of times in the past,
    but couldn't get it to work
    - then today I looked it up a bit differently and found out about
      SectionList!
  - the big issue with the old design was that it wouldn't fit more
    than like 1 row in the Search and Favorites sections, but fit
    like 5 in Latest, despite the former sections being more important
    - it's also a little unintuitive to be able to scroll each section
      separately
    - with this design, it's possible that one section ends up taking
      up the whole screen, which I think is a better problem and can
      be handled the way YouTube or Netflix does it (e.g. load more
      button or horizontally scrolling sections)

- add bg color to title text bc in iOS the section headers stick to
  the top when you scroll
  - without bg color it overlays on top of the mangas, which is hard
    to read and even see

components/mainView.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { StatusBar, View, Text, TextInput } from 'react-native'
+import { StatusBar, View, Text, TextInput, SectionList } from 'react-native'
 import { inject, observer } from 'mobx-react'
 
 import MangaList from './mangaList.js'
@@ -15,22 +15,54 @@ export default class MainView extends React.Component {
     this.props.appStore.refresh()
   }
 
+  keyExtractor = (_, index) => index
+  renderSectionHeader = ({ section }) => {
+    switch (section.title) {
+      case 'Search...':
+        return <TextInput style={styles.text} placeholder='Search...'
+          placeholderTextColor={styles.text.color} {...section.props} />
+      case 'Favorites':
+        return <Text style={styles.text}>Favorites</Text>
+      case 'Latest':
+        return <Text style={styles.text}>Latest</Text>
+    }
+  }
+  renderList = ({ item }) => {
+    return <MangaList {...item} />
+  }
+
   render () {
     const { searched, selectManga, submitQuery, favorites, latest, refreshing,
       refresh, loadMore, selectedManga, selectedChapter } = this.props.appStore
 
     return <View style={styles.base}>
       <StatusBar hidden />
-      <TextInput style={styles.text} placeholder='Search...'
-        placeholderTextColor={styles.text.color} onChangeText={submitQuery} />
-      <MangaList mangas={searched} onSelect={selectManga} />
-
-      <Text style={styles.text}>Favorites</Text>
-      <MangaList mangas={favorites} onSelect={selectManga} />
-
-      <Text style={styles.text}>Latest</Text>
-      <MangaList mangas={latest} onSelect={selectManga} refreshing={refreshing}
-        onRefresh={refresh} onEndReached={loadMore} />
+      <SectionList
+        sections={[
+          {
+            title: 'Search...',
+            props: { onChangeText: submitQuery },
+            data: [{ mangas: searched, onSelect: selectManga }]
+          },
+          {
+            title: 'Favorites',
+            data: [{ mangas: favorites, onSelect: selectManga }]
+          },
+          {
+            title: 'Latest',
+            data: [{
+              mangas: latest,
+              onSelect: selectManga,
+              refreshing,
+              onRefresh: refresh,
+              onEndReached: loadMore
+            }]
+          }
+        ]}
+        keyExtractor={this.keyExtractor}
+        renderItem={this.renderList}
+        renderSectionHeader={this.renderSectionHeader}
+      />
 
       {selectedManga && <ChapterList />}
 

components/mainViewStyles.js

@@ -9,6 +9,7 @@ const styles = {
   text: {
     width: '100%',
     color: '#aaa',
+    backgroundColor: '#1a1a1a', // for iOS sticky section headers
     fontSize: 26,
     paddingTop: 15,
     paddingBottom: 15