You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

78 lines
2.0 KiB

import React from "react";
import {
View,
Image,
Pressable,
FlatList,
Platform,
} from "react-native";
import { useNavigation } from "@react-navigation/native";
import tw from "tailwind-rn";
const ios = Platform.OS === "ios";
import { connect } from "react-redux";
function Scroll({ books, mobile }) {
const Box = ({ books }) => {
const Product = ({ book, position }) => {
const navigation = useNavigation();
return (
<Pressable
onPress={() =>
navigation.navigate("Product", { id: book?.id, type: "book" })
}
style={[
tw("mr-1 overflow-hidden"),
{
width: position === 0 ? mobile ? 163 : 240 : mobile ? 84 : 125,
height: position === 0 ? mobile ? 245 : 350 : mobile ? 118 : 170,
marginLeft : position === 0 ? 16 : 4,
},
]}
>
<Image
resizeMode="contain"
source={{ uri: `https://dnvn.ir/api/v1/file/${book.fileIds}` }}
style={{ width: "100%", height: "100%" }}
/>
</Pressable>
);
};
return (
<View
style={[
tw(
`flex justify-between ${
ios ? "flex-wrap" : "flex-wrap-reverse"
}`
),
{ height: mobile ? 245 : 350, direction: "rtl" },
]}
>
{books.slice(0,14).map((book, index) => (
<Product book={book} position={Number(index)} key={index} />
))}
</View>
);
};
return (
<View style={[tw(`flex mb-5`)]}>
<FlatList
showsHorizontalScrollIndicator={false}
horizontal={true}
inverted={true}
style={[tw("mt-3 pb-2")]}
data={[{ id: 0 }]}
renderItem={({}) => <Box books={books} />}
keyExtractor={(item) => item.id}
/>
</View>
);
}
const mapStateToProps = (state) => ({
mobile : state.publicApi.mobile
});
export default connect(mapStateToProps, {})(Scroll);