@nebula-rn/components 0.0.1

package/dist/Camera/index.d.ts

@@ -0,0 +1,31 @@
+import { FC, PropsWithChildren } from 'react';
+import { CodeType } from 'react-native-vision-camera';
+export interface CameraInitEventDetail {
+    maxZoom: number;
+}
+export interface CameraScanCodeEventDetail {
+    charSet: string;
+    rawData: string;
+    type: CodeType | 'unknown';
+    result: string;
+    fullResult: string;
+}
+export interface CameraError {
+    message: string;
+    code?: string;
+    nativeError?: unknown;
+}
+export interface CameraProps {
+    id?: string;
+    className?: string;
+    style?: any;
+    mode?: 'normal' | 'scanCode';
+    resolution?: 'low' | 'medium' | 'high';
+    devicePosition?: 'front' | 'back';
+    flash?: 'auto' | 'on' | 'off' | 'torch';
+    onInitDone?: (event: CameraInitEventDetail) => void;
+    onReady?: (event: CameraInitEventDetail) => void;
+    onScanCode?: (event: CameraScanCodeEventDetail) => void;
+    onError?: (error: CameraError) => void;
+}
+export declare const Camera: FC<PropsWithChildren<CameraProps>>;

package/dist/Camera/index.js

@@ -0,0 +1,96 @@
+import React, { useEffect, useCallback, useMemo, } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { Camera as RNCamera, useCameraDevice, useCameraPermission, useCodeScanner, } from 'react-native-vision-camera';
+export const Camera = props => {
+    const { devicePosition = 'back', style, mode, flash, onScanCode, onError, onInitDone, } = props;
+    const { hasPermission, requestPermission } = useCameraPermission();
+    const device = useCameraDevice(devicePosition);
+    useEffect(() => {
+        onHandlePermissionRequest();
+    }, []);
+    const onHandlePermissionRequest = useCallback(async () => {
+        if (!hasPermission) {
+            try {
+                const granted = await requestPermission();
+                if (!granted && onError) {
+                    onError({
+                        message: 'Camera permission denied',
+                        code: 'PERMISSION_DENIED',
+                    });
+                }
+            }
+            catch (error) {
+                if (onError) {
+                    onError({
+                        message: error instanceof Error ? error.message : 'Unknown error',
+                        code: 'PERMISSION_ERROR',
+                        nativeError: error,
+                    });
+                }
+            }
+        }
+    }, [hasPermission, requestPermission, onError]);
+    const onHandleCodeScanned = useCallback((codes) => {
+        if (mode === 'scanCode' && codes.length > 0 && onScanCode) {
+            const code = codes[0];
+            onScanCode({
+                result: code.value || '',
+                type: code.type,
+                charSet: '',
+                rawData: code.value || '',
+                fullResult: code.value || '',
+            });
+        }
+    }, [mode, onScanCode]);
+    const codeScanner = useCodeScanner({
+        codeTypes: ['qr', 'ean-13'],
+        onCodeScanned: onHandleCodeScanned,
+    });
+    const onHandleError = useCallback((error) => {
+        if (onError) {
+            if (error && typeof error === 'object' && 'message' in error) {
+                onError({ message: error.message, nativeError: error });
+            }
+            else {
+                onError({ message: 'Unknown error', nativeError: error });
+            }
+        }
+    }, [onError]);
+    const onHandleInitialized = useCallback(() => {
+        if (onInitDone) {
+            onInitDone({ maxZoom: device?.maxZoom ?? 1 });
+        }
+    }, [onInitDone, device]);
+    const torchState = useMemo(() => {
+        if (flash === 'on' || flash === 'torch')
+            return 'on';
+        return 'off';
+    }, [flash]);
+    if (!hasPermission) {
+        return (<View style={styles.center}>
+        <Text>No access to camera</Text>
+      </View>);
+    }
+    if (!device) {
+        return (<View style={styles.center}>
+        <Text>No camera device found</Text>
+      </View>);
+    }
+    return (<View style={[styles.container, style]}>
+      <RNCamera style={StyleSheet.absoluteFill} device={device} isActive codeScanner={mode === 'scanCode' ? codeScanner : undefined} torch={torchState} onError={onHandleError} onInitialized={onHandleInitialized}/>
+      {props.children}
+    </View>);
+};
+const styles = StyleSheet.create({
+    container: {
+        width: 300,
+        height: 300,
+        overflow: 'hidden',
+        backgroundColor: 'black',
+    },
+    center: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+});

package/dist/Map/index.d.ts

@@ -0,0 +1,86 @@
+import { FC } from 'react';
+export interface CalloutItem {
+    content?: string;
+    color?: string;
+    fontSize?: number;
+    borderRadius?: number;
+    borderWidth?: number;
+    borderColor?: string;
+    bgColor?: string;
+    padding?: number;
+    display?: 'BYCLICK' | 'ALWAYS';
+    textAlign?: 'left' | 'right' | 'center';
+}
+export interface MarkerItem {
+    id: number;
+    latitude: number;
+    longitude: number;
+    title?: string;
+    iconPath: string;
+    rotate?: number;
+    alpha?: number;
+    callout?: CalloutItem;
+    anchor?: {
+        x: number;
+        y: number;
+    };
+}
+export interface PolylineItem {
+    points: Array<{
+        latitude: number;
+        longitude: number;
+    }>;
+    color?: string;
+    width?: number;
+}
+export interface PolygonItem {
+    points: Array<{
+        latitude: number;
+        longitude: number;
+    }>;
+    strokeWidth?: number;
+    strokeColor?: string;
+    fillColor?: string;
+}
+export interface CircleItem {
+    latitude: number;
+    longitude: number;
+    color?: string;
+    fillColor?: string;
+    radius: number;
+    strokeWidth?: number;
+}
+export interface Coordinate {
+    latitude: number;
+    longitude: number;
+}
+export interface MapProps {
+    longitude: number;
+    latitude: number;
+    scale?: number;
+    markers?: Array<MarkerItem>;
+    polyline?: Array<PolylineItem>;
+    polygons?: Array<PolygonItem>;
+    circles?: Array<CircleItem>;
+    includePoints?: Array<Coordinate>;
+    showLocation?: boolean;
+    subkey?: string;
+    enable3D?: boolean;
+    showCompass?: boolean;
+    enableOverlooking?: boolean;
+    enableZoom?: boolean;
+    enableScroll?: boolean;
+    enableRotate?: boolean;
+    onMarkerClick?: (markerId: number) => void;
+    onCalloutClick?: (markerId: number) => void;
+    onControlClick?: (controlId?: number) => void;
+    onRegionChange?: (event: {
+        type: 'begin' | 'end';
+        timeStamp: number;
+        causedBy?: 'scale' | 'drag' | 'update';
+    }) => void;
+    onClick?: (coordinate: Coordinate) => void;
+    onUpdated?: () => void;
+    onPoiClick?: (event: any) => void;
+}
+export declare const Map: FC<MapProps>;

package/dist/Map/index.js

@@ -0,0 +1,83 @@
+import React, { useCallback } from 'react';
+import { Dimensions, StyleSheet, Text, View } from 'react-native';
+import MapView, { Callout, Circle, Marker, Polygon, Polyline, } from 'react-native-maps';
+const { width, height } = Dimensions.get('window');
+const ASPECT_RATIO = width / height;
+const LATITUDE_DELTA = 0.0922;
+const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;
+export const Map = props => {
+    const { latitude = 0, longitude = 0, markers = [], polyline = [], polygons = [], circles = [], showLocation = false, showCompass = true, enableZoom = true, enableScroll = true, enableRotate = true, onMarkerClick, onCalloutClick, onRegionChange, onClick, onUpdated = () => { }, onPoiClick = () => { }, } = props;
+    const onRenderCallout = useCallback((marker) => {
+        const { id, callout } = marker;
+        if (!callout)
+            return null;
+        return (<Callout onPress={() => onCalloutClick?.(id)}>
+          <View style={[
+                styles.calloutContainer,
+                {
+                    borderRadius: callout.borderRadius,
+                    borderWidth: callout.borderWidth,
+                    borderColor: callout.borderColor,
+                    backgroundColor: callout.bgColor,
+                    padding: callout.padding,
+                },
+            ]}>
+            <Text style={{
+                fontSize: callout.fontSize,
+                color: callout.color,
+                textAlign: callout.textAlign,
+            }}>
+              {callout.content}
+            </Text>
+          </View>
+        </Callout>);
+    }, [onCalloutClick]);
+    const onHandleRegionChange = useCallback((region, details) => {
+        onRegionChange?.({
+            type: 'begin',
+            timeStamp: Date.now(),
+            causedBy: details.isGesture ? 'drag' : 'update',
+        });
+    }, [onRegionChange]);
+    const onHandleRegionChangeComplete = useCallback((region, details) => {
+        onRegionChange?.({
+            type: 'end',
+            timeStamp: Date.now(),
+            causedBy: details.isGesture ? 'drag' : 'update',
+        });
+    }, [onRegionChange]);
+    const onHandleMapPress = useCallback((e) => {
+        onClick?.(e.nativeEvent.coordinate);
+    }, [onClick]);
+    const onHandleMarkerPress = useCallback((id) => {
+        onMarkerClick?.(id);
+    }, [onMarkerClick]);
+    return (<MapView style={styles.map} region={{
+            latitude,
+            longitude,
+            latitudeDelta: LATITUDE_DELTA,
+            longitudeDelta: LONGITUDE_DELTA,
+        }} minZoomLevel={5} maxZoomLevel={18} showsUserLocation={showLocation} showsCompass={showCompass} zoomEnabled={enableZoom} scrollEnabled={enableScroll} rotateEnabled={enableRotate} onRegionChange={onHandleRegionChange} onRegionChangeComplete={onHandleRegionChangeComplete} onPress={onHandleMapPress} onMapReady={onUpdated} onPoiClick={onPoiClick}>
+      {markers.map(marker => (<Marker id={`marker-${marker.id}`} coordinate={{
+                latitude: marker.latitude,
+                longitude: marker.longitude,
+            }} title={marker.title} image={marker.iconPath ? { uri: marker.iconPath } : undefined} rotation={marker.rotate} opacity={marker.alpha} anchor={marker.anchor} onPress={() => onHandleMarkerPress(marker.id)}>
+          {onRenderCallout(marker)}
+        </Marker>))}
+
+      {polyline.map((p, index) => (<Polyline id={`polyline-${index}`} coordinates={p.points} strokeColor={p.color} strokeWidth={p.width}/>))}
+
+      {polygons.map((p, index) => (<Polygon id={`polygon-${index}`} coordinates={p.points} strokeColor={p.strokeColor} strokeWidth={p.strokeWidth} fillColor={p.fillColor}/>))}
+
+      {circles.map((c, index) => (<Circle id={`circle-${index}`} center={{ latitude: c.latitude, longitude: c.longitude }} strokeColor={c.color} fillColor={c.fillColor} radius={c.radius} strokeWidth={c.strokeWidth}/>))}
+    </MapView>);
+};
+const styles = StyleSheet.create({
+    map: {
+        flex: 1,
+    },
+    calloutContainer: {
+        backgroundColor: 'white',
+        minWidth: 100,
+    },
+});

package/dist/Progress/index.d.ts

@@ -0,0 +1,19 @@
+import { FC } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export interface ProgressActiveEvent {
+    percent: number;
+}
+export interface ProgressProps {
+    style?: StyleProp<ViewStyle>;
+    percent: number;
+    showInfo?: boolean;
+    borderRadius?: number | string;
+    fontSize?: number | string;
+    strokeWidth?: number | string;
+    activeColor?: string;
+    backgroundColor?: string;
+    active?: boolean;
+    activeMode?: 'backwards' | 'forwards';
+    onActiveEnd?: (event: ProgressActiveEvent) => void;
+}
+export declare const Progress: FC<ProgressProps>;

package/dist/Progress/index.js

@@ -0,0 +1,82 @@
+import { useEffect, useRef } from 'react';
+import { Animated, Easing, Text, View, StyleSheet, } from 'react-native';
+export const Progress = ({ style, percent = 0, showInfo, borderRadius = 0, strokeWidth = 6, activeColor = '#09BB07', backgroundColor = '#EBEBEB', active, activeMode = 'backwards', onActiveEnd, }) => {
+    const valve = useRef(new Animated.Value(0)).current;
+    const prevPercentRef = useRef(0);
+    useEffect(() => {
+        const toValue = percent / 100;
+        if (!active || (activeMode !== 'backwards' && activeMode !== 'forwards')) {
+            Animated.timing(valve, {
+                toValue,
+                duration: 0,
+                useNativeDriver: false,
+            }).start();
+            prevPercentRef.current = percent;
+            return;
+        }
+        const sequence = [];
+        const duration = ((activeMode === 'forwards'
+            ? Math.abs(percent - prevPercentRef.current)
+            : percent) /
+            100) *
+            1000;
+        if (activeMode === 'backwards') {
+            sequence.push(Animated.timing(valve, {
+                toValue: 0,
+                duration: 0,
+                useNativeDriver: false,
+            }));
+        }
+        sequence.push(Animated.timing(valve, {
+            toValue,
+            easing: Easing.linear,
+            duration,
+            useNativeDriver: false,
+        }));
+        const onCompleteAnimation = () => {
+            if (onActiveEnd) {
+                onActiveEnd({ percent });
+            }
+        };
+        Animated.sequence(sequence).start(onCompleteAnimation);
+        prevPercentRef.current = percent;
+    }, [active, activeMode, percent, valve, onActiveEnd]);
+    const width = valve.interpolate({
+        inputRange: [0, 1],
+        outputRange: ['0%', '100%'],
+    });
+    return (<View style={[styles.wrapper, style]}>
+      <View style={[
+            styles.bar,
+            {
+                height: strokeWidth,
+                backgroundColor,
+            },
+        ]}>
+        <Animated.View style={[
+            styles.barThumb,
+            {
+                width,
+                height: '100%',
+                backgroundColor: activeColor,
+                borderBottomRightRadius: Number(borderRadius),
+                borderTopRightRadius: Number(borderRadius),
+            },
+        ]}/>
+      </View>
+      {showInfo && <Text style={styles.info}>{percent}%</Text>}
+    </View>);
+};
+const styles = StyleSheet.create({
+    wrapper: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    bar: {
+        flexGrow: 1,
+    },
+    barThumb: {},
+    info: {
+        marginLeft: 15,
+    },
+});

package/dist/RichText/index.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export interface RichTextProps {
+    style?: StyleProp<ViewStyle>;
+    html?: string;
+}
+export declare const RichText: FC<RichTextProps>;

package/dist/RichText/index.js

@@ -0,0 +1,56 @@
+import React, { useState, useRef, useCallback } from 'react';
+import { View, StyleSheet } from 'react-native';
+import { WebView } from 'react-native-webview';
+export const RichText = props => {
+    const { style, html = '' } = props;
+    const [webViewHeight, setWebViewHeight] = useState(0);
+    const webviewRef = useRef(null);
+    const onMessage = useCallback((event) => {
+        const height = Number(event.nativeEvent.data);
+        if (height > 0) {
+            setWebViewHeight(height);
+        }
+    }, []);
+    const onLoadEnd = useCallback(() => {
+        webviewRef.current?.injectJavaScript('window.ReactNativeWebView.postMessage(document.body.scrollHeight);');
+    }, []);
+    const injectedJavaScript = `
+    (function() {
+      document.documentElement.style.padding = '0';
+      document.documentElement.style.margin = '0';
+      document.body.style.padding = '0';
+      document.body.style.margin = '0';
+      window.ReactNativeWebView.postMessage(document.body.scrollHeight);
+    })();
+    true;
+  `;
+    return (<View style={[
+            {
+                height: webViewHeight,
+                width: '100%',
+            },
+            style,
+        ]}>
+      <WebView ref={webviewRef} source={{
+            html: `
+            <!DOCTYPE html>
+            <html>
+              <head>
+                <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
+                <style>
+                  body { font-family: -apple-system, system-ui; overflow: hidden; }
+                </style>
+              </head>
+              <body>
+                ${html}
+              </body>
+            </html>
+          `,
+        }} scrollEnabled={false} scalesPageToFit={false} onMessage={onMessage} injectedJavaScript={injectedJavaScript} onLoadEnd={onLoadEnd} style={styles.webview}/>
+    </View>);
+};
+const styles = StyleSheet.create({
+    webview: {
+        backgroundColor: 'transparent',
+    },
+});

package/dist/Slider/index.d.ts

@@ -0,0 +1,22 @@
+import { FC } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export interface SliderChangeEvent {
+    value: number;
+}
+export interface SliderProps {
+    name?: string;
+    style?: StyleProp<ViewStyle>;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    value?: number;
+    defaultValue?: number;
+    activeColor?: string;
+    backgroundColor?: string;
+    blockColor?: string;
+    showValue?: boolean;
+    onChange?: (event: SliderChangeEvent) => void;
+    onChanging?: (event: SliderChangeEvent) => void;
+}
+export declare const Slider: FC<SliderProps>;

package/dist/Slider/index.js

@@ -0,0 +1,58 @@
+import { useState, useEffect, useRef } from 'react';
+import { Text, View, StyleSheet } from 'react-native';
+import RNSlider from '@react-native-community/slider';
+export const Slider = props => {
+    const { style, min = 0, max = 100, step = 1, disabled, activeColor = '#1aad19', backgroundColor = '#e9e9e9', blockColor = '#fff', showValue, onChange, onChanging, value, defaultValue, } = props;
+    const isControlled = value !== undefined;
+    const [currentValue, setCurrentValue] = useState(defaultValue ?? (value || 0));
+    const timerRef = useRef(null);
+    useEffect(() => {
+        if (value !== undefined) {
+            setCurrentValue(value || 0);
+        }
+    }, [value]);
+    useEffect(() => {
+        if (!isControlled)
+            return;
+        if (timerRef.current) {
+            clearTimeout(timerRef.current);
+        }
+        timerRef.current = setTimeout(() => {
+            if (value !== currentValue) {
+                setCurrentValue(value || 0);
+            }
+        }, 50);
+        return () => {
+            if (timerRef.current) {
+                clearTimeout(timerRef.current);
+            }
+        };
+    }, [currentValue, isControlled, value]);
+    const onSlidingCompleteHandler = (nextValue) => {
+        if (onChange) {
+            onChange({ value: nextValue });
+        }
+    };
+    const onValueChangeHandler = (nextValue) => {
+        setCurrentValue(nextValue);
+        if (onChanging) {
+            onChanging({ value: nextValue });
+        }
+    };
+    return (<View style={styles.wrapper}>
+      <RNSlider minimumValue={min} maximumValue={max} step={step} disabled={!!disabled} value={currentValue} minimumTrackTintColor={activeColor} maximumTrackTintColor={backgroundColor} thumbTintColor={blockColor} onSlidingComplete={onSlidingCompleteHandler} onValueChange={onValueChangeHandler} style={[styles.bar, style]}/>
+      {showValue && <Text style={styles.info}>{currentValue}</Text>}
+    </View>);
+};
+const styles = StyleSheet.create({
+    wrapper: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    bar: {
+        flexGrow: 1,
+    },
+    info: {
+        marginLeft: 15,
+    },
+});

package/dist/Swiper/carousel.d.ts

@@ -0,0 +1,17 @@
+import { FC, PropsWithChildren, ReactNode } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { PaginationProps } from './pagination';
+export interface CarouselProps {
+    infinite?: boolean;
+    dots?: boolean;
+    autoplay?: boolean;
+    autoplayInterval?: number;
+    selectedIndex?: number;
+    vertical?: boolean;
+    pagination?: (props: PaginationProps) => ReactNode;
+    dotStyle?: StyleProp<ViewStyle>;
+    dotActiveStyle?: StyleProp<ViewStyle>;
+    style?: StyleProp<ViewStyle>;
+    afterChange?: (index: number) => void;
+}
+export declare const Carousel: FC<PropsWithChildren<CarouselProps>>;

package/dist/Swiper/carousel.js

@@ -0,0 +1,39 @@
+import React, { Children, useMemo, useRef, useState, } from 'react';
+import { StyleSheet, Text, View, } from 'react-native';
+import CarouselView from 'react-native-reanimated-carousel';
+import { DefaultPagination } from './pagination';
+export const Carousel = props => {
+    const { infinite = false, dots = true, autoplay = false, autoplayInterval = 3000, selectedIndex = 0, vertical = false, pagination: Pagination = DefaultPagination, dotStyle = {}, dotActiveStyle = {}, children, style, afterChange, } = props;
+    const carouselRef = useRef(null);
+    const [layout, setLayout] = useState({ width: 0, height: 0 });
+    const data = useMemo(() => Children.toArray(children), [children]);
+    const count = data.length;
+    const onLayout = (event) => {
+        const { width: w, height: h } = event.nativeEvent.layout;
+        if (w > 0 && h > 0) {
+            setLayout({ width: w, height: h });
+        }
+    };
+    const onSnapToItem = (index) => {
+        if (afterChange) {
+            afterChange(index);
+        }
+    };
+    const width = layout.width;
+    const height = layout.height || 200;
+    if (!children || count === 0) {
+        return (<Text style={{ backgroundColor: 'white' }}>
+        You are supposed to add children inside Carousel
+      </Text>);
+    }
+    return (<View onLayout={onLayout} style={[styles.wrapperStyle, style]}>
+      {width && (<CarouselView ref={carouselRef} loop={infinite} width={width} height={height} vertical={vertical} autoPlay={autoplay} autoPlayInterval={autoplayInterval} data={data} defaultIndex={selectedIndex} onSnapToItem={onSnapToItem} renderItem={({ item }) => <View style={{ flex: 1 }}>{item}</View>}/>)}
+
+      {dots && (<Pagination styles={styles} vertical={vertical} current={selectedIndex} count={count} dotStyle={dotStyle} dotActiveStyle={dotActiveStyle}/>)}
+    </View>);
+};
+const styles = StyleSheet.create({
+    wrapperStyle: {
+        overflow: 'hidden',
+    },
+});

package/dist/Swiper/index.d.ts

@@ -0,0 +1,19 @@
+import { FC, PropsWithChildren } from 'react';
+import { ViewStyle, StyleProp } from 'react-native';
+export interface SwiperEvent {
+    current: number;
+}
+export interface SwiperProps {
+    style?: StyleProp<ViewStyle>;
+    indicatorDots?: boolean;
+    indicatorColor?: string;
+    indicatorActiveColor?: string;
+    autoplay?: boolean;
+    current?: number;
+    interval?: number;
+    circular?: boolean;
+    vertical?: boolean;
+    onChange?: (event: SwiperEvent) => void;
+    onAnimationFinish?: (event: SwiperEvent) => void;
+}
+export declare const Swiper: FC<PropsWithChildren<SwiperProps>>;

package/dist/Swiper/index.js

@@ -0,0 +1,15 @@
+import { Carousel } from './carousel';
+export const Swiper = props => {
+    const { children, style, indicatorDots, indicatorColor = 'rgba(0,0,0,0.3)', indicatorActiveColor = '#000', autoplay, current = 0, interval = 5000, circular, vertical, onChange, onAnimationFinish, } = props;
+    const onAfterChangeHandler = (index) => {
+        if (onChange) {
+            onChange({ current: index });
+        }
+        if (onAnimationFinish) {
+            onAnimationFinish({ current: index });
+        }
+    };
+    return (<Carousel style={style} dots={indicatorDots} dotStyle={{ backgroundColor: indicatorColor }} dotActiveStyle={{ backgroundColor: indicatorActiveColor }} autoplay={autoplay} selectedIndex={current} autoplayInterval={interval} infinite={circular} vertical={vertical} afterChange={onAfterChangeHandler}>
+      {children}
+    </Carousel>);
+};

package/dist/Swiper/pagination.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export interface PaginationProps {
+    vertical?: boolean;
+    current: number;
+    count: number;
+    styles: any;
+    dotStyle?: StyleProp<ViewStyle>;
+    dotActiveStyle?: StyleProp<ViewStyle>;
+}
+export declare const DefaultPagination: React.FC<PaginationProps>;