import React, { useState, useEffect } from "react"; import { connect } from "react-redux"; import { blog, book, userProduct } from "../../redux/actions"; import { View, StyleSheet, Dimensions, ScrollView, SafeAreaView, Platform, StatusBar, LayoutAnimation, } from "react-native"; //components import Navbar from "../../components/Navbar"; import Scroll from "./components/Scroll"; import MyBooks from "./components/MyBooks"; import Videos from "./components/Videos"; import Blogs from "./components/Blogs"; import Drawer from "../../components/Drawer"; import Header from "./components/Header"; //style import tw from "tailwind-rn"; // Within your render function const Home = ({ blogs, getBlogs, books, getBooks, userProducts, getUserProducts, mobile, }) => { const [position, setPosition] = useState("100%"); useEffect(() => { getBlogs(); getBooks({ vod: true }); getUserProducts(); }, []); const setBoxPosition = () => { LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut); setPosition(position === "100%" ? "0%" : "100%"); }; return ( {!mobile && } {userProduct?.length > 0 && }
{books?.length > 0 && } {books?.length > 0 && } {blogs?.length > 0 && } ); }; // Later on in your styles.. const styles = StyleSheet.create({ contentContainerStyle: { paddingBottom: 40, // flex : 1, // alignItems: "", }, container: { backgroundColor: "white", flexDirection: "column", paddingVertical: 0, paddingHorizontal: 0, }, }); const mapStateToProps = (state) => ({ blogs: state.blog.list, books: state.book.list, userProducts: state.userProduct.list, mobile: state.publicApi.isMobile, }); const mapDispatchToProps = { getBlogs: blog.list, getBooks: book.list, getUserProducts: userProduct.list, // getVideos: product.listVOD }; export default connect(mapStateToProps, mapDispatchToProps)(Home);