import React, { useState, useEffect } from "react"; import { View, StyleSheet, ScrollView, SafeAreaView, StatusBar, Platform, LayoutAnimation, } from "react-native"; import { connect } from "react-redux"; import { book } from "../../redux/actions"; //components import Navbar from "../../components/Navbar"; import Drawer from "../../components/Drawer"; import Search from "../../components/Search"; import Divider from "../../components/Divider"; import MostViewedVideo from "./components/MostViewedVideo"; import NewestVideo from "./components/NewestVideo"; //assets import tw from "tailwind-rn"; function Videos({ grades, videos, getVideos, mobile }) { const [search, setSearch] = useState(""); const [position, setPosition] = useState("100%"); useEffect(() => { getVideos({ vod: true }); }, []); const setBoxPosition = () => { LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut); setPosition(position === "100%" ? "0%" : "100%"); }; return ( {!mobile ? : null} {/* */} {/* */} {videos.length ? ( <> a.updatedAt - b.updatedAt) .slice(0, mobile ? 4 : 6)} grades={grades} /> ) : null} ); } // Later on in your styles.. const styles = StyleSheet.create({ contentContainerStyle: { paddingBottom: 100, alignItems: "flex-end", }, container: { flexDirection: "column", paddingBottom: 0, paddingTop: 64, paddingHorizontal: 16, }, }); const mapStateToProps = (state) => ({ grades: state.publicApi.grades, videos: state.book.list, grades: state.publicApi.grades, mobile: state.publicApi.mobile, }); const mapDispatchToProps = { getVideos: book.list, }; export default connect(mapStateToProps, mapDispatchToProps)(Videos);