@adobe/react-native-aepmessaging 7.2.1 → 7.4.0

package/src/ui/components/Inbox/Inbox.tsx

@@ -0,0 +1,275 @@
+/*
+    Copyright 2026 Adobe. All rights reserved.
+    This file is licensed to you under the Apache License, Version 2.0 (the
+    "License"); you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+    http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law
+    or agreed to in writing, software distributed under the License is
+    distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF
+    ANY KIND, either express or implied. See the License for the specific
+    language governing permissions and limitations under the License.
+*/
+
+import React, { cloneElement, ReactElement, useCallback, useEffect, useMemo, useState } from "react";
+import {
+  ActivityIndicator,
+  FlatList,
+  FlatListProps,
+  ListRenderItem,
+  ScrollView,
+  StyleSheet,
+  Text,
+  useWindowDimensions,
+  View,
+} from "react-native";
+import { useContentCardUI } from "../../hooks";
+import InboxProvider, {
+  InboxSettings
+} from "../../providers/InboxProvider";
+import { useTheme } from "../../theme";
+import { ContentViewEvent } from "../../types/ContentViewEvent";
+import { ContentTemplate } from "../../types/Templates";
+import { generateCardHash } from "../../utils/generateCardHash";
+import { loadInboxState, saveInboxState } from "../../utils/inboxStorage";
+import { ContentCardView, ContentViewProps } from "../ContentCardView/ContentCardView";
+import EmptyState from "./EmptyState";
+
+// TODO: consider localizing in the future
+const DEFAULT_EMPTY_MESSAGE = 'No Content Available';
+
+const cardStatusStore = new Map<string, { dismissed: Set<string>; interacted: Set<string> }>();
+
+export interface InboxProps<T> extends Partial<FlatListProps<T>> {
+  LoadingComponent?: ReactElement | null;
+  ErrorComponent?: ReactElement | null;
+  FallbackComponent?: ReactElement | null;
+  EmptyComponent?: ReactElement | null;
+  surface: string;
+  settings: InboxSettings | null;
+  isLoading?: boolean;
+  error?: boolean;
+  CardProps?: Partial<ContentViewProps>;
+}
+
+function InboxInner<T extends ContentTemplate>({
+  contentContainerStyle,
+  LoadingComponent = <ActivityIndicator />,
+  ErrorComponent = null,
+  FallbackComponent = null,
+  EmptyComponent,
+  settings,
+  surface,
+  style,
+  CardProps,
+  ListHeaderComponent,
+  ...props
+}: InboxProps<T> & {
+  settings: InboxSettings;
+}) {
+  const { colors, isDark } = useTheme();
+  const { width: windowWidth, height: windowHeight } = useWindowDimensions();
+  const isLandscape = windowWidth > windowHeight;
+  const { content, error, isLoading } = useContentCardUI(surface);
+
+  const { content: contentSettings } = settings;
+  const { capacity, heading, layout, emptyStateSettings, isUnreadEnabled } = contentSettings;
+
+  const getStore = useCallback(() => {
+    if (!cardStatusStore.has(surface)) {
+      cardStatusStore.set(surface, { dismissed: new Set(), interacted: new Set() });
+    }
+    return cardStatusStore.get(surface)!;
+  }, [surface]);
+
+  const [dismissedIds, setDismissedIds] = useState<Set<string>>(() => new Set(getStore().dismissed));
+  const [interactedIds, setInteractedIds] = useState<Set<string>>(() =>
+    isUnreadEnabled ? new Set(getStore().interacted) : new Set());
+
+  const [storageLoaded, setStorageLoaded] = useState(false);
+  useEffect(() => {
+    const activityId = settings.activityId;
+    if (!activityId) {
+      setStorageLoaded(true);
+      return;
+    }
+    let cancelled = false;
+    loadInboxState(activityId).then((persisted) => {
+      if (cancelled) return;
+      const store = getStore();
+      persisted.dismissed.forEach((id) => store.dismissed.add(id));
+      persisted.interacted.forEach((id) => store.interacted.add(id));
+      setDismissedIds(new Set(store.dismissed));
+      if (isUnreadEnabled) setInteractedIds(new Set(store.interacted));
+      setStorageLoaded(true);
+    });
+    return () => { cancelled = true; };
+  }, [settings.activityId, isUnreadEnabled, getStore]);
+
+  useEffect(() => {
+    if (!storageLoaded) return;
+    const store = getStore();
+    setDismissedIds(new Set(store.dismissed));
+    if (isUnreadEnabled) setInteractedIds(new Set(store.interacted));
+  }, [content, isUnreadEnabled, getStore, storageLoaded]);
+
+  const isHorizontal = layout?.orientation === 'horizontal';
+
+  const displayCards = useMemo(() => {
+    if (!content) return [] as T[];
+    return content
+      .map((it) => ({ item: it, hash: generateCardHash(it) }))
+      .filter(({ hash }) => !dismissedIds.has(hash))
+      .map(({ item, hash }) => {
+        const shouldBeRead =
+          isUnreadEnabled && (interactedIds.has(hash) || item.isRead === true);
+        return shouldBeRead ? { ...item, isRead: true } : item;
+      })
+      .slice(0, capacity) as T[];
+  }, [content, capacity, isUnreadEnabled, dismissedIds, interactedIds]);
+
+  const handleCardEvent = useCallback((event?: ContentViewEvent, data?: ContentTemplate, nativeEvent?: any) => {
+    const cardHash = generateCardHash(data);
+    const store = getStore();
+    if (event === 'onDismiss' && !store.dismissed.has(cardHash)) {
+      store.dismissed.add(cardHash);
+      setDismissedIds((prev) => new Set(prev).add(cardHash));
+      if (settings.activityId) {
+        saveInboxState(settings.activityId, {
+          dismissed: [...store.dismissed],
+          interacted: [...store.interacted],
+        });
+      }
+    } else if (event === 'onInteract' && isUnreadEnabled && !store.interacted.has(cardHash)) {
+      store.interacted.add(cardHash);
+      setInteractedIds((prev) => new Set(prev).add(cardHash));
+      if (settings.activityId) {
+        saveInboxState(settings.activityId, {
+          dismissed: [...store.dismissed],
+          interacted: [...store.interacted],
+        });
+      }
+    }
+    CardProps?.listener?.(event, data, nativeEvent);
+  }, [CardProps, isUnreadEnabled, getStore, settings.activityId]);
+
+  const renderItem: ListRenderItem<T> = useCallback(({ item }) => (
+    <ContentCardView
+      template={item}
+      {...CardProps}
+      listener={handleCardEvent}
+      style={isHorizontal ? [styles.horizontalCardStyles, { width: Math.floor(windowWidth * 0.75) }] : undefined}
+    />
+  ), [isHorizontal, CardProps, windowWidth, handleCardEvent]);
+
+  const EmptyList = useCallback(() => EmptyComponent ?
+    cloneElement(EmptyComponent, { ...emptyStateSettings }) as React.ReactElement :
+    <EmptyState
+      image={isDark ? emptyStateSettings?.image?.darkUrl ?? '' : emptyStateSettings?.image?.url ?? ''}
+      text={emptyStateSettings?.message?.content || DEFAULT_EMPTY_MESSAGE}
+    />, [isDark, emptyStateSettings, EmptyComponent]);
+
+  if (isLoading) return LoadingComponent;
+  if (error) return ErrorComponent;
+  if (!content) return FallbackComponent;
+
+  const topOfInbox =
+      <View>
+        {ListHeaderComponent && ListHeaderComponent as React.ReactElement}
+        {heading?.content ? (
+        <Text
+          accessibilityRole="header"
+          style={[styles.heading, { color: colors.textPrimary }]}
+        >
+          {heading.content}
+        </Text>
+      ) : null}
+      </View>
+
+
+  const listBody = (
+    <FlatList
+      {...props}
+      data={displayCards}
+      keyExtractor={(item: { id: string }) => item.id}
+      contentContainerStyle={[
+        contentContainerStyle,
+        isHorizontal && styles.horizontalListContent,
+        styles.inbox
+      ]}
+      horizontal={isHorizontal}
+      renderItem={renderItem}
+      ListEmptyComponent={<EmptyList />}
+      ListHeaderComponent={!isHorizontal ? topOfInbox : undefined}
+    />
+  );
+
+  const horizontalChrome =
+    isHorizontal ? (
+      isLandscape ? (
+        <ScrollView
+          contentContainerStyle={{ paddingBottom: 8 }}
+          keyboardShouldPersistTaps="handled"
+          nestedScrollEnabled
+        >
+          {topOfInbox}
+          {listBody}
+        </ScrollView>
+      ) : (
+        <View>
+          {topOfInbox}
+          {listBody}
+        </View>
+      )
+    ) : listBody;
+
+  return <InboxProvider settings={settings}>{horizontalChrome}</InboxProvider>;
+}
+
+/**
+ * @experimental First React Native inbox UI
+ */
+export function Inbox<T extends ContentTemplate>({
+  LoadingComponent = <ActivityIndicator />,
+  ErrorComponent = null,
+  FallbackComponent = null,
+  surface,
+  settings,
+  isLoading,
+  error,
+  ...props
+}: InboxProps<T>): React.ReactElement {
+
+  if (isLoading) return LoadingComponent as React.ReactElement;
+  if (error) return ErrorComponent as React.ReactElement;
+  if (!settings) return FallbackComponent as React.ReactElement;
+
+  return (
+    <InboxInner
+      settings={settings}
+      surface={surface}
+      LoadingComponent={LoadingComponent}
+      ErrorComponent={ErrorComponent}
+      FallbackComponent={FallbackComponent}
+      {...props}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  inbox: {
+    flexGrow: 1
+  },
+  heading: {
+    fontWeight: '600',
+    fontSize: 18,
+    lineHeight: 28,
+    textAlign: 'center',
+    marginBottom: 16
+  },
+  horizontalCardStyles: {
+    flex: 0
+  },
+  horizontalListContent: {
+    alignItems: 'center'
+  }
+});

package/src/ui/components/Pagination/Pagination.spec.tsx

@@ -0,0 +1,159 @@
+/*
+    Copyright 2026 Adobe. All rights reserved.
+    This file is licensed to you under the Apache License, Version 2.0 (the
+    "License"); you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+    http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law
+    or agreed to in writing, software distributed under the License is
+    distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF
+    ANY KIND, either express or implied. See the License for the specific
+    language governing permissions and limitations under the License.
+*/
+import { fireEvent, render, screen } from '@testing-library/react-native';
+import React from 'react';
+import { Animated } from 'react-native';
+import { Pagination } from './Pagination';
+
+// Use fake timers for animation timing
+jest.useFakeTimers();
+
+// Stub Animated APIs to avoid act warnings and native errors
+beforeAll(() => {
+  jest.spyOn(Animated, 'timing').mockReturnValue({ start: (cb?: any) => cb && cb() } as any);
+  jest.spyOn(Animated, 'spring').mockReturnValue({ start: (cb?: any) => cb && cb() } as any);
+  jest.spyOn(Animated, 'parallel').mockReturnValue({ start: (cb?: any) => cb && cb() } as any);
+  jest.spyOn(require('react-native'), 'useColorScheme').mockReturnValue('light');
+});
+
+afterAll(() => {
+  (Animated.timing as unknown as jest.Mock)?.mockRestore?.();
+  (Animated.spring as unknown as jest.Mock)?.mockRestore?.();
+  (Animated.parallel as unknown as jest.Mock)?.mockRestore?.();
+});
+
+describe('Pagination - rendering', () => {
+  it('renders nothing when totalPages <= 1', () => {
+    const { toJSON } = render(
+      <Pagination currentPage={0} totalPages={1} onPageChange={() => {}} />
+    );
+    expect(toJSON()).toBeNull();
+  });
+
+});
+
+describe('Pagination - interactions', () => {
+  it('renders dots and calls onPageChange when a dot is pressed', () => {
+    const onPageChange = jest.fn();
+    render(<Pagination currentPage={1} totalPages={3} onPageChange={onPageChange} />);
+    const dots = screen.getAllByRole('button');
+    expect(dots.length).toBe(3);
+    // press the last dot (page index 2)
+    fireEvent.press(dots[2]);
+    expect(onPageChange).toHaveBeenCalledWith(2);
+  });
+
+});
+
+describe('Pagination - theming and sizing', () => {
+  it('uses theme default colors when activeColor/inactiveColor not provided (light)', () => {
+    jest.spyOn(require('react-native'), 'useColorScheme').mockReturnValue('light');
+    render(<Pagination currentPage={0} totalPages={2} onPageChange={() => {}} />);
+    const views = screen.UNSAFE_getAllByType(Animated.View);
+    // Filter to dot views by borderRadius style (unique to dot style)
+    const dotViews = views.filter((v) => {
+      const styles = (Array.isArray(v.props.style) ? v.props.style : [v.props.style]).flat(Infinity).filter(Boolean);
+      return styles.some((s: any) => s && s.borderRadius === 50);
+    });
+    const dot0Styles = (Array.isArray(dotViews[0].props.style) ? dotViews[0].props.style : [dotViews[0].props.style]).flat(Infinity);
+    const dot1Styles = (Array.isArray(dotViews[1].props.style) ? dotViews[1].props.style : [dotViews[1].props.style]).flat(Infinity);
+    expect(dot0Styles.some((s: any) => s && s.backgroundColor === '#0a7ea4')).toBe(true); // active
+    expect(dot1Styles.some((s: any) => s && s.backgroundColor === '#687076')).toBe(true); // inactive
+  });
+
+  it('uses theme default colors when activeColor/inactiveColor not provided (dark)', () => {
+    jest.spyOn(require('react-native'), 'useColorScheme').mockReturnValue('dark');
+    render(<Pagination currentPage={0} totalPages={2} onPageChange={() => {}} />);
+    const views = screen.UNSAFE_getAllByType(Animated.View);
+    const dotViews = views.filter((v) => {
+      const styles = (Array.isArray(v.props.style) ? v.props.style : [v.props.style]).flat(Infinity).filter(Boolean);
+      return styles.some((s: any) => s && s.borderRadius === 50);
+    });
+    const dot0Styles = (Array.isArray(dotViews[0].props.style) ? dotViews[0].props.style : [dotViews[0].props.style]).flat(Infinity);
+    const dot1Styles = (Array.isArray(dotViews[1].props.style) ? dotViews[1].props.style : [dotViews[1].props.style]).flat(Infinity);
+    expect(dot0Styles.some((s: any) => s && s.backgroundColor === '#fff')).toBe(true); // active
+    expect(dot1Styles.some((s: any) => s && s.backgroundColor === '#9BA1A6')).toBe(true); // inactive
+  });
+
+  it('respects custom active/inactive colors and dot size/spacing', () => {
+    render(
+      <Pagination
+        currentPage={0}
+        totalPages={2}
+        onPageChange={() => {}}
+        activeColor="red"
+        inactiveColor="gray"
+        dotSize={12}
+        spacing={10}
+      />
+    );
+    const views = screen.UNSAFE_getAllByType(Animated.View);
+    const dotViews = views.filter((v) => {
+      const styles = (Array.isArray(v.props.style) ? v.props.style : [v.props.style]).flat(Infinity).filter(Boolean);
+      return styles.some((s: any) => s && s.borderRadius === 50);
+    });
+    const dot0Styles = (Array.isArray(dotViews[0].props.style) ? dotViews[0].props.style : [dotViews[0].props.style]).flat(Infinity);
+    expect(dot0Styles.some((s: any) => s && s.backgroundColor === 'red')).toBe(true);
+    expect(dot0Styles.some((s: any) => s && s.width === 12 && s.height === 12)).toBe(true);
+  });
+
+});
+
+describe('Pagination - sliding and windowing', () => {
+  it('slides when the visible window changes (Animated.timing called)', () => {
+    const timingSpy = jest.spyOn(Animated, 'timing');
+    const { rerender } = render(
+      <Pagination currentPage={0} totalPages={10} maxVisibleDots={5} onPageChange={() => {}} />
+    );
+    // Move within the same window (no slide expected)
+    rerender(<Pagination currentPage={4} totalPages={10} maxVisibleDots={5} onPageChange={() => {}} />);
+    const callsBefore = (timingSpy as unknown as jest.Mock).mock.calls.length;
+    // Move to next window (should slide)
+    rerender(<Pagination currentPage={5} totalPages={10} maxVisibleDots={5} onPageChange={() => {}} />);
+    const callsAfter = (timingSpy as unknown as jest.Mock).mock.calls.length;
+    expect(callsAfter).toBeGreaterThan(callsBefore);
+  });
+
+  it('adjusts start page near the end (endPage === totalPages - 1 branch)', () => {
+    const onPageChange = jest.fn();
+    render(
+      <Pagination currentPage={9} totalPages={10} maxVisibleDots={5} onPageChange={onPageChange} />
+    );
+    // Expect visible pages to be [5,6,7,8,9]; pressing first dot should send 5
+    const dots = screen.getAllByRole('button');
+    expect(dots.length).toBe(5);
+    fireEvent.press(dots[0]);
+    expect(onPageChange).toHaveBeenCalledWith(5);
+    fireEvent.press(dots[4]);
+    expect(onPageChange).toHaveBeenCalledWith(9);
+  });
+
+  it('slides backward when the visible window shifts left (direction -1)', () => {
+    const timingSpy = jest.spyOn(Animated, 'timing');
+    const setValueSpy = jest.spyOn((Animated.Value as any).prototype, 'setValue');
+
+    const { rerender } = render(
+      <Pagination currentPage={9} totalPages={10} maxVisibleDots={5} onPageChange={() => {}} />
+    );
+    rerender(<Pagination currentPage={4} totalPages={10} maxVisibleDots={5} onPageChange={() => {}} />);
+
+    expect((timingSpy as unknown as jest.Mock).mock.calls.length).toBeGreaterThan(0);
+
+    const calls = (setValueSpy as unknown as jest.Mock).mock.calls as any[];
+    const lastNumericArg = [...calls].reverse().map(c => c[0]).find(a => typeof a === 'number');
+    expect(lastNumericArg).toBeLessThan(0); // negative offset indicates sliding left
+
+    (setValueSpy as unknown as jest.Mock).mockRestore?.();
+  });
+});
+
+

package/src/ui/components/Pagination/Pagination.tsx

@@ -0,0 +1,222 @@
+/*
+    Copyright 2026 Adobe. All rights reserved.
+    This file is licensed to you under the Apache License, Version 2.0 (the
+    "License"); you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+    http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law
+    or agreed to in writing, software distributed under the License is
+    distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF
+    ANY KIND, either express or implied. See the License for the specific
+    language governing permissions and limitations under the License.
+*/
+
+import React, { useEffect, useRef } from "react";
+import {
+  Animated,
+  Pressable,
+  StyleSheet,
+  View
+} from "react-native";
+import { useTheme } from "../../theme";
+
+const PaginationDot = ({
+  page,
+  isActive,
+  finalInactiveColor,
+  finalActiveColor,
+  dotSize,
+  onPageChange,
+}: {
+  page: number;
+  isActive: boolean;
+  finalInactiveColor?: string;
+  finalActiveColor?: string;
+  dotSize: number;
+  onPageChange: (page: number) => void;
+}) => {
+  const scaleAnim = useRef(new Animated.Value(isActive ? 1.2 : 1)).current;
+  const opacityAnim = useRef(new Animated.Value(isActive ? 1 : 0.6)).current;
+
+  useEffect(() => {
+    const animation = Animated.parallel([
+      Animated.spring(scaleAnim, {
+        toValue: isActive ? 1.2 : 1,
+        useNativeDriver: true,
+        tension: 100,
+        friction: 8,
+      }),
+      Animated.timing(opacityAnim, {
+        toValue: isActive ? 1 : 0.6,
+        duration: 200,
+        useNativeDriver: true,
+      }),
+    ]);
+    animation.start();
+    return () => {
+      // stop both if unmounted
+      scaleAnim.stopAnimation();
+      opacityAnim.stopAnimation();
+    };
+  }, [isActive, scaleAnim, opacityAnim]);
+
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityState={{ selected: isActive }}
+      accessibilityLabel={`Page ${page + 1}`}
+      onPress={() => onPageChange(page)}
+      style={({ pressed }) => [
+        styles.dotContainer,
+        { opacity: pressed ? 0.7 : 1 },
+      ]}
+    >
+      <Animated.View
+        style={[
+          styles.dot,
+          {
+            width: dotSize,
+            height: dotSize,
+            backgroundColor: isActive ? finalActiveColor : finalInactiveColor,
+            opacity: opacityAnim,
+            transform: [{ scale: scaleAnim }],
+          },
+        ]}
+      />
+    </Pressable>
+  );
+};
+
+export interface PaginationProps {
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+  maxVisibleDots?: number;
+  activeColor?: string;
+  inactiveColor?: string;
+  dotSize?: number;
+  spacing?: number;
+}
+
+export const Pagination: React.FC<PaginationProps> = ({
+  currentPage,
+  totalPages,
+  onPageChange,
+  maxVisibleDots = 5,
+  activeColor,
+  inactiveColor,
+  dotSize = 8,
+  spacing = 8,
+}) => {
+  const { colors } = useTheme();
+  
+  const slideAnim = useRef(new Animated.Value(0)).current;
+  const prevVisiblePagesRef = useRef<number[]>([]);
+
+  const finalActiveColor = activeColor || colors.activeColor;
+  const finalInactiveColor = inactiveColor || colors.inactiveColor;
+
+  // Calculate which dots to show
+  const getVisiblePages = () => {
+    if (totalPages <= maxVisibleDots) {
+      return Array.from({ length: totalPages }, (_, i) => i);
+    }
+
+    const halfVisible = Math.floor(maxVisibleDots / 2);
+    let startPage = Math.max(0, currentPage - halfVisible);
+    let endPage = Math.min(totalPages - 1, startPage + maxVisibleDots - 1);
+
+    // Adjust start if we're near the end
+    if (endPage === totalPages - 1) {
+      startPage = Math.max(0, endPage - maxVisibleDots + 1);
+    }
+
+    return Array.from(
+      { length: endPage - startPage + 1 },
+      (_, i) => startPage + i
+    );
+  };
+
+  const visiblePages = getVisiblePages();
+
+  // Animate sliding when visible pages change
+  useEffect(() => {
+    const prevVisiblePages = prevVisiblePagesRef.current;
+    let started = false;
+  
+    if (prevVisiblePages.length > 0 && totalPages > maxVisibleDots) {
+      const prevStartPage = prevVisiblePages[0];
+      const currentStartPage = visiblePages[0];
+  
+      if (prevStartPage !== currentStartPage) {
+        const direction = currentStartPage > prevStartPage ? 1 : -1;
+        const dotWidth = dotSize + spacing;
+        slideAnim.setValue(direction * dotWidth);
+        Animated.timing(slideAnim, {
+          toValue: 0,
+          duration: 300,
+          useNativeDriver: true,
+        }).start();
+        started = true;
+      }
+    }
+  
+    prevVisiblePagesRef.current = visiblePages;
+  
+    return () => {
+      if (started) slideAnim.stopAnimation();
+    };
+  }, [visiblePages, slideAnim, dotSize, spacing, maxVisibleDots, totalPages]);
+
+  if (totalPages <= 1) {
+    return null;
+  }
+
+  return (
+    <View style={styles.container}>
+      <Animated.View 
+        style={[
+          styles.dotsContainer, 
+          { 
+            gap: spacing,
+            transform: [{ translateX: slideAnim }]
+          }
+        ]}
+      >
+        {visiblePages.map((page) => (
+          <PaginationDot
+            key={page}
+            page={page}
+            isActive={page === currentPage}
+            finalInactiveColor={finalInactiveColor}
+            finalActiveColor={finalActiveColor}
+            dotSize={dotSize}
+            onPageChange={onPageChange}
+          />
+        ))}
+      </Animated.View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden",
+    flex: 1,
+  },
+  dotsContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  dotContainer: {
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  dot: {
+    borderRadius: 50,
+  },
+});
+
+export default Pagination;