@one-am/react-native-simple-image-slider 0.2.2

package/lib/typescript/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,6BAA6B,MAAM,iCAAiC,CAAC;AAC5E,OAAO,mBAAmB,EAAE,EAAE,KAAK,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AAC/F,OAAO,iBAAiB,EAAE,EAAE,KAAK,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AACrF,OAAO,qBAAqB,EAAE,EAAE,KAAK,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AAEjG,OAAO,EACH,6BAA6B,IAAI,8BAA8B,EAC/D,mBAAmB,EACnB,KAAK,0BAA0B,EAC/B,iBAAiB,EACjB,KAAK,sBAAsB,EAC3B,qBAAqB,EACrB,KAAK,0BAA0B,GAClC,CAAC"}

package/lib/typescript/src/utils/clamp.d.ts

@@ -0,0 +1,2 @@
+export declare const clamp: (value: number, min: number, max: number) => number;
+//# sourceMappingURL=clamp.d.ts.map

package/lib/typescript/src/utils/clamp.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"clamp.d.ts","sourceRoot":"","sources":["../../../../src/utils/clamp.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,KAAK,UAAW,MAAM,OAAO,MAAM,OAAO,MAAM,WAG5D,CAAC"}

package/lib/typescript/src/utils/renderProp.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export type RenderProp = React.ComponentType<unknown> | React.ReactElement | string | undefined | null;
+export default function renderProp(Component: RenderProp): string | React.JSX.Element | null;
+//# sourceMappingURL=renderProp.d.ts.map

package/lib/typescript/src/utils/renderProp.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderProp.d.ts","sourceRoot":"","sources":["../../../../src/utils/renderProp.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyB,MAAM,OAAO,CAAC;AAE9C,MAAM,MAAM,UAAU,GAChB,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,GAC5B,KAAK,CAAC,YAAY,GAClB,MAAM,GACN,SAAS,GACT,IAAI,CAAC;AAEX,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,SAAS,EAAE,UAAU,qCAYvD"}

package/package.json

@@ -0,0 +1,170 @@
+{
+  "name": "@one-am/react-native-simple-image-slider",
+  "version": "0.2.2",
+  "description": "A simple and performant image slider made with FlashList. Includes a full screen gallery component with gesture support.",
+  "main": "lib/commonjs/index",
+  "module": "lib/module/index",
+  "types": "lib/typescript/src/index.d.ts",
+  "react-native": "src/index",
+  "source": "src/index",
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "example": "yarn workspace @one-am/react-native-simple-image-slider-example",
+    "test": "jest",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "clean": "del-cli lib",
+    "prepare": "bob build",
+    "release": "release-it"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/one-am-it/react-native-simple-image-slider.git"
+  },
+  "author": "one-am <info@oneam.it> (https://github.com/one-am-it)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/one-am-it/react-native-simple-image-slider/issues"
+  },
+  "homepage": "https://github.com/one-am-it/react-native-simple-image-slider#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^17.0.2",
+    "@evilmartians/lefthook": "^1.5.0",
+    "@react-native/eslint-config": "^0.73.1",
+    "@release-it/conventional-changelog": "^5.0.0",
+    "@shopify/flash-list": "^1.6.3",
+    "@types/jest": "^29.5.5",
+    "@types/react": "^18.2.44",
+    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "@typescript-eslint/parser": "^5.62.0",
+    "babel-plugin-styled-components": "^2.1.4",
+    "commitlint": "^17.0.2",
+    "del-cli": "^5.1.0",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-standard-with-typescript": "^37.0.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-n": "^16.6.2",
+    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-native": "^4.1.0",
+    "expo-haptics": "^12.8.1",
+    "expo-image": "^1.10.6",
+    "expo-status-bar": "^1.11.1",
+    "jest": "^29.7.0",
+    "prettier": "^3.2.5",
+    "react": "18.2.0",
+    "react-native": "0.73.5",
+    "react-native-builder-bob": "^0.20.0",
+    "react-native-gesture-handler": "^2.15.0",
+    "react-native-reanimated": "^3.3.0",
+    "react-native-safe-area-context": "^4.9.0",
+    "react-native-svg": "^15.1.0",
+    "release-it": "^15.0.0",
+    "styled-components": "^6.1.8",
+    "tabler-icons-react-native": "^2.42.1",
+    "typescript": "^5.2.2",
+    "typescript-plugin-styled-components": "^3.0.0"
+  },
+  "resolutions": {
+    "@types/react": "^18.2.44",
+    "styled-components": "^6"
+  },
+  "peerDependencies": {
+    "@babel/core": "^7.24.0",
+    "@babel/runtime": "^7.24.0",
+    "expo-haptics": "*",
+    "expo-image": "*",
+    "expo-status-bar": "*",
+    "react": "*",
+    "react-dom": "*",
+    "react-native": "*",
+    "react-native-gesture-handler": "^2.15.0",
+    "react-native-reanimated": "~3.6.2",
+    "react-native-safe-area-context": "*",
+    "styled-components": "^6.1.8",
+    "tabler-icons-react-native": "*",
+    "react-native-svg": "*"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@3.6.1",
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "gitlab": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": "angular"
+      }
+    }
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "dependencies": {
+    "merge-refs": "^1.2.2"
+  }
+}

package/src/@types/styled.d.ts

@@ -0,0 +1,39 @@
+import 'styled-components/native';
+
+export type StyledComponentsTheme = {
+    colors: {
+        pageCounterBackground: string;
+        pageCounterBorder: string;
+        fullScreenCloseButton: string;
+        descriptionContainerBorder: string;
+    };
+    styles: {
+        spacing: {
+            xxs: number;
+            xs: number;
+            s: number;
+            m: number;
+            l: number;
+            xl: number;
+        };
+        borderRadius: {
+            xs: number;
+            s: number;
+            m: number;
+            l: number;
+            xl: number;
+        };
+        borderWidth: {
+            xs: number;
+            s: number;
+            m: number;
+            l: number;
+            xl: number;
+        };
+    };
+};
+
+declare module 'styled-components/native' {
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    export interface DefaultTheme extends StyledComponentsTheme {}
+}

package/src/BaseSimpleImageSlider.tsx

@@ -0,0 +1,281 @@
+import React, {
+    forwardRef,
+    type ReactElement,
+    useCallback,
+    useEffect,
+    useMemo,
+    useRef,
+    useState,
+} from 'react';
+import { FlashList, type ListRenderItemInfo } from '@shopify/flash-list';
+import mergeRefs from 'merge-refs';
+import { Image, type ImageProps } from 'expo-image';
+import { Pressable, type StyleProp, type ViewStyle } from 'react-native';
+import type ViewToken from '@shopify/flash-list/src/viewability/ViewToken';
+import styled from 'styled-components/native';
+import PageCounter from './PageCounter';
+import PinchToZoom from './PinchToZoom';
+import { type SharedValue } from 'react-native-reanimated';
+import { GestureHandlerRootView, ScrollView } from 'react-native-gesture-handler';
+import renderProp, { type RenderProp } from './utils/renderProp';
+
+export type SimpleImageSliderItem = ImageProps & {
+    key: string;
+};
+
+export type BaseSimpleImageSliderProps = {
+    data: SimpleImageSliderItem[] | undefined;
+    style?: StyleProp<ViewStyle>;
+    imageWidth?: number;
+    imageHeight?: number;
+    imageAspectRatio?: number;
+    onItemPress?: (item: SimpleImageSliderItem, index: number) => void;
+    maxPreviewItems?: number;
+    showPageCounter?: boolean;
+    pageCounterPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    renderPageCounter?: (currentPage: number, totalPages: number) => ReactElement;
+    TopRightComponent?: RenderProp;
+    TopLeftComponent?: RenderProp;
+    BottomRightComponent?: RenderProp;
+    BottomLeftComponent?: RenderProp;
+    indexOverride?: number;
+    onViewableItemChange?: (index: number) => void;
+    enablePinchToZoom?: boolean;
+    onPinchToZoomTranslationChange?: (
+        x: SharedValue<number>,
+        y: SharedValue<number>,
+        scale: SharedValue<number>
+    ) => void;
+    onPinchToZoomRequestClose?: () => void;
+};
+
+const StyledAbsoluteComponentContainer = styled.View<{
+    position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+}>`
+    z-index: 1000;
+    position: absolute;
+    bottom: ${({ position, theme }) =>
+        position === 'bottom-left' || position === 'bottom-right'
+            ? `${theme.styles.spacing.m}px`
+            : undefined};
+    top: ${({ position, theme }) =>
+        position === 'top-left' || position === 'top-right'
+            ? `${theme.styles.spacing.m}px`
+            : undefined};
+    left: ${({ position, theme }) =>
+        position === 'top-left' || position === 'bottom-left'
+            ? `${theme.styles.spacing.m}px`
+            : undefined};
+    right: ${({ position, theme }) =>
+        position === 'top-right' || position === 'bottom-right'
+            ? `${theme.styles.spacing.m}px`
+            : undefined};
+`;
+
+const StyledPageCounter = styled(PageCounter)<{
+    position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+}>`
+    z-index: 1000;
+    position: absolute;
+    bottom: ${({ position, theme }) =>
+        position === 'bottom-left' || position === 'bottom-right'
+            ? `${theme.styles.spacing.m}px`
+            : undefined};
+    top: ${({ position, theme }) =>
+        position === 'top-left' || position === 'top-right'
+            ? `${theme.styles.spacing.m}px`
+            : undefined};
+    left: ${({ position, theme }) =>
+        position === 'top-left' || position === 'bottom-left'
+            ? `${theme.styles.spacing.m}px`
+            : undefined};
+    right: ${({ position, theme }) =>
+        position === 'top-right' || position === 'bottom-right'
+            ? `${theme.styles.spacing.m}px`
+            : undefined};
+`;
+
+const StyledContainer = styled(GestureHandlerRootView)<{ aspectRatio?: number }>`
+    aspect-ratio: ${({ aspectRatio }) => aspectRatio ?? 4 / 3};
+    width: 100%;
+`;
+
+const StyledImage = styled(Image)<
+    ImageProps & {
+        imageWidth?: number;
+        imageHeight?: number;
+        imageAspectRatio?: number;
+    }
+>`
+    width: ${({ imageWidth }) => (imageWidth ? `${imageWidth}px` : '100%')};
+    height: ${({ imageHeight }) => (imageHeight ? `${imageHeight}px` : '100%')};
+    aspect-ratio: ${({ imageAspectRatio }) => (imageAspectRatio ? imageAspectRatio : 4 / 3)};
+`;
+
+const StyledPinchToZoom = styled(PinchToZoom)`
+    z-index: 1000;
+`;
+
+const BaseListImageSlider = forwardRef<
+    FlashList<SimpleImageSliderItem>,
+    BaseSimpleImageSliderProps
+>(function BaseListImageSlider(
+    {
+        data,
+        style,
+        imageWidth,
+        imageHeight,
+        imageAspectRatio,
+        onItemPress,
+        maxPreviewItems,
+        showPageCounter = true,
+        pageCounterPosition = 'bottom-left',
+        renderPageCounter,
+        TopRightComponent,
+        TopLeftComponent,
+        BottomRightComponent,
+        BottomLeftComponent,
+        indexOverride,
+        onViewableItemChange,
+        enablePinchToZoom = false,
+        onPinchToZoomTranslationChange,
+        onPinchToZoomRequestClose,
+    },
+    ref
+) {
+    const listRef = useRef<FlashList<SimpleImageSliderItem>>(null);
+    const [currentItem, setCurrentItem] = useState(0);
+
+    const slicedData = useMemo(
+        () => (maxPreviewItems !== undefined ? data?.slice(0, maxPreviewItems) ?? [] : data ?? []),
+        [data, maxPreviewItems]
+    );
+
+    useEffect(() => {
+        setCurrentItem(indexOverride ?? 0);
+
+        listRef.current?.scrollToIndex({ index: indexOverride ?? 0, animated: false });
+    }, [indexOverride, slicedData]);
+
+    const keyExtractor = useCallback((item: SimpleImageSliderItem) => item.key, []);
+
+    const renderItem = useCallback(
+        ({ item, index }: ListRenderItemInfo<SimpleImageSliderItem>) => {
+            return (
+                <Pressable onPress={() => onItemPress?.(item, index)}>
+                    <StyledImage
+                        transition={200}
+                        placeholder={item.placeholder}
+                        placeholderContentFit={'cover'}
+                        imageWidth={imageWidth}
+                        imageHeight={imageHeight}
+                        imageAspectRatio={imageAspectRatio}
+                        recyclingKey={item.key}
+                        source={item.source}
+                        contentFit={'cover'}
+                        contentPosition={'center'}
+                    />
+                </Pressable>
+            );
+        },
+        [imageAspectRatio, imageHeight, imageWidth, onItemPress]
+    );
+
+    const onViewableItemsChanged = useCallback(
+        ({ viewableItems }: { viewableItems: ViewToken[]; changed: ViewToken[] }) => {
+            const newIndex = viewableItems[0]?.index;
+            if (newIndex !== undefined && newIndex !== null) {
+                setCurrentItem(newIndex);
+                onViewableItemChange?.(newIndex);
+            }
+        },
+        [onViewableItemChange]
+    );
+
+    const [scrollEnabled, setScrollEnabled] = useState(true);
+
+    const onScaleChange = useCallback(() => {
+        setScrollEnabled(false);
+    }, []);
+
+    const onScaleReset = useCallback(() => {
+        setScrollEnabled(true);
+    }, []);
+
+    const list = (
+        <FlashList
+            renderScrollComponent={ScrollView}
+            scrollEnabled={scrollEnabled}
+            disableScrollViewPanResponder={enablePinchToZoom ? !scrollEnabled : false}
+            ref={mergeRefs(ref, listRef)}
+            initialScrollIndex={indexOverride ?? currentItem ?? 0}
+            onViewableItemsChanged={onViewableItemsChanged}
+            viewabilityConfig={{
+                itemVisiblePercentThreshold: 55,
+            }}
+            decelerationRate={'fast'}
+            pagingEnabled={true}
+            showsHorizontalScrollIndicator={false}
+            showsVerticalScrollIndicator={false}
+            horizontal={true}
+            keyExtractor={keyExtractor}
+            renderItem={renderItem}
+            data={slicedData}
+            estimatedItemSize={
+                imageWidth ?? (imageHeight ? imageHeight * (imageAspectRatio ?? 4 / 3) : 350)
+            }
+        />
+    );
+
+    return (
+        <StyledContainer aspectRatio={imageAspectRatio} style={style}>
+            {enablePinchToZoom ? (
+                <StyledPinchToZoom
+                    onRequestClose={onPinchToZoomRequestClose}
+                    onTranslationChange={onPinchToZoomTranslationChange}
+                    onScaleChange={onScaleChange}
+                    onScaleReset={onScaleReset}
+                    maximumZoomScale={5}
+                    minimumZoomScale={1}
+                >
+                    {list}
+                </StyledPinchToZoom>
+            ) : (
+                list
+            )}
+            {showPageCounter ? (
+                renderPageCounter ? (
+                    renderPageCounter(currentItem + 1, slicedData.length)
+                ) : (
+                    <StyledPageCounter
+                        position={pageCounterPosition}
+                        totalPages={slicedData.length}
+                        currentPage={currentItem + 1}
+                    />
+                )
+            ) : null}
+            {TopRightComponent ? (
+                <StyledAbsoluteComponentContainer position={'top-right'}>
+                    {renderProp(TopRightComponent)}
+                </StyledAbsoluteComponentContainer>
+            ) : null}
+            {TopLeftComponent ? (
+                <StyledAbsoluteComponentContainer position={'top-left'}>
+                    {renderProp(TopLeftComponent)}
+                </StyledAbsoluteComponentContainer>
+            ) : null}
+            {BottomRightComponent ? (
+                <StyledAbsoluteComponentContainer position={'bottom-right'}>
+                    {renderProp(BottomRightComponent)}
+                </StyledAbsoluteComponentContainer>
+            ) : null}
+            {BottomLeftComponent ? (
+                <StyledAbsoluteComponentContainer position={'bottom-left'}>
+                    {renderProp(BottomLeftComponent)}
+                </StyledAbsoluteComponentContainer>
+            ) : null}
+        </StyledContainer>
+    );
+});
+
+export default BaseListImageSlider;

package/src/FullScreenImageSlider.tsx

@@ -0,0 +1,164 @@
+import React, {
+    forwardRef,
+    type ReactNode,
+    useCallback,
+    useEffect,
+    useMemo,
+    useState,
+} from 'react';
+import { Modal, type ScaledSize, StyleSheet, useWindowDimensions } from 'react-native';
+import { IconX } from 'tabler-icons-react-native';
+import Animated, {
+    runOnJS,
+    type SharedValue,
+    useAnimatedStyle,
+    useSharedValue,
+    withTiming,
+} from 'react-native-reanimated';
+import { setStatusBarStyle } from 'expo-status-bar';
+import styled, { type DefaultTheme, useTheme } from 'styled-components/native';
+import { FlashList } from '@shopify/flash-list';
+import BaseListImageSlider, {
+    type BaseSimpleImageSliderProps,
+    type SimpleImageSliderItem,
+} from './BaseSimpleImageSlider';
+import { type EdgeInsets, useSafeAreaInsets } from 'react-native-safe-area-context';
+
+export type FullScreenImageSliderProps = BaseSimpleImageSliderProps & {
+    open?: boolean;
+    onRequestClose?: () => void;
+    renderDescription?: (index: number) => ReactNode;
+};
+
+const StyledDescriptionContainer = styled.View`
+    position: absolute;
+    border-top-width: 1px;
+    border-top-color: ${({ theme }) => theme.colors.descriptionContainerBorder};
+    width: 100%;
+    padding-top: ${({ theme }) => theme.styles.spacing.l}px;
+`;
+
+const StyledModalCloseButton = styled.TouchableOpacity`
+    position: absolute;
+    z-index: 1000;
+`;
+
+const StyledModalContentContainer = styled(Animated.View)`
+    align-items: center;
+    justify-content: center;
+    gap: ${({ theme }) => theme.styles.spacing.m}px;
+`;
+
+const FullScreenImageSlider = forwardRef<
+    FlashList<SimpleImageSliderItem>,
+    FullScreenImageSliderProps
+>(function FullScreenImageSlider(
+    { open, onRequestClose, renderDescription, onViewableItemChange, ...props },
+    ref
+) {
+    const windowDimensions = useWindowDimensions();
+    const theme = useTheme();
+    const safeAreaInsets = useSafeAreaInsets();
+    const styles = useMemo(
+        () => makeStyles(theme, safeAreaInsets, windowDimensions),
+        [theme, safeAreaInsets, windowDimensions]
+    );
+
+    const [internalIndex, setInternalIndex] = useState<number>(0);
+
+    const internalOnViewableItemChange = useCallback(
+        (index: number) => {
+            setInternalIndex(index);
+            onViewableItemChange?.(index);
+        },
+        [onViewableItemChange]
+    );
+
+    useEffect(() => {
+        if (open) {
+            setStatusBarStyle('light');
+        } else {
+            setStatusBarStyle('dark');
+        }
+    }, [open]);
+
+    const backgroundOpacity = useSharedValue(0);
+
+    const modalContentStyle = useAnimatedStyle(() => {
+        return {
+            backgroundColor: `rgba(0, 0, 0, ${backgroundOpacity.value})`,
+        };
+    }, []);
+
+    const onPinchToZoomTranslationChange = useCallback(
+        (x: SharedValue<number>, y: SharedValue<number>, scale: SharedValue<number>) => {
+            if (scale.value <= 1) {
+                if (x.value === 0 && y.value === 0) {
+                    runOnJS(setStatusBarStyle)('light');
+                    backgroundOpacity.value = withTiming(1);
+                } else {
+                    runOnJS(setStatusBarStyle)('dark');
+                    backgroundOpacity.value = withTiming(0);
+                }
+            } else {
+                backgroundOpacity.value = 1;
+            }
+        },
+        [backgroundOpacity]
+    );
+
+    return (
+        <Modal
+            animationType="fade"
+            onRequestClose={onRequestClose}
+            transparent={true}
+            visible={open}
+        >
+            <StyledModalContentContainer style={[styles.modalContent, modalContentStyle]}>
+                <StyledModalCloseButton style={styles.closeButton} onPress={onRequestClose}>
+                    <IconX color={theme.colors.fullScreenCloseButton} />
+                </StyledModalCloseButton>
+                <BaseListImageSlider
+                    enablePinchToZoom={true}
+                    onPinchToZoomTranslationChange={onPinchToZoomTranslationChange}
+                    onPinchToZoomRequestClose={onRequestClose}
+                    {...props}
+                    onViewableItemChange={internalOnViewableItemChange}
+                    showPageCounter={false}
+                    imageWidth={windowDimensions.width}
+                    ref={ref}
+                />
+
+                {renderDescription ? (
+                    <StyledDescriptionContainer style={styles.descriptionContainer}>
+                        {renderDescription(internalIndex)}
+                    </StyledDescriptionContainer>
+                ) : null}
+            </StyledModalContentContainer>
+        </Modal>
+    );
+});
+
+export default FullScreenImageSlider;
+
+const makeStyles = (
+    theme: DefaultTheme,
+    safeAreaInsets: EdgeInsets,
+    windowDimensions: ScaledSize
+) => {
+    return StyleSheet.create({
+        closeButton: {
+            top: safeAreaInsets.top,
+            right: safeAreaInsets.right + theme.styles.spacing.l,
+        },
+        modalContent: {
+            height: windowDimensions.height,
+            width: windowDimensions.width,
+        },
+        descriptionContainer: {
+            bottom: safeAreaInsets.bottom + 100,
+            paddingLeft: safeAreaInsets.left + theme.styles.spacing.l,
+            paddingRight: safeAreaInsets.right + theme.styles.spacing.l,
+        },
+    });
+};