Improve video and padding in tabs

Views/Courses.js

@@ -43,9 +43,28 @@ const getCourses = async (profileObj) => {
         });
     });
     return {
-        courses,
-        popular,
-        watching: watchingArray,
+        courses: courses.slice(0,10),
+        popular: popular.slice(0,10),
+        watching: watchingArray.slice(0,10),
+    }
+}
+
+const storeCoursesCache = async (value) => {
+    try {
+        const jsonValue = JSON.stringify(value)
+        await AsyncStorage.setItem('courses', jsonValue)
+    } catch (e) {
+    }
+}
+
+const getCoursesCache= async () => {
+    try {
+        const value = await AsyncStorage.getItem('courses')
+        if (value !== null) {
+            return JSON.parse(value);
+        }
+    } catch (e) {
+        return []
     }
 }
 
@@ -59,10 +78,18 @@ const Courses = () => {
     const [queryTimer, setQueryTimer] = React.useState(0);
 
     useEffect(async () => {
+        await getCoursesCache().then((r)=>{
+            console.log("Courses Cache");
+            setGroups(r.courses || []);
+            setPopular(r.popular || []);
+            setWatching(r.watching || []);
+        });
         let r = await getCourses(viewer);
+        console.log("Courses Live");
         setGroups(r.courses || []);
         setPopular(r.popular || []);
         setWatching(r.watching || []);
+        storeCoursesCache(r);
     }, [])
 
     const onChangeSearch = query => {
@@ -102,6 +129,7 @@ const Courses = () => {
                     data={watching}
                     renderItem={watchingCourse}
                     keyExtractor={item => item.profile._id}
+                    initialNumToRender={2}
                 />
                 <Title>Recently Added:</Title>
                 <FlatList
@@ -109,6 +137,7 @@ const Courses = () => {
                     data={groups}
                     renderItem={renderProfile}
                     keyExtractor={item => item._id}
+                    initialNumToRender={2}
                 />
                 <Title>Popular:</Title>
                 <FlatList
@@ -116,6 +145,7 @@ const Courses = () => {
                     data={popular}
                     renderItem={renderProfile}
                     keyExtractor={item => item._id}
+                    initialNumToRender={2}
                 />
             </ScrollView>
         </SafeAreaView>
@@ -126,5 +156,6 @@ export default Courses;
 
 const styles = StyleSheet.create({
     container: {
+        flex: 1
     },
 });