native-pytech 1.0.129 → 1.0.130

package/dist/libs/pickerPage/src/components/Page/types.js

@@ -0,0 +1 @@
+export {};

package/dist/libs/pickerPage/src/context/page.d.ts

@@ -0,0 +1,7 @@
+export declare const Provider: import("react").Provider<{
+    selected?: string;
+    onSelectionChange?: (selection: string) => void;
+} | null>, usePage: () => {
+    selected?: string;
+    onSelectionChange?: (selection: string) => void;
+};

package/dist/libs/pickerPage/src/context/page.js

@@ -0,0 +1,2 @@
+import Utils from '../../../../libs/constants/utils';
+export const [Provider, usePage] = Utils.createCtx();

package/dist/libs/providers/App/index.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { ColorSchemeType } from "../constants";
+import type Props from './types';
+declare const useApp: () => {
+    colorScheme: ColorSchemeType;
+    fontScale: number;
+};
+export { useApp };
+declare const _default: React.MemoExoticComponent<({ listStackNames, getBackgroundColor, getSession, renderItemLoading, onLoadingRealsed, }: Props) => React.JSX.Element>;
+export default _default;

package/dist/libs/providers/App/index.js

@@ -0,0 +1,58 @@
+import React, { memo, useMemo, useState, useRef } from "react";
+import { Stack, useRouter } from "expo-router";
+import { useColorScheme, useWindowDimensions, View, StyleSheet } from "react-native";
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { DarkTheme, DefaultTheme, ThemeProvider } from 'expo-router';
+import Utils from "../../../libs/constants/utils";
+import LoginSvg from '../../assets/images/login_letras.svg';
+import LoginSvgDark from '../../assets/images/login_letras_dark.svg';
+import Hooks from '../../../libs/constants/hooks';
+import colors from "../constants";
+const [Provider, useApp] = Utils.createCtx();
+export { useApp };
+export default memo(({ listStackNames = [], getBackgroundColor, getSession, renderItemLoading = ({ colorScheme }) => (colorScheme === 'dark' ?
+    <LoginSvgDark width={200} height={200}/>
+    :
+        <LoginSvg width={200} height={200}/>), onLoadingRealsed, }) => {
+    // -------------- Variables --------------
+    const colorScheme = useColorScheme();
+    const Theme = colors[colorScheme];
+    const { fontScale } = useWindowDimensions();
+    const router = useRouter();
+    const [isLoading, setIsLoading] = useState(true);
+    const hasSessionRef = useRef(false);
+    // -------------- Effects --------------
+    Hooks.useEffectWithoutFirstRender(() => {
+        if (!isLoading)
+            onLoadingRealsed?.({ router, hasSession: hasSessionRef.current });
+    }, [isLoading]);
+    Hooks.useAsyncEffect(async (isMounted) => {
+        hasSessionRef.current = (await getSession?.()) ?? true;
+        if (!isMounted)
+            return;
+        setIsLoading(false);
+    }, []);
+    // -------------- Return --------------
+    const value = useMemo(() => ({ colorScheme: colorScheme, fontScale: fontScale }), [colorScheme, fontScale]);
+    if (isLoading) {
+        return (<View style={[styles.container, { backgroundColor: getBackgroundColor?.({ colorScheme }) || Theme.backgroundColor }]}>
+                {renderItemLoading({ colorScheme })}
+            </View>);
+    }
+    return (<SafeAreaProvider>
+            <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
+                <Provider value={value}>
+                    <Stack screenOptions={{ headerShown: false }}>
+                        {listStackNames?.map((name) => (<Stack.Screen key={name} name={name}/>))}
+                    </Stack>
+                </Provider>
+            </ThemeProvider>
+        </SafeAreaProvider>);
+});
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+    }
+});

package/dist/libs/providers/App/types.d.ts

@@ -0,0 +1,35 @@
+import { ColorSchemeType } from "../../../libs/constants/colors";
+import { ImperativeRouter } from "expo-router";
+type Props = {
+    /**
+     Lista de nombres de los Stacks que se deben renderizar.
+     */
+    listStackNames?: string[];
+    /**
+        Función para obtener el color de fondo de las paginas por defecto.
+    */
+    getBackgroundColor?: ({ colorScheme }: {
+        colorScheme: ColorSchemeType;
+    }) => string;
+    /**
+        Función para inicializar la sesión.
+        @default true
+    */
+    getSession?: () => Promise<boolean>;
+    /**
+     Función para renderizar el item cuando está cargando.
+        @default LoginSvg (white | black)
+    */
+    renderItemLoading?: ({ colorScheme }: {
+        colorScheme: ColorSchemeType;
+    }) => React.ReactNode;
+    /**
+        Función para ejecutar cuando se realice el cambio de estado de loading a false.
+        Se utiliza para redirigir a la página de inicio.
+    */
+    onLoadingRealsed?: ({ router, hasSession }: {
+        router: ImperativeRouter;
+        hasSession: boolean;
+    }) => void;
+};
+export default Props;

package/dist/libs/providers/App/types.js

@@ -0,0 +1 @@
+export {};

package/dist/libs/providers/constants.d.ts

@@ -0,0 +1,10 @@
+declare const colors: {
+    light: {
+        backgroundColor: string;
+    };
+    dark: {
+        backgroundColor: string;
+    };
+};
+export { type ColorSchemeType } from "../../libs/constants/colors";
+export default colors;

package/dist/libs/providers/constants.js

@@ -0,0 +1,10 @@
+import colorsLib from "../../libs/constants/colors";
+const colors = {
+    light: {
+        backgroundColor: colorsLib.light.backgroundColor3,
+    },
+    dark: {
+        backgroundColor: colorsLib.dark.backgroundColor3,
+    }
+};
+export default colors;

package/dist/libs/segmentedControl/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./src/components/Wrapper";
+export { default as Provider, useShared } from "./src/context/shared";

package/dist/libs/segmentedControl/index.js

@@ -0,0 +1,2 @@
+export { default } from "./src/components/Wrapper";
+export { default as Provider, useShared } from "./src/context/shared";

package/dist/libs/segmentedControl/src/colors.d.ts

@@ -0,0 +1,15 @@
+export declare const colors: {
+    light: {
+        text: string;
+        text2: string;
+        background: string;
+        chip: string;
+    };
+    dark: {
+        text: string;
+        text2: string;
+        background: string;
+        chip: string;
+    };
+};
+export default colors;

package/dist/libs/segmentedControl/src/colors.js

@@ -0,0 +1,16 @@
+import colorsLib from "../../../libs/constants/colors";
+export const colors = {
+    light: {
+        text: colorsLib.light.text,
+        text2: colorsLib.light.text2Libretas,
+        background: colorsLib.light.backgroundColor,
+        chip: 'hsl(0, 0%, 93%)',
+    },
+    dark: {
+        text: colorsLib.dark.text,
+        text2: colorsLib.dark.text2Libretas,
+        background: colorsLib.dark.backgroundColor2,
+        chip: 'hsl(0, 0%, 23%)',
+    }
+};
+export default colors;

package/dist/libs/segmentedControl/src/components/AnimatedChip/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import Props from './types';
+declare const _default: React.MemoExoticComponent<({ isScrollable, onFinishedSelectedIndex, onChangeEqualWidths, widthsShared, widthContainerShared }: Props) => React.JSX.Element>;
+export default _default;

package/dist/libs/segmentedControl/src/components/AnimatedChip/index.js

@@ -0,0 +1,79 @@
+import React, { memo } from 'react';
+import { View, StyleSheet } from 'react-native';
+import Animated, { interpolate, useAnimatedStyle, useDerivedValue, useAnimatedReaction } from 'react-native-reanimated';
+import { scheduleOnRN } from 'react-native-worklets';
+import { useApp } from '../../../../../libs/providers/App';
+import { useShared } from '../../context/shared';
+import colors from '../../colors';
+export default memo(({ isScrollable, onFinishedSelectedIndex, onChangeEqualWidths, widthsShared, widthContainerShared }) => {
+    // ---------------- Variables ----------------
+    const { colorScheme } = useApp();
+    const Theme = colors[colorScheme];
+    const { selectedIndexShared } = useShared();
+    // ---------------- useDerivedValue ----------------
+    const equalWidthsShared = useDerivedValue(() => {
+        if (!isScrollable)
+            return true;
+        const widthContainer = widthContainerShared.value;
+        const widths = widthsShared.value;
+        const sumWidths = widths.reduce((acc, width) => acc + width, 0);
+        return sumWidths <= widthContainer;
+    });
+    const idxInferiorShared = useDerivedValue(() => Math.floor(selectedIndexShared.value));
+    const idxSuperiorShared = useDerivedValue(() => Math.ceil(selectedIndexShared.value));
+    const leftChipShared = useDerivedValue(() => {
+        const widths = widthsShared.value;
+        const inferior = idxInferiorShared.value;
+        const superior = idxSuperiorShared.value;
+        // Los widths son iguales
+        if (equalWidthsShared.value) {
+            const width = widthContainerShared.value / widths.length;
+            const newLeft = interpolate(selectedIndexShared.value, [inferior, superior], [inferior * width, superior * width]);
+            return newLeft;
+        }
+        // Varian los widths
+        const leftInferior = widths.slice(0, inferior).reduce((acc, width) => acc + (width || 0), 0);
+        const leftSuperior = widths.slice(0, superior).reduce((acc, width) => acc + (width || 0), 0);
+        const newLeft = interpolate(selectedIndexShared.value, [inferior, superior], [leftInferior, leftSuperior]);
+        return newLeft;
+    });
+    const widthChipShared = useDerivedValue(() => {
+        const widths = widthsShared.value;
+        if (equalWidthsShared.value)
+            return widthContainerShared.value / widths.length;
+        const inferior = idxInferiorShared.value;
+        const superior = idxSuperiorShared.value;
+        const widthInferior = widths[inferior] || 0;
+        const widthSuperior = widths[superior] || 0;
+        const newWidth = interpolate(selectedIndexShared.value, [inferior, superior], [widthInferior, widthSuperior]);
+        return newWidth;
+    });
+    // ---------------- useAnimatedReaction ----------------
+    useAnimatedReaction(() => selectedIndexShared.value, (value, prev) => {
+        if (prev === value)
+            return;
+        const hasFinished = Number.isInteger(value);
+        if (hasFinished && onFinishedSelectedIndex)
+            scheduleOnRN(onFinishedSelectedIndex, value);
+    });
+    useAnimatedReaction(() => equalWidthsShared.value, (value) => {
+        onChangeEqualWidths && scheduleOnRN(onChangeEqualWidths, value);
+    });
+    // ---------------- useAnimatedStyle ----------------
+    const animatedStyle = useAnimatedStyle(() => {
+        return { width: widthChipShared.value, left: leftChipShared.value };
+    });
+    return (<Animated.View style={[styles.container, animatedStyle]}>
+            <View style={[styles.chip, { backgroundColor: Theme.chip }]}/>
+        </Animated.View>);
+});
+const styles = StyleSheet.create({
+    container: {
+        position: 'absolute',
+        height: '100%',
+    },
+    chip: {
+        flex: 1,
+        borderRadius: 999,
+    },
+});

package/dist/libs/segmentedControl/src/components/AnimatedChip/types.d.ts

@@ -0,0 +1,28 @@
+import type { SharedValue } from "react-native-reanimated";
+type Props = {
+    /**
+        Para ver el ancho del chip.
+    */
+    isScrollable: boolean;
+    /**
+        Se ejecuta cuando el index seleccionado ha terminado de animar (selectedIndexShared).
+        Está dentro de un useAnimatedReaction. Se ejecuta con scheduleOnRN.
+    */
+    onFinishedSelectedIndex?: (index: number) => void;
+    /**
+        Se ejecuta cuando cambia el valor de equalWidthsShared.
+        Está dentro de un useAnimatedReaction. Se ejecuta con scheduleOnRN.
+    */
+    onChangeEqualWidths?: (equalWidths: boolean) => void;
+    /**
+        Usado en el cálculo de equalWidthsShared, leftChipShared, widthChipShared.
+        Se utiliza dentro de useDerivedValue.
+    */
+    widthsShared: SharedValue<number[]>;
+    /**
+        Usado en el cálculo de equalWidthsShared, leftChipShared, widthChipShared.
+        Se utiliza dentro de useDerivedValue.
+    */
+    widthContainerShared: SharedValue<number>;
+};
+export default Props;

package/dist/libs/segmentedControl/src/components/AnimatedChip/types.js

@@ -0,0 +1 @@
+export {};

package/dist/libs/segmentedControl/src/components/Container/index.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import Props from './types';
+declare const _default: React.MemoExoticComponent<({ children, onLayout, style }: Props) => React.JSX.Element>;
+export default _default;

package/dist/libs/segmentedControl/src/components/Container/index.ios.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import Props from './types';
+declare const _default: React.MemoExoticComponent<({ children, onLayout, style }: Props) => React.JSX.Element>;
+export default _default;

package/dist/libs/segmentedControl/src/components/Container/index.ios.js

@@ -0,0 +1,15 @@
+import { GlassView } from "expo-glass-effect";
+import React, { memo } from "react";
+import { StyleSheet } from "react-native";
+export default memo(({ children, onLayout, style }) => {
+    return (<GlassView glassEffectStyle={'clear'} style={[styles.container, style]} onLayout={onLayout}>
+            {children}
+        </GlassView>);
+});
+const styles = StyleSheet.create({
+    container: {
+        borderRadius: 999,
+        minHeight: 32,
+        overflow: 'hidden',
+    }
+});

package/dist/libs/segmentedControl/src/components/Container/index.js

@@ -0,0 +1,18 @@
+import React, { memo } from "react";
+import { View, StyleSheet } from "react-native";
+import { useApp } from "../../../../../libs/providers/App";
+import colors from "../../colors";
+export default memo(({ children, onLayout, style }) => {
+    const { colorScheme } = useApp();
+    const Theme = colors[colorScheme];
+    return (<View style={[styles.container, { backgroundColor: Theme.background }, style]} onLayout={onLayout}>
+            {children}
+        </View>);
+});
+const styles = StyleSheet.create({
+    container: {
+        borderRadius: 999,
+        minHeight: 32,
+        overflow: 'hidden',
+    }
+});

package/dist/libs/segmentedControl/src/components/Container/types.d.ts

@@ -0,0 +1,16 @@
+import { LayoutChangeEvent, StyleProp, ViewStyle } from "react-native";
+type Props = {
+    /**
+        Children del componente.
+    */
+    children: React.ReactNode;
+    /**
+        Función para obtener el ancho del contenedor.
+    */
+    onLayout: (event: LayoutChangeEvent) => void;
+    /**
+        Style del contenedor.
+    */
+    style?: StyleProp<ViewStyle>;
+};
+export default Props;

package/dist/libs/segmentedControl/src/components/Container/types.js

@@ -0,0 +1 @@
+export {};

package/dist/libs/segmentedControl/src/components/Item/index.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type Props from "./types";
+declare const _default: React.MemoExoticComponent<({ text, onPress, onLayout, textStyle, }: Props) => React.JSX.Element>;
+export default _default;

package/dist/libs/segmentedControl/src/components/Item/index.js

@@ -0,0 +1,26 @@
+import React, { memo } from "react";
+import { Pressable, StyleSheet, Text } from "react-native";
+import { useApp } from "../../../../../libs/providers/App";
+import colors from "../../colors";
+export default memo(({ text, onPress, onLayout, textStyle, }) => {
+    const { colorScheme } = useApp();
+    const Theme = colors[colorScheme];
+    return (<Pressable style={styles.pressable} onPress={onPress} onLayout={onLayout}>
+            <Text numberOfLines={1} style={[styles.text, { color: Theme.text }, textStyle]}>
+                {text}
+            </Text>
+        </Pressable>);
+});
+const styles = StyleSheet.create({
+    pressable: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingHorizontal: 15,
+        overflow: 'hidden',
+    },
+    text: {
+        fontSize: 13,
+        fontWeight: '600',
+    }
+});

package/dist/libs/segmentedControl/src/components/Item/types.d.ts

@@ -0,0 +1,20 @@
+import { LayoutChangeEvent, StyleProp, TextStyle } from "react-native";
+type Props = {
+    /**
+        Texto del item.
+    */
+    text: string;
+    /**
+        onPress del Pressable.
+    */
+    onPress: () => void;
+    /**
+        onLayout del Pressable.
+    */
+    onLayout: (event: LayoutChangeEvent) => void;
+    /**
+        style del texto.
+    */
+    textStyle?: StyleProp<TextStyle>;
+};
+export default Props;

package/dist/libs/segmentedControl/src/components/Item/types.js

@@ -0,0 +1 @@
+export {};

package/dist/libs/segmentedControl/src/components/Segmented/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import Props from './types';
+declare const _default: React.MemoExoticComponent<({ data, selectedIndex, setCurrentSelectedIndex, isScrollable, style, contentContainerStyle, ...itemProps }: Props) => React.JSX.Element>;
+export default _default;

package/dist/libs/segmentedControl/src/components/Segmented/index.js

@@ -0,0 +1,93 @@
+import React, { memo, useState, useRef, useCallback } from 'react';
+import { View, StyleSheet, ScrollView } from 'react-native';
+import { Easing, useSharedValue, withTiming, useDerivedValue } from 'react-native-reanimated';
+import Hooks from '../../../../../libs/constants/hooks';
+import { useShared } from '../../context/shared';
+import { scrollToIndex } from '../../utils';
+import Container from '../Container';
+import Item from '../Item';
+import AnimatedChip from '../AnimatedChip';
+const anim = {
+    duration: 400,
+    easing: Easing.bezier(0.2, 0.2, 0, 1)
+};
+export default memo(({ data, selectedIndex, setCurrentSelectedIndex, isScrollable = true, style, contentContainerStyle, ...itemProps }) => {
+    // ---------------- Variables ----------------
+    const { selectedIndexShared } = useShared();
+    const [equalWidths, setEqualWidths] = useState(false);
+    const widthsRef = useRef([]);
+    const scrollRef = useRef(null);
+    const scrollXRef = useRef(0);
+    const widthsShared = useSharedValue([]);
+    const widthContainerShared = useSharedValue(0);
+    // ---------------- useDerivedValue ----------------
+    const equalWidthsShared = useDerivedValue(() => {
+        if (!isScrollable)
+            return true;
+        const widthContainer = widthContainerShared.value;
+        const widths = widthsShared.value;
+        const sumWidths = widths.reduce((acc, width) => acc + width, 0);
+        return sumWidths <= widthContainer;
+    });
+    // ---------------- Functions ----------------
+    const onPress = useCallback((index) => {
+        selectedIndexShared.value = withTiming(index, anim);
+        setCurrentSelectedIndex(index);
+        if (!equalWidthsShared.value)
+            scrollToIndex({
+                widths: widthsShared.value,
+                scrollX: scrollXRef.current,
+                containerWidth: widthContainerShared.value,
+                scrollRef,
+                index
+            });
+    }, []);
+    const onLayoutItem = useCallback((index, e) => {
+        const width = e.nativeEvent.layout.width;
+        const newWidths = [...widthsRef.current];
+        newWidths[index] = width;
+        widthsRef.current = newWidths;
+        widthsShared.value = newWidths;
+    }, []);
+    // ---------------- Hooks ----------------
+    Hooks.useEffectWithoutFirstRender(() => {
+        onPress(selectedIndex);
+    }, [selectedIndex]);
+    const content = (<>
+            <AnimatedChip isScrollable={isScrollable} onFinishedSelectedIndex={(index) => setCurrentSelectedIndex(index)} onChangeEqualWidths={(isEqualWidths) => setEqualWidths(isEqualWidths)} widthsShared={widthsShared} widthContainerShared={widthContainerShared}/>
+
+            {data.map((text, index) => (<Item key={index} text={text} onPress={() => onPress(index)} onLayout={(e) => onLayoutItem(index, e)} {...itemProps}/>))}
+        </>);
+    return (<Container style={style} onLayout={(e) => widthContainerShared.value = (e.nativeEvent.layout.width - 2 * 2)} // Restamos 4px de margin
+    >
+            {equalWidths || !isScrollable ? (<View style={[styles.view, contentContainerStyle]}>
+                    {content}
+                </View>) : (<ScrollView ref={scrollRef} horizontal={true} showsHorizontalScrollIndicator={false} style={styles.scrollView} contentContainerStyle={[styles.contentContainer, contentContainerStyle]} scrollEventThrottle={16} onScroll={e => scrollXRef.current = e.nativeEvent.contentOffset.x}>
+                    {content}
+                </ScrollView>)}
+        </Container>);
+});
+const styles = StyleSheet.create({
+    view: {
+        margin: 2,
+        flexDirection: 'row',
+        flex: 1,
+        flexGrow: 1
+    },
+    scrollView: {
+        margin: 2,
+        borderRadius: 999,
+    },
+    contentContainer: {
+        flexDirection: 'row',
+    },
+    containerSelected: {
+        position: 'absolute',
+        height: '100%',
+    },
+    selected: {
+        flex: 1,
+        backgroundColor: 'hsl(0, 0%, 96%)',
+        borderRadius: 999,
+    },
+});

package/dist/libs/segmentedControl/src/components/Segmented/types.d.ts

@@ -0,0 +1,12 @@
+import type PropsWrapper from "../Wrapper/types";
+type Props = Omit<PropsWrapper, 'onChange' | 'selectedIndex'> & {
+    /**
+        selectedIndex del componente.
+    */
+    selectedIndex: number;
+    /**
+        Actualiza el index seleccionado.
+    */
+    setCurrentSelectedIndex: (index: number) => void;
+};
+export default Props;

package/dist/libs/segmentedControl/src/components/Segmented/types.js

@@ -0,0 +1 @@
+export {};

package/dist/libs/segmentedControl/src/components/Wrapper/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import Props from './types';
+declare const _default: React.MemoExoticComponent<({ data, selectedIndex, onChange, ...props }: Props) => React.JSX.Element>;
+export default _default;

package/dist/libs/segmentedControl/src/components/Wrapper/index.js

@@ -0,0 +1,21 @@
+import React, { memo, useState } from 'react';
+import Hooks from '../../../../../libs/constants/hooks';
+import Segmented from '../Segmented';
+import Provider, { useShared } from '../../context/shared';
+import { getIndex } from '../../utils';
+export default memo(({ data = [], selectedIndex = 0, onChange, ...props }) => {
+    const _selectedIndex = getIndex(selectedIndex);
+    // Creamos el state interno para activar el onChange
+    const [currentSelectedIndex, setCurrentSelectedIndex] = useState(_selectedIndex);
+    Hooks.useEffectWithoutFirstRender(() => {
+        onChange?.({ index: currentSelectedIndex, item: data[currentSelectedIndex] });
+    }, [currentSelectedIndex]);
+    // Nos fijamos si ya está dentro del context.
+    const { selectedIndexShared } = useShared() ?? {};
+    const component = (<Segmented data={data} selectedIndex={_selectedIndex} setCurrentSelectedIndex={setCurrentSelectedIndex} {...props}/>);
+    if (!selectedIndexShared)
+        return (<Provider selectedIndex={_selectedIndex}>
+            {component}
+        </Provider>);
+    return component;
+});

package/dist/libs/segmentedControl/src/components/Wrapper/types.d.ts

@@ -0,0 +1,38 @@
+import { StyleProp, TextStyle, ViewStyle } from "react-native";
+type Props = {
+    /**
+        contentContainerStyle de la ScrollView.
+        @default []
+    */
+    data: string[];
+    /**
+        Index del item seleccionado.
+        @default 0
+    */
+    selectedIndex?: number;
+    /**
+        Se ejecuta cuando hay un cambio en el index seleccionado.
+    */
+    onChange?: ({ index, item }: {
+        index: number;
+        item: string;
+    }) => void;
+    /**
+        Si es false, el componente no será scrollable.
+        @default true
+    */
+    isScrollable?: boolean;
+    /**
+        style del contenedor de la ScrollView.
+    */
+    style?: StyleProp<ViewStyle>;
+    /**
+        contentContainerStyle de la ScrollView.
+    */
+    contentContainerStyle?: StyleProp<ViewStyle>;
+    /**
+        style de los textos de los items.
+    */
+    textStyle?: StyleProp<TextStyle>;
+};
+export default Props;

package/dist/libs/segmentedControl/src/components/Wrapper/types.js

@@ -0,0 +1 @@
+export {};

package/dist/libs/segmentedControl/src/context/shared.d.ts

@@ -0,0 +1,11 @@
+import { type SharedValue } from "react-native-reanimated";
+import React from "react";
+export type ContextType = {
+    selectedIndexShared: SharedValue<number>;
+};
+export declare const useShared: () => ContextType | null;
+declare const _default: React.MemoExoticComponent<({ children, selectedIndex }: {
+    children: React.ReactNode;
+    selectedIndex?: number;
+}) => React.JSX.Element>;
+export default _default;

package/dist/libs/segmentedControl/src/context/shared.js

@@ -0,0 +1,13 @@
+import { useSharedValue } from "react-native-reanimated";
+import React, { createContext, memo } from "react";
+import { getIndex } from "../utils";
+import { useContext } from "react";
+const context = createContext(null);
+export const useShared = () => useContext(context);
+export default memo(({ children, selectedIndex = 0 }) => {
+    const _selectedIndex = getIndex(selectedIndex);
+    const selectedIndexShared = useSharedValue(_selectedIndex);
+    return (<context.Provider value={{ selectedIndexShared }}>
+            {children}
+        </context.Provider>);
+});