verstka

babel.config.js

@@ -1,6 +1,11 @@
-module.exports = function(api) {
+module.exports = function (api) {
     api.cache(true);
     return {
         presets: ['babel-preset-expo'],
+        plugins: [
+            'react-native-reanimated/plugin',
+            'react-native-paper/babel'
+        ]
     };
+
 };

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@expo/webpack-config": "^19.0.0",
+    "@gorhom/bottom-sheet": "^4",
     "@react-navigation/bottom-tabs": "^6.5.8",
     "@react-navigation/native": "^6.1.7",
     "@reduxjs/toolkit": "^1.9.5",
@@ -22,15 +23,18 @@
     "expo-status-bar": "~1.6.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "0.72.4",
+    "react-native": "0.72.5",
+    "react-native-gesture-handler": "^2.13.2",
     "react-native-modal": "^13.0.1",
+    "react-native-paper": "^5.10.6",
+    "react-native-reanimated": "~3.3.0",
     "react-native-responsive-dimensions": "^3.1.1",
     "react-native-responsive-fontsize": "^0.5.1",
-    "react-native-safe-area-context": "^4.7.2",
+    "react-native-safe-area-context": "4.6.3",
     "react-native-screens": "~3.22.0",
     "react-native-vector-icons": "^10.0.0",
     "react-native-web": "~0.19.6",
-    "react-native-webview": "^13.6.0",
+    "react-native-webview": "13.2.2",
     "react-redux": "^8.1.2",
     "redux": "^4.2.1"
   },

src/App.tsx

@@ -5,18 +5,25 @@ import {useFonts} from 'expo-font';
 import {store} from "./redux/store";
 import React from "react";
 import CommonPage from "./screens/CommonPage/CommonPage";
+import {BottomSheetModalProvider} from "@gorhom/bottom-sheet";
+import {GestureHandlerRootView} from "react-native-gesture-handler";
 
 
 export default function App() {
     let [fontsLoading] = useFonts({
-        'SF Pro Text': require('./assets/fonts/SF-Pro-Text-Regular.otf')
+        // 'SF Pro Text': require('./assets/fonts/SF-Pro-Text-Regular.otf')
     })
     if (!fontsLoading)
         return <View><Text>Loading...</Text></View>
 
     return (
         <Provider store={store}>
+            <GestureHandlerRootView style={{flex: 1}}>
+                <BottomSheetModalProvider>
                     <CommonPage/>
+                </BottomSheetModalProvider>
+            </GestureHandlerRootView>
+
         </Provider>
 
     );
@@ -25,7 +32,6 @@ export default function App() {
 const styles = StyleSheet.create({
     container: {
         flex: 1,
-        backgroundColor: '#fff',
         alignItems: 'center',
         justifyContent: 'center',
     },

src/components/BasicButton/BasicButton.tsx

@@ -7,16 +7,19 @@ import DText from "../DText/DText";
 type Props = {
     label: string;
     style?: StyleProp<ViewStyle>;
+    containerStyle?: StyleProp<ViewStyle>;
     isUnset?: boolean;
     onPress?: (event: GestureResponderEvent) => void
 };
 
-const BasicButton: FC<Props> = ({label, onPress, style, isUnset = false}) => {
+const BasicButton: FC<Props> = ({label, onPress, containerStyle, style, isUnset = false}) => {
     return (
         <TouchableOpacity onPress={onPress}>
+
                 <View style={[styles.container, style]}>
                     <DText style={styles.text}>{label}</DText>
                 </View>
+
         </TouchableOpacity>
     );
 };

src/components/DTitle/DTitle.tsx

@@ -2,7 +2,7 @@ import React, {FC, ReactElement} from "react";
 import {StyleProp, StyleSheet, Text, TextStyle, View, ViewStyle} from 'react-native';
 import {RFPercentage} from "react-native-responsive-fontsize";
 import DText from "../DText/DText";
-import {responsiveWidth} from "react-native-responsive-dimensions";
+import {responsiveScreenFontSize, responsiveWidth} from "react-native-responsive-dimensions";
 
 type Props = {
     children: string;
@@ -13,8 +13,8 @@ const DTitle: FC<Props> = ({children, style}) => {
 }
 const styles = StyleSheet.create({
     text: {
-        fontSize: responsiveWidth(4.5),
-        fontWeight: "600",
+        fontSize: responsiveScreenFontSize(2),
+        fontWeight: "500",
         fontStyle: "normal"
     }
 })

src/components/OrderCard/OrderCard.tsx

@@ -31,17 +31,19 @@ const OrderCard: FC<Props> = ({onPress}) => {
                     <Image style={styles.image} source={{uri: order.imageUrl}}/>
                 </View>
                 <View style={styles.description}>
+                    <View style={styles.descriptionContent}>
                         <View style={styles.title}>
 
                             <DTitle>{order.orderNumber}</DTitle>
                             <Image source={require('assets/icons/marketplaces/ozon.png')} style={styles.titleImage}/>
                         </View>
-
                         <DText>Количество: 5</DText>
                         <DText>Поставщик: {order.supplierName}</DText>
                         <DText>Селлер: {order.sellerName}</DText>
                         <DText>Цвет: ГОЛУБОЙ</DText>
-                    <View style={styles.statusContainer}>
+                    </View>
+
+                    <View style={styles.descriptionStatus}>
                         <DText>
                             Ожидает сборки
                         </DText>
@@ -57,12 +59,10 @@ const styles = StyleSheet.create({
     container: {
         backgroundColor: "white",
         display: "flex",
-        borderRadius: RFPercentage(5),
+        borderRadius: RFPercentage(3),
         height: responsiveHeight(20),
         flexDirection: "row",
         padding: RFPercentage(2),
-
-
     },
     imageWrapper: {
         width: responsiveWidth(30),
@@ -73,15 +73,16 @@ const styles = StyleSheet.create({
 
     },
     description: {
-        backgroundColor:"red",
+        // backgroundColor: "red",
         flex: 1,
         display: "flex",
         flexDirection: "column",
         paddingLeft: responsiveWidth(3),
         gap: 0,
+
     },
     title: {
-        marginBottom: responsiveHeight(1),
+        marginBottom: responsiveHeight(0.5),
         flexDirection: "row",
         alignItems: "center"
     },
@@ -91,8 +92,14 @@ const styles = StyleSheet.create({
         resizeMode: "center",
         marginLeft: responsiveHeight(1)
     },
-    statusContainer: {
+    descriptionContent: {
+        // backgroundColor: "green",
+        flex: 1
+    },
+    descriptionStatus: {
         alignSelf: "flex-end",
+        // backgroundColor: "blue",
+        marginRight: responsiveWidth(2),
     }
 });
 export default OrderCard;

src/components/SearchBar/SearchBar.tsx

@@ -44,10 +44,10 @@ const height = 6;
 const styles = StyleSheet.create({
     container: {
         display: "flex",
-        marginHorizontal: responsiveWidth(5),
         flexDirection: "row-reverse",
         height: responsiveHeight(height),
-        alignItems: "flex-end"
+        alignItems: "flex-end",
+        backgroundColor: "white"
     },
     scanImage: {
         height: responsiveHeight(5),
@@ -58,7 +58,8 @@ const styles = StyleSheet.create({
         borderRadius: 0,
         borderTopRightRadius: responsiveWidth(1),
         borderBottomRightRadius: responsiveWidth(1),
-        width: responsiveWidth(25)
+        width: responsiveWidth(25),
+        flex: 1
     },
     scanImageWrapper: {
         paddingHorizontal: responsiveWidth(1),
@@ -77,7 +78,7 @@ const styles = StyleSheet.create({
         borderBottomLeftRadius: responsiveWidth(1),
         paddingLeft: responsiveHeight(2),
         fontSize: RFPercentage(2),
-        fontFamily: 'SF Pro Text'
+        // fontFamily: 'SF Pro Text'
     }
 })
 

src/components/Separator/Separator.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import {View, StyleSheet, FlexStyle} from 'react-native';
+import {responsiveHeight} from "react-native-responsive-dimensions";
+
+type Props = {
+    width?: any;
+}
+const Separator: React.FC<Props> = ({width = "60%"}) => {
+    return (
+        <View style={styles.container}>
+            <View style={[styles.separator, {width: width}]}/>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        display: "flex",
+        alignItems: "center"
+    },
+    separator: {
+        height: responsiveHeight(0.3), // Толщина разделителя
+        backgroundColor: "#A5A5A5", // Цвет разделителя
+    },
+});
+
+export default Separator;

src/components/SortingButton/SortingButton.tsx

@@ -0,0 +1,42 @@
+import {FC} from "react";
+import {StyleSheet, View, Image, TouchableOpacity, GestureResponderEvent} from "react-native";
+import DText from "../DText/DText";
+import {RFPercentage} from "react-native-responsive-fontsize";
+import {responsiveWidth} from "react-native-responsive-dimensions";
+
+type Props = {
+    onPress?: (event: GestureResponderEvent) => void
+
+};
+const SortingButton: FC<Props> = ({onPress}) => {
+    return (
+        <TouchableOpacity onPress={onPress}>
+            <View style={styles.container}>
+                <View style={styles.imageWrapper}>
+                    <Image style={styles.image} source={require('assets/icons/sorting.png')}/>
+                </View>
+                <DText>Сортировка</DText>
+            </View>
+        </TouchableOpacity>
+
+    )
+}
+
+const styles = StyleSheet.create({
+    container: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        columnGap: responsiveWidth(1)
+    },
+    imageWrapper: {
+        width: RFPercentage(3),
+        height: RFPercentage(3)
+    },
+    image: {
+        resizeMode: 'contain',
+        width: '100%',
+        height: '100%'
+    }
+});
+export default SortingButton;

src/css/colors.tsx

@@ -0,0 +1,3 @@
+export const background = "#F5F5F5";
+export const blue = "#2478F8";
+export const gray = '#A5A5A5';

src/features/interface/interfaceSlice.ts

@@ -0,0 +1,24 @@
+import {createSlice} from "@reduxjs/toolkit";
+
+export interface InterfaceState {
+    dim: boolean;
+}
+
+const initialState: InterfaceState = {
+    dim: false
+}
+export const interfaceSlice = createSlice({
+    name: 'interface',
+    initialState,
+    reducers: {
+        enableDim: (state) => {
+            state.dim = true;
+        },
+        disableDim: (state) => {
+            state.dim = false;
+        }
+    }
+});
+
+export const {enableDim, disableDim} = interfaceSlice.actions;
+export default interfaceSlice.reducer;

src/redux/store.ts

@@ -1,11 +1,13 @@
 import {configureStore} from '@reduxjs/toolkit';
 
 import authReducer from 'features/auth/authSlice';
+import interfaceReducer from 'features/interface/interfaceSlice';
 import {useDispatch} from "react-redux";
 
 export const store = configureStore({
     reducer: {
         auth: authReducer,
+        interface: interfaceReducer
     },
 });
 

src/screens/CommonPage/CommonPage.tsx

@@ -3,13 +3,17 @@ import LoginScreen from "../LoginScreen/LoginScreen";
 import MainScreen from "../MainScreen/MainScreen";
 import SearchBar from "../../components/SearchBar/SearchBar";
 import React from "react";
+import {background} from "../../css/colors";
+import {useSelector} from "react-redux";
+import {RootState} from "../../redux/store";
 
 function CommonPage() {
-
+    const dim = useSelector((state: RootState) => state.interface.dim);
     return (
 
         <View style={styles.main}>
             <MainScreen/>
+            <View style={[styles.overlay, {display: dim ? 'flex' : 'none'}]}/>
         </View>
 
     )
@@ -20,7 +24,13 @@ const styles = StyleSheet.create({
         display: "flex",
         flexDirection: "column",
         flexGrow: 1,
-        flex: 1
+        flex: 1,
+        backgroundColor: background
+    },
+    overlay: {
+        ...StyleSheet.absoluteFillObject,
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        zIndex: 2,
     }
 });
 

src/screens/MainScreen/MainScreen.tsx

@@ -5,7 +5,7 @@ import BoxScreen from "../BoxScreen/BoxScreen";
 import BarcodeScreen from "../BarcodeScreen/BarcodeScreen";
 import MoneyScreen from "../MoneyScreen/MoneyScreen";
 import ProfileScreen from "../ProfileScreen/ProfileScreen";
-import {NavigationContainer} from "@react-navigation/native";
+import {DefaultTheme, NavigationContainer} from "@react-navigation/native";
 import moneyScreen from "../MoneyScreen/MoneyScreen";
 import profileScreen from "../ProfileScreen/ProfileScreen";
 import {responsiveHeight, responsiveWidth} from "react-native-responsive-dimensions";
@@ -13,6 +13,7 @@ import {RFPercentage} from "react-native-responsive-fontsize";
 import LoginScreen from "../LoginScreen/LoginScreen";
 import OrderScreen from "../OrderScreen/OrderScreen";
 import OrdersScreen from "../OrdersScreen/OrdersScreen";
+import {background} from "../../css/colors";
 
 
 interface CustomTabProps {
@@ -31,7 +32,7 @@ const CustomTab = ({name, component, icon}: CustomTabProps) => ({
                 style={{
                     width: RFPercentage(4),
                     height: RFPercentage(4),
-                    tintColor: color
+                    tintColor: color,
                 }}
             />
         ),
@@ -71,11 +72,18 @@ function MainScreen() {
     ];
 
     return (
-        <NavigationContainer>
+        <NavigationContainer theme={{
+            ...DefaultTheme,
+            colors: {
+                ...DefaultTheme.colors,
+                background: background,
+                card: background
+            },
+        }}>
 
             <Tab.Navigator screenOptions={{
                 tabBarStyle: styles.tabBarStyle,
-                headerTitle: ""
+                headerTitle: "",
             }}>
                 {tabScreens.map(tabScreen =>
                     <Tab.Screen key={tabScreen.name} {...CustomTab({
@@ -92,18 +100,21 @@ function MainScreen() {
 
 const styles = StyleSheet.create({
     container: {
-        flex: 1
+        flex: 1,
+
+
     },
     tabBarStyle: {
         position: 'absolute',
         left: responsiveWidth(10),
         right: responsiveWidth(10),
         bottom: 0,
-        borderTopLeftRadius: 18,
-        borderTopRightRadius: 18,
+        borderTopLeftRadius: RFPercentage(3),
+        borderTopRightRadius: RFPercentage(3),
         elevation: 10,
         height: responsiveHeight(8),
-        paddingHorizontal: responsiveWidth(5)
+        paddingHorizontal: responsiveWidth(5),
+        backgroundColor: "white"
     }
 
 })

src/screens/OrderScreen/OrderScreen.tsx

@@ -65,42 +65,44 @@ function OrderScreen() {
 
 const styles = StyleSheet.create({
     container: {
-        padding: 30,
         width: "100%",
         height: "100%",
-        overflow: "hidden",
         display: "flex",
         flex: 1,
+        paddingHorizontal: responsiveWidth(5)
+
     },
     dataContainer: {
-        backgroundColor: "black",
+        // backgroundColor: "black",
         display: "flex",
         flexDirection: "row",
+        columnGap: responsiveWidth(3)
     },
     buttonsContainer: {
-        backgroundColor: "blue",
+        // backgroundColor: "blue",
         flex: 1,
         display: "flex",
         justifyContent: "center",
         paddingHorizontal: responsiveWidth(10)
     },
     buttonsWrapper: {
-        backgroundColor: "red",
+        // backgroundColor: "red",
         rowGap: responsiveHeight(3)
     },
     imageWrapper: {
         width: responsiveWidth(40),
+        height: responsiveHeight(40),
         // height: responsiveHeight(40),
-        backgroundColor: "red",
-        padding: RFPercentage(1)
+        // backgroundColor: "red",
     },
     image: {
         flex: 1,
         borderRadius: RFPercentage(3)
     },
     contentContainer: {
-        padding: RFPercentage(1),
-        backgroundColor: "pink",
+        padding: RFPercentage(2),
+        backgroundColor: "white",
+        borderRadius: RFPercentage(3),
         flex: 1
 
     },

src/screens/OrdersScreen/OrdersScreen.tsx

@@ -2,28 +2,99 @@ import {ScrollView, StyleSheet, View} from "react-native";
 import SearchBar from "../../components/SearchBar/SearchBar";
 import OrderCard from "../../components/OrderCard/OrderCard";
 import {RFPercentage} from "react-native-responsive-fontsize";
-import {responsiveHeight} from "react-native-responsive-dimensions";
+import {responsiveHeight, responsiveWidth} from "react-native-responsive-dimensions";
+import SortingButton from "../../components/SortingButton/SortingButton";
+import {useDispatch} from "react-redux";
+import {enableDim, disableDim} from "../../features/interface/interfaceSlice";
+import {BottomSheetModal} from "@gorhom/bottom-sheet";
+import {useMemo, useRef, useState} from "react";
+import {RadioButton, Button} from "react-native-paper";
+import DText from "../../components/DText/DText";
+import {blue} from "../../css/colors";
+import DTitle from "../../components/DTitle/DTitle";
+import BasicButton from "../../components/BasicButton/BasicButton";
+import authSlice from "../../features/auth/authSlice";
 
 function OrdersScreen() {
+
+    const dispatch = useDispatch();
+    const bottomSheetModalRef = useRef<BottomSheetModal>(null);
+    const snapPoints = useMemo(() => ['30%', '30%'], []);
+    const [sortingValue, setSortingValue] = useState("createdOn");
     return (
         <View style={styles.container}>
             <SearchBar onSearch={() => {
             }}/>
+            <View style={styles.sortingButtonWrapper}>
+                <SortingButton onPress={() => {
+                    dispatch(enableDim());
+                    bottomSheetModalRef.current?.present();
+
+                }}/>
+            </View>
             <View style={styles.content}>
                 <ScrollView keyboardShouldPersistTaps={"never"} showsHorizontalScrollIndicator={false}
                             showsVerticalScrollIndicator={false}
                             contentContainerStyle={styles.scrollContainer}>
 
-                    <OrderCard />
                     <OrderCard/>
                     <OrderCard/>
                     <OrderCard/>
                     <OrderCard/>
                     <OrderCard/>
                     <OrderCard/>
+                    <OrderCard/>
+
                 </ScrollView>
 
             </View>
+            <BottomSheetModal
+                ref={bottomSheetModalRef}
+                snapPoints={snapPoints}
+                onDismiss={() => {
+                    dispatch(disableDim());
+                }}>
+                <View style={styles.sortingModalContainer}>
+                    <View style={styles.radioButtonContainer}>
+                        <RadioButton
+                            color={blue}
+                            uncheckedColor={'black'}
+                            value={'createdOn'}
+                            status={sortingValue == 'createdOn' ? 'checked' : 'unchecked'}
+                            onPress={() => setSortingValue('createdOn')}
+
+                        />
+                        <DText>По дате создания</DText>
+                    </View>
+                    <View style={styles.radioButtonContainer}>
+                        <RadioButton
+                            color={blue}
+                            uncheckedColor={'black'}
+                            value={'shipmentDate'}
+                            status={sortingValue == 'shipmentDate' ? 'checked' : 'unchecked'}
+                            onPress={() => setSortingValue('shipmentDate')}
+                        />
+                        <DText>По дате отгрузки</DText>
+                    </View>
+                    <View style={styles.radioButtonContainer}>
+                        <RadioButton
+                            color={blue}
+                            uncheckedColor={'black'}
+                            value={'shipmentDatee'}
+                            status={sortingValue == 'shipmentDatee' ? 'checked' : 'unchecked'}
+                            onPress={() => setSortingValue('shipmentDatee')}
+                        />
+                        <DText>По дате дрочки</DText>
+                    </View>
+                    <View style={styles.sortingModalButton}>
+                        <BasicButton onPress={() => {
+                            bottomSheetModalRef.current?.dismiss();
+                        }} label={'Применть'}/>
+
+                    </View>
+
+                </View>
+            </BottomSheetModal>
         </View>
     )
 }
@@ -33,15 +104,32 @@ const styles = StyleSheet.create({
         width: "100%",
         height: "100%",
         display: "flex",
+        paddingHorizontal: responsiveWidth(5),
+        rowGap: responsiveHeight(2),
+        fontWeight: '500'
     },
     content: {
         flex: 1,
-        paddingHorizontal: RFPercentage(3),
-        paddingTop: RFPercentage(3)
     },
     scrollContainer: {
         rowGap: responsiveHeight(2)
 
+    },
+    radioButtonContainer: {
+        flexDirection: "row",
+        alignItems: 'center',
+    },
+    sortingButtonWrapper: {},
+    sortingModalContainer: {
+        width: "100%",
+        height: "100%",
+        flex: 1,
+        padding: RFPercentage(3),
+        flexDirection: "column",
+    },
+    sortingModalButton: {
+        paddingHorizontal: responsiveWidth(30),
+        marginTop: "auto"
     }
 });
 

src/screens/ProfileScreen/ProfileScreen.tsx

@@ -1,14 +1,197 @@
-import {Button, Text, View} from "react-native";
+import {Button, Text, View, StyleSheet, TouchableOpacity, Image, ScrollView} from "react-native";
 import {useAppDispatch} from "../../redux/store";
 import * as process from "process";
+import {responsiveFontSize, responsiveHeight, responsiveWidth} from "react-native-responsive-dimensions";
+import {background, blue, gray} from "../../css/colors";
+import {RFPercentage} from "react-native-responsive-fontsize";
+import DText from "../../components/DText/DText";
+import DTitle from "../../components/DTitle/DTitle";
+import {ScreenStackHeaderLeftView} from "react-native-screens";
+import Separator from "../../components/Separator/Separator";
+import {BottomSheetModal} from "@gorhom/bottom-sheet";
+import {useMemo, useRef, useState} from "react";
 
-function ProfileScreen() {
-
+type SettingsElementProps = {
+    icon: any;
+    title: string;
+}
+const SettingsElement: React.FC<SettingsElementProps> = ({icon, title}) => {
     return (
-        <View>
-            <Text style={{fontSize: 36}}>Profile</Text>
+        <TouchableOpacity>
+
+            <View style={styles.actionsCarouselElementContainer}>
+                <View style={styles.actionsCarouselImageWrapper}>
+                    <Image style={styles.actionsCarouselImage} source={icon}/>
+                </View>
+                <DText>{title}</DText>
+            </View>
+        </TouchableOpacity>
+
+    )
+}
+type HistoryElementProps = {
+    cost: number;
+    description: string;
+    color: string;
+}
+const HistoryElement: React.FC<HistoryElementProps> = ({cost, description, color}) => {
+    const formatNumber = (n: number): string => n >= 0 ? `+${n}` : `${n}`;
+    return (
+        <View style={styles.historyElementContainer}>
+            <DText style={{
+                fontSize: responsiveFontSize(2),
+                color: color,
+                fontWeight: "500"
+            }}>{formatNumber(cost)} руб</DText>
+            <DText style={{fontSize: responsiveFontSize(1.5), color: gray, fontWeight: "400"}}>{description}</DText>
         </View>
     )
 }
 
+function ProfileScreen() {
+    const bottomSheetModalRef = useRef<BottomSheetModal>(null);
+    const snapPoints = useMemo(() => ['25%', '40%'], []);
+    const [modalVisible, setModalVisible] = useState(false);
+    return (
+        <View style={styles.container}>
+            <View style={styles.header}>
+                <View style={styles.headerInfo}>
+                    <DTitle style={styles.headerText}>Ваш баланс: 228 руб</DTitle>
+                    <DTitle style={styles.headerText}>Собрано товаров: 1337 шт</DTitle>
+                </View>
+
+            </View>
+            <View style={styles.content}>
+                <View style={styles.actionsCarouselContainer}>
+                    <ScrollView horizontal={true}
+                                showsVerticalScrollIndicator={false}
+                                showsHorizontalScrollIndicator={false}
+                                contentContainerStyle={styles.actionsCarousel}
+                    >
+                        <SettingsElement icon={require('assets/icons/settings/withdraw.png')} title={'Вывод'}/>
+                        <SettingsElement icon={require('assets/icons/settings/statistics.png')} title={'Статистика'}/>
+                        <SettingsElement icon={require('assets/icons/settings/printer.png')} title={'Принтеры'}/>
+                    </ScrollView>
+                </View>
+                <Separator/>
+                <View style={styles.historyContainer}>
+                    <DTitle>История операций</DTitle>
+                    <ScrollView
+                        showsHorizontalScrollIndicator={false}
+                        showsVerticalScrollIndicator={false}
+                        style={styles.historyElements}
+                        contentContainerStyle={styles.historyElementsContainer}>
+                        <HistoryElement cost={25} description={"сбор товара №36243869"} color={"#2478F8"}/>
+                        <HistoryElement cost={25} description={"сбор товара №36243869"} color={"#2478F8"}/>
+                        <HistoryElement cost={25} description={"сбор товара №36243869"} color={"#2478F8"}/>
+                        <HistoryElement cost={25} description={"сбор товара №36243869"} color={"#2478F8"}/>
+                        <HistoryElement cost={25} description={"сбор товара №36243869"} color={"#2478F8"}/>
+                        <HistoryElement cost={25} description={"сбор товара №36243869"} color={"#2478F8"}/>
+                        <HistoryElement cost={25} description={"сбор товара №36243869"} color={"#2478F8"}/>
+                        <HistoryElement cost={25} description={"сбор товара №36243869"} color={"#2478F8"}/>
+                        <HistoryElement cost={25} description={"сбор товара №36243869"} color={"#2478F8"}/>
+                        <HistoryElement cost={25} description={"сбор товара №36243869"} color={"#2478F8"}/>
+                        <HistoryElement cost={25} description={"сбор товара №36243869"} color={"#2478F8"}/>
+                    </ScrollView>
+                </View>
+            </View>
+            <BottomSheetModal ref={bottomSheetModalRef}
+                              snapPoints={snapPoints}
+                              onDismiss={() => {
+                                  setModalVisible(false);
+                              }}
+            >
+                <View style={{flex: 1}}>
+                    <DText>хуй</DText>
+                </View>
+            </BottomSheetModal>
+
+            <View style={[styles.overlay, {display: modalVisible ? 'flex' : 'none'}]}/>
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    container: {
+        // backgroundColor: "red",
+        flex: 1,
+        display: "flex",
+        flexDirection: "column",
+    },
+    overlay: {
+        ...StyleSheet.absoluteFillObject,  // Это заполнит родительский элемент абсолютным позиционированием
+        backgroundColor: 'rgba(104, 104, 104, 0.50)',
+        zIndex: 2,  // Значение zIndex больше, чем у content, поэтому overlay будет выше
+    },
+    historyElementContainer: {
+        width: "100%",
+        backgroundColor: "white",
+        borderRadius: RFPercentage(2),
+        padding: RFPercentage(2),
+        elevation: 1
+    },
+    historyContainer: {
+        paddingVertical: responsiveHeight(2),
+        flex: 1,
+        // backgroundColor: "red"
+    },
+    historyElements: {
+        marginTop: responsiveHeight(3),
+    },
+    historyElementsContainer: {
+        rowGap: responsiveHeight(2),
+    },
+    header: {
+        backgroundColor: blue,
+        borderBottomLeftRadius: RFPercentage(3),
+        borderBottomRightRadius: RFPercentage(3),
+        elevation: 10,
+        paddingHorizontal: responsiveWidth(5),
+        paddingVertical: responsiveHeight(3),
+        color: "white",
+        display: "flex",
+        flexDirection: "row"
+    },
+    headerText: {
+        color: "white"
+    },
+    headerInfo: {
+        // backgroundColor: "red"
+    },
+    actionsCarousel: {
+        flexDirection: "row",
+        columnGap: responsiveWidth(3),
+    },
+    actionsCarouselContainer: {
+        // backgroundColor: "red",
+        paddingVertical: responsiveHeight(5)
+    },
+    actionsCarouselImage: {
+        resizeMode: "contain",
+        flex: 1,
+        width: "100%",
+        height: "100%",
+    },
+    actionsCarouselImageWrapper: {
+        width: RFPercentage(10),
+        height: RFPercentage(10),
+        backgroundColor: "white",
+        borderRadius: 100,
+        borderWidth: RFPercentage(0.3),
+        padding: RFPercentage(1),
+        justifyContent: "center",
+        alignItems: "center"
+
+    },
+    actionsCarouselElementContainer: {
+        display: "flex",
+        alignItems: "center",
+
+    },
+    content: {
+        flex: 1,
+        paddingHorizontal: responsiveWidth(5),
+    },
+
+})
 export default ProfileScreen;