Completed structure for books list. Need to add storage and redux. Need better cell design and section header design. Need to design App Icon.

Author: jeremyfelder

package.json

@@ -19,11 +19,14 @@
     "react": "16.9.0",
     "react-native": "0.61.5",
     "react-native-device-info": "^5.5.3",
+    "react-native-elements": "^1.2.7",
+    "react-native-extra-dimensions-android": "^1.2.5",
     "react-native-gesture-handler": "^1.6.1",
     "react-native-progress": "^4.1.2",
     "react-native-reanimated": "^1.8.0",
     "react-native-safe-area-context": "^0.7.3",
-    "react-native-screens": "^2.4.0"
+    "react-native-screens": "^2.4.0",
+    "react-native-vector-icons": "^6.6.0"
   },
   "devDependencies": {
     "@babel/core": "^7.6.2",

src/components/cell.tsx

@@ -1,8 +1,24 @@
 import * as React from 'react';
-import { View, StyleSheet, Image, Text } from "react-native";
+import { View, StyleSheet, Image, Text, ImageSourcePropType } from "react-native";
 import { TouchableHighlight } from "react-native-gesture-handler";
 import { Colors } from '../assets/';
 import * as Progress from 'react-native-progress';
+import { Divider } from 'react-native-elements';
+
+export interface CellProps {
+  bookImage: ImageSourcePropType;
+  title: string;
+  percentFinished: number;
+  onPress?: () => void;
+}
+
+export function CellDivider() {
+  return (
+    <View>
+      <Divider style={{ height: 0.5, backgroundColor: Colors.slategrey }}/>
+    </View>
+  )
+}
 
 export default function Cell (props: any) {
   const { bookImage, title, percentFinished, onPress } = props
@@ -56,4 +72,4 @@ const styles = StyleSheet.create({
   progressBar: {
 
   }
-});
+});

src/navigation/BookListsStack.tsx

@@ -1,14 +1,13 @@
 import * as React from 'react';
-import Summaries from '../screens/summaries';
+import Books from '../screens/books/books';
 import { createStackNavigator } from "@react-navigation/stack";
 
 const Stack = createStackNavigator();
-// Change this to just have progressBarCell s and have a sorting option based on progess.
 
 export default function BookListsStack () {
     return (
         <Stack.Navigator>
-          <Stack.Screen name="summaries" component={Summaries}/>
+          <Stack.Screen name="Books" component={Books}/>
         </Stack.Navigator>
     );
 }

src/screens/books/books.tsx

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { SectionList, Text, View, StyleSheet, ShadowPropTypesIOS } from "react-native";
+import { Colors, Images } from '../../assets';
+import { Divider } from 'react-native-elements';
+import Cell, { CellProps, CellDivider } from '../../components/cell';
+import EmptyBooks from './emptyBooks';
+
+export default function Books (props: any) {
+  const renderItem = (item: CellProps) => {
+    return (
+      <Cell {...item}/>
+    )
+  }
+
+  const renderSectionHeader = (title: string) => {
+    return (
+      <View style={styles.sectionHeaderContainer}>
+        <Text style={styles.sectionHeaderTitle}>{title}</Text>
+      </View>
+    )
+  }
+
+  const renderSectionSeparator = (title: string) => {
+    return (
+      <Divider style={{ height: 0.5, backgroundColor: Colors.blue }}/>
+    )
+  }
+
+  const data = [];
+  if(props.currentlyReading) data.push({
+    'title': 'Currently Reading',
+    data: props.currentlyReading
+  })
+  if(props.wishList) data.push({
+    'title': 'Wish List',
+    data: props.wishList
+  })
+  if(props.completed) data.push({
+    'title': 'Completed',
+    data: props.completed
+  })
+
+  return (
+    <SectionList
+      sections={data}
+      ListEmptyComponent={EmptyBooks}
+      ItemSeparatorComponent={CellDivider}
+      renderItem={({ item }) => renderItem(item as CellProps)}
+      renderSectionHeader={({ section: { title }}) => renderSectionHeader(title)}
+      SectionSeparatorComponent={({ section: { title } }) => renderSectionSeparator(title)}
+      stickySectionHeadersEnabled
+    />
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.white
+  },
+  sectionHeaderContainer: {
+    height: 54,
+    backgroundColor: Colors.skyblue,
+    justifyContent: 'center',
+    paddingLeft: 10
+  },
+  sectionHeaderTitle: {
+    textAlign: 'left',
+    fontSize: 24
+  }
+});

src/screens/books/emptyBooks.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { View, Image, StyleSheet } from "react-native";
+import { Images } from "../../assets/index";
+
+export default function EmptyBooks() {
+  return (
+    <View style={styles.container}>
+      <Image style={styles.image} source={Images.testImage}/>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    height: '100%',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  image:{
+    height: 400,
+    width: 250,
+    marginTop: '30%'
+  }
+});

src/screens/summaries.tsx

@@ -1,11 +1,14 @@
-import { Platform } from "react-native";
+import { Dimensions, Platform } from "react-native";
 import DeviceInfo from 'react-native-device-info';
 
 //@ts-ignore
-const isAndroid = Platform.OS === "android"
+export const isAndroid = Platform.OS === "android"
 //@ts-ignore
-const isIOS = Platform.OS === "ios"
+export const isIOS = Platform.OS === "ios"
 //@ts-ignore
-const semanticVersion = DeviceInfo.getReadableVersion().split(".", 3).join(".")
+export const semanticVersion = DeviceInfo.getReadableVersion().split(".", 3).join(".")
 //@ts-ignore
-const isCharging = () => DeviceInfo.isBatteryCharging()
+export const isCharging = () => DeviceInfo.isBatteryCharging()
+export const deviceHeight = Dimensions.get('window').height;
+//@ts-ignore
+export const deviceWidth = Dimensions.get('window').width;