@one-am/react-native-simple-image-slider 0.14.0 → 0.16.0

package/src/SimpleImageSlider.tsx

@@ -19,6 +19,12 @@ export type SimpleImageSliderProps = BaseSimpleImageSliderProps & {
      * @description Passed to the {@link FullScreenImageSlider} component.
      */
     FullScreenCloseButtonIcon?: FullScreenImageSliderProps['CloseButtonIcon'];
+    /**
+     * @description The aspect ratio of the images when full screen.
+     *
+     * @default {@link FullScreenImageSliderProps.imageAspectRatio}
+     */
+    fullScreenImageAspectRatio?: number;
 };
 
 /**
@@ -33,6 +39,8 @@ const SimpleImageSlider = forwardRef<FlashList<SimpleImageSliderItem>, SimpleIma
             onViewableItemChange,
             FullScreenCloseButtonIcon,
             renderFullScreenDescription,
+            imageAspectRatio,
+            fullScreenImageAspectRatio,
             ...props
         },
         ref
@@ -72,6 +80,7 @@ const SimpleImageSlider = forwardRef<FlashList<SimpleImageSliderItem>, SimpleIma
             <>
                 <BaseListImageSlider
                     {...props}
+                    imageAspectRatio={imageAspectRatio}
                     data={data}
                     ref={mergeRefs(ref, listRef)}
                     onItemPress={fullScreenEnabled ? openFullScreen : onItemPress}
@@ -80,6 +89,7 @@ const SimpleImageSlider = forwardRef<FlashList<SimpleImageSliderItem>, SimpleIma
                 {fullScreenEnabled ? (
                     <FullScreenImageSlider
                         {...props}
+                        imageAspectRatio={fullScreenImageAspectRatio ?? imageAspectRatio}
                         ref={fullScreenListRef}
                         open={fullScreen}
                         onRequestClose={onRequestClose}

package/src/SimpleImageSliderThemeProvider.tsx

@@ -1,30 +1,49 @@
-import React, { type PropsWithChildren, useMemo } from 'react';
-import { type DefaultTheme, ThemeProvider } from 'styled-components/native';
+import React, { createContext, type PropsWithChildren, useContext, useMemo } from 'react';
+
+export type SimpleImageSliderTheme = {
+    colors: {
+        pageCounterBackground: string;
+        pageCounterBorder: string;
+        fullScreenCloseButton: string;
+        descriptionContainerBorder: string;
+    };
+};
+
+const defaultTheme: SimpleImageSliderTheme = {
+    colors: {
+        pageCounterBackground: '#D3D3D3',
+        pageCounterBorder: '#000000',
+        fullScreenCloseButton: '#FFFFFF',
+        descriptionContainerBorder: '#FFFFFF',
+    },
+};
+
+const ThemeContext = createContext<SimpleImageSliderTheme>(defaultTheme);
 
 export type SimpleImageSliderThemeProviderProps = PropsWithChildren<{
     overrides?: {
-        colors: Partial<DefaultTheme['colors']>;
+        colors: Partial<SimpleImageSliderTheme['colors']>;
     };
 }>;
 
+export function useSimpleImageSliderTheme() {
+    return useContext(ThemeContext);
+}
+
 export default function SimpleImageSliderThemeProvider({
     overrides,
     children,
 }: SimpleImageSliderThemeProviderProps) {
-    const theme: DefaultTheme = useMemo(
+    const theme: SimpleImageSliderTheme = useMemo(
         () => ({
+            ...defaultTheme,
             colors: {
-                simpleImageSlider: {
-                    pageCounterBackground: '#D3D3D3',
-                    pageCounterBorder: '#000000',
-                    fullScreenCloseButton: '#FFFFFF',
-                    descriptionContainerBorder: '#FFFFFF',
-                    ...overrides?.colors?.simpleImageSlider,
-                },
+                ...defaultTheme.colors,
+                ...overrides?.colors,
             },
         }),
-        [overrides?.colors?.simpleImageSlider]
+        [overrides?.colors]
     );
 
-    return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
+    return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
 }

package/src/index.tsx

@@ -1,5 +1,8 @@
-import SimpleImageSliderThemeProvider from './SimpleImageSliderThemeProvider';
-import type { SimpleImageSliderTheme } from './@types/styled';
+import SimpleImageSliderThemeProvider, {
+    useSimpleImageSliderTheme,
+    type SimpleImageSliderTheme,
+    type SimpleImageSliderThemeProviderProps,
+} from './SimpleImageSliderThemeProvider';
 import BaseListImageSlider, { type BaseSimpleImageSliderProps } from './BaseSimpleImageSlider';
 import SimpleImageSlider, { type SimpleImageSliderProps } from './SimpleImageSlider';
 import FullScreenImageSlider, { type FullScreenImageSliderProps } from './FullScreenImageSlider';
@@ -9,7 +12,9 @@ import PageCounter, { type PageCounterProps } from './PageCounter';
 
 export {
     SimpleImageSliderThemeProvider,
+    useSimpleImageSliderTheme,
     type SimpleImageSliderTheme,
+    type SimpleImageSliderThemeProviderProps,
     BaseListImageSlider,
     type BaseSimpleImageSliderProps,
     SimpleImageSlider,

package/lib/commonjs/@types/styled.d.js

@@ -1,4 +0,0 @@
-"use strict";
-
-require("styled-components/native");
-//# sourceMappingURL=styled.d.js.map

package/lib/commonjs/@types/styled.d.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["require"],"sourceRoot":"../../../src","sources":["@types/styled.d.ts"],"mappings":";;AAAAA,OAAA","ignoreList":[]}

package/lib/module/@types/styled.d.js

@@ -1,2 +0,0 @@
-import 'styled-components/native';
-//# sourceMappingURL=styled.d.js.map

package/lib/module/@types/styled.d.js.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sourceRoot":"../../../src","sources":["@types/styled.d.ts"],"mappings":"AAAA,OAAO,0BAA0B","ignoreList":[]}

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

@@ -1,17 +0,0 @@
-import 'styled-components/native';
-
-export type SimpleImageSliderTheme = {
-    colors: {
-        simpleImageSlider: {
-            pageCounterBackground: string;
-            pageCounterBorder: string;
-            fullScreenCloseButton: string;
-            descriptionContainerBorder: string;
-        };
-    };
-};
-
-declare module 'styled-components/native' {
-    // eslint-disable-next-line @typescript-eslint/no-empty-interface
-    export interface DefaultTheme extends SimpleImageSliderTheme {}
-}