native-pytech 1.0.1

package/dist/libs/login/src/Pages/utils.js

@@ -0,0 +1,49 @@
+import supabase from "../../../../libs/supabase";
+export const getAbbreviatedName = ({ first_name, last_name, mail }) => {
+    // Si tiene "firstname" y "lastname", se usa la primera letra de cada uno
+    // Si solo tiene firstname, se usa las primeras dos letras de "firstname"
+    // Si solo tiene lastname, se usa las primeras dos letras de "lastname"
+    // No tiene ninguno, se usa las primeras dos letras de "mail"
+    const f = first_name?.[0] ?? '';
+    const l = last_name?.[0] ?? '';
+    let name = '';
+    if (f && l)
+        name = f + l;
+    else if (f)
+        name = f + (first_name?.[1] ?? f);
+    else if (l)
+        name = l + (last_name?.[1] ?? l);
+    else
+        name = mail?.slice(0, 2) ?? '';
+    return name.toUpperCase();
+};
+export const handleSubmitLogIn = async ({ username, router }) => {
+    username = username.trim();
+    const mail = username.includes('@') ? username : `${username}@pytech.com`;
+    // Obtengo el user_id
+    const { data: dataUsers, error: errorUsers } = await supabase.client.schema('admin').from('users').select('id').eq('mail', mail);
+    if (errorUsers)
+        return { succeded: false, message: errorUsers.message };
+    if (dataUsers.length === 0)
+        return { succeded: false, message: 'Revisa la información de la cuenta que ingresaste y vuelve a intentarlo.' };
+    // Obtengo los datos del perfil
+    const { data, error } = await supabase.client.schema('admin').from('profiles').select('first_name,second_name,last_name,color').eq('user_id', dataUsers[0].id);
+    if (error)
+        return { succeded: false, message: error.message };
+    if (data.length === 0)
+        return { succeded: false, message: 'Revisa la información de la cuenta que ingresaste y vuelve a intentarlo.' };
+    // Success
+    router.push({ pathname: '/login/inicio/perfil', params: { ...data[0], user_id: dataUsers[0].id, mail: mail } });
+    return { succeded: true, message: '' };
+};
+export const handleSubmitLogInPerfil = async ({ mail, password }) => {
+    password = password.trim();
+    const { data, error } = await supabase.logIn({ email: mail, password });
+    if (error) {
+        if (error.message === 'Invalid login credentials') {
+            return { succeded: false, message: 'La contraseña que ingresaste es incorrecta, vuelve a intentarlo.' };
+        }
+        return { succeded: false, message: error.message };
+    }
+    return { succeded: true, message: '' };
+};

package/dist/libs/login/src/Screen/Container.d.ts

@@ -0,0 +1,4 @@
+declare const _default: import("react").MemoExoticComponent<({ children }: {
+    children: React.ReactNode;
+}) => import("react").JSX.Element>;
+export default _default;

package/dist/libs/login/src/Screen/Container.ios.d.ts

@@ -0,0 +1,4 @@
+declare const _default: import("react").MemoExoticComponent<({ children }: {
+    children: React.ReactNode;
+}) => import("react").JSX.Element>;
+export default _default;

package/dist/libs/login/src/Screen/Container.ios.js

@@ -0,0 +1,20 @@
+import { useApp } from "../../../../libs/providers/App";
+import { memo } from 'react';
+import { ScrollView, StyleSheet, TouchableWithoutFeedback } from 'react-native';
+import colors from '../constants';
+export default memo(({ children }) => {
+    const { colorScheme } = useApp();
+    const Theme = colors.theme[colorScheme];
+    return (<TouchableWithoutFeedback>
+            <ScrollView contentContainerStyle={[styles.pagina, { backgroundColor: Theme.backgroundColor }]} automaticallyAdjustKeyboardInsets={true}>
+                {children}
+            </ScrollView>
+        </TouchableWithoutFeedback>);
+});
+const styles = StyleSheet.create({
+    pagina: {
+        flex: 1,
+        display: 'flex',
+        alignItems: 'center',
+    }
+});

package/dist/libs/login/src/Screen/Container.js

@@ -0,0 +1,25 @@
+import { useApp } from "../../../../libs/providers/App";
+import { memo } from 'react';
+import { KeyboardAvoidingView, ScrollView, StyleSheet, TouchableWithoutFeedback, useWindowDimensions, View } from 'react-native';
+import colors from '../constants';
+export default memo(({ children }) => {
+    const { height } = useWindowDimensions();
+    const { colorScheme } = useApp();
+    const Theme = colors.theme[colorScheme];
+    return (<TouchableWithoutFeedback>
+            <KeyboardAvoidingView behavior={'height'} style={{ flex: 1 }}>
+                <ScrollView contentContainerStyle={{ minHeight: height, flexGrow: 1 }} keyboardShouldPersistTaps='handled' showsVerticalScrollIndicator={false}>
+                    <View style={[styles.pagina, { backgroundColor: Theme.backgroundColor }]}>
+                        {children}
+                    </View>
+                </ScrollView>
+            </KeyboardAvoidingView>
+        </TouchableWithoutFeedback>);
+});
+const styles = StyleSheet.create({
+    pagina: {
+        flex: 1,
+        display: 'flex',
+        alignItems: 'center',
+    }
+});

package/dist/libs/login/src/Screen/components/Gradient.d.ts

@@ -0,0 +1,6 @@
+import { PerfilColorType } from '../../constants';
+declare const _default: import("react").MemoExoticComponent<({ text, color }: {
+    text: string;
+    color: PerfilColorType;
+}) => import("react").JSX.Element>;
+export default _default;

package/dist/libs/login/src/Screen/components/Gradient.js

@@ -0,0 +1,23 @@
+import { LinearGradient } from "expo-linear-gradient";
+import { Text, StyleSheet } from "react-native";
+import { memo } from "react";
+import colors from '../../constants';
+export default memo(({ text, color = 'default' }) => (<LinearGradient style={styles.container} colors={[colors.perfil[color].light, colors.perfil[color].dark]} start={{ x: 0, y: 0 }} end={{ x: 0, y: 1 }}>
+        <Text style={styles.text}>{text}</Text>
+    </LinearGradient>));
+const styles = StyleSheet.create({
+    container: {
+        width: 200,
+        height: 200,
+        borderRadius: 100,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    text: {
+        lineHeight: 200,
+        fontSize: 90,
+        letterSpacing: -2,
+        fontWeight: 'bold',
+        color: 'white',
+    }
+});

package/dist/libs/login/src/Screen/components/Input/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import Props from './types';
+declare const _default: React.MemoExoticComponent<({ placeholder, buttonSend, handleSubmit, messageError, onFocus, onChangeText, onBlur, styleMessageError, ...props }: Props) => React.JSX.Element>;
+export default _default;

package/dist/libs/login/src/Screen/components/Input/index.js

@@ -0,0 +1,128 @@
+import React, { memo, useEffect, useRef, useState } from 'react';
+import { ActivityIndicator, Image, Keyboard, Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
+import Animated, { Easing, interpolate, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import { useApp } from "../../../../../../libs/providers/App";
+import colors from '../../../constants';
+const anim = {
+    duration: 400,
+    easing: Easing.bezier(0.2, 0.2, 0, 1)
+};
+export default memo(({ placeholder = '', buttonSend = true, handleSubmit, messageError, onFocus, onChangeText, onBlur, styleMessageError, ...props }) => {
+    const { colorScheme } = useApp();
+    const Theme = colors.theme[colorScheme];
+    const valueRef = useRef('');
+    const [isFocused, setIsFocused] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
+    const [errorMessage, setErrorMessage] = useState(messageError || null);
+    const inputRef = useRef(null);
+    const animShared = useSharedValue(0);
+    // ----------------- Functions-----------------
+    const _onFocus = () => {
+        setIsFocused(true);
+        animShared.value = withTiming(1, { ...anim, duration: 75 });
+        onFocus?.();
+    };
+    const _onBlur = () => {
+        setIsFocused(false);
+        if (!valueRef.current)
+            animShared.value = withTiming(0, { ...anim, duration: 75 });
+        onBlur?.();
+    };
+    const _onChangeText = (text) => {
+        valueRef.current = text.toLowerCase();
+        onChangeText?.(text);
+    };
+    const onClickSubmit = () => {
+        if (!isLoading) {
+            setIsLoading(true);
+            _handleSubmit();
+        }
+    };
+    const _handleSubmit = async () => {
+        const { succeded, message } = await handleSubmit?.({ value: valueRef.current }) || { succeded: true, message: '' };
+        if (!succeded)
+            setErrorMessage(message);
+        else
+            setErrorMessage(null);
+        Keyboard.dismiss();
+        setIsLoading(false);
+    };
+    // ----------------- useEffect -----------------
+    useEffect(() => {
+        setErrorMessage(messageError || null);
+    }, [messageError]);
+    // ----------------- useAnimatedStyle -----------------
+    const animatedStyle = useAnimatedStyle(() => {
+        return {
+            fontSize: interpolate(animShared.value, [0, 1], [17, 12]),
+            paddingTop: interpolate(animShared.value, [0, 1], [15, 5])
+        };
+    });
+    const borderColor = isFocused ? Theme.focus : errorMessage ? Theme.borderColorError : Theme.borderColor5;
+    const backgroundColor = errorMessage ? Theme.backgroundColorError : Theme.backgroundColor2;
+    return (<View style={{ gap: 10 }}>
+            <View onTouchEnd={(e) => e.stopPropagation()} style={[styles.container, { borderColor: borderColor, backgroundColor: backgroundColor }]}>
+                <Pressable style={styles.pressable} onPress={() => { inputRef?.current?.focus?.(); }}>
+
+                    <Animated.Text style={[styles.animatedText, { color: errorMessage ? Theme.borderColorError : Theme.borderColor }, animatedStyle]}>
+                        {placeholder}
+                    </Animated.Text>
+
+                    <TextInput style={[styles.textInput, { color: Theme.text }]} autoCapitalize='none' autoCorrect={false} {...props} ref={inputRef} onChangeText={_onChangeText} onFocus={_onFocus} onBlur={_onBlur} onSubmitEditing={onClickSubmit}/>
+                </Pressable>
+
+                {buttonSend && (!isLoading ? (<Pressable style={{ paddingHorizontal: 10 }} onPress={onClickSubmit} onTouchStart={onClickSubmit}>
+                            <View style={[styles.viewImage, { borderColor: Theme.borderColor }]}>
+                                <Image style={styles.image} tintColor={Theme.borderColor} source={require('../../../../../assets/images/flecha-hacia-abajo.png')}/>
+                            </View>
+                        </Pressable>) : (<View style={{ paddingHorizontal: 10 }}>
+                            <ActivityIndicator size='small' style={{ margin: 'auto' }} color={Theme.borderColor}/>
+                        </View>))}
+            </View>
+
+            {errorMessage && <Text style={[styles.textError, { color: Theme.borderColorError }, styleMessageError]}>{errorMessage}</Text>}
+        </View>);
+});
+const styles = StyleSheet.create({
+    container: {
+        display: 'flex',
+        flexDirection: 'row',
+        paddingLeft: 10,
+        borderWidth: 1,
+        borderRadius: 12
+    },
+    pressable: {
+        flex: 1,
+        position: 'relative',
+    },
+    animatedText: {
+        paddingTop: 15,
+        position: 'absolute',
+        fontSize: 17,
+        margin: 'auto',
+        cursor: 'text'
+    },
+    textInput: {
+        outlineStyle: 'none',
+        paddingTop: 20,
+        paddingBottom: 10,
+        fontSize: 17,
+    },
+    viewImage: {
+        margin: 'auto',
+        borderRadius: '100%',
+        borderWidth: 1,
+        padding: 5,
+        cursor: 'pointer',
+    },
+    image: {
+        margin: 'auto',
+        height: 15,
+        width: 15,
+        transform: [{ rotate: '-90deg' }],
+    },
+    textError: {
+        flex: 1,
+        textAlign: 'center',
+    }
+});

package/dist/libs/login/src/Screen/components/Input/types.d.ts

@@ -0,0 +1,46 @@
+import { StyleProp, TextInputProps, TextStyle } from "react-native";
+type Props = {
+    /**
+        Texto que aparece como placeholder en el input.
+        El valor por defecto es "", no puede ser undefined.
+    */
+    placeholder?: string;
+    /**
+        Función asíncrona que se ejecuta cuando se presiona el botón de enviar.
+        Tiene que retornar un diccionario con dos propiedades:
+        - succeded: boolean
+        - message: string
+    */
+    handleSubmit?: ({ value }: {
+        value: string;
+    }) => Promise<{
+        succeded: boolean;
+        message: string;
+    }>;
+    /**
+        Si es true, se muestra el botón de enviar.
+        El valor por defecto es true.
+    */
+    buttonSend?: boolean;
+    /**
+        Mensaje de error que se muestra debajo del input.
+    */
+    messageError?: string | null;
+    /**
+        Estilo del mensaje de error.
+    */
+    styleMessageError?: StyleProp<TextStyle>;
+    /**
+        Función que se ejecuta cuando se hace focus en el input.
+    */
+    onFocus?: () => void;
+    /**
+        Función que se ejecuta cuando se hace blur en el input.
+    */
+    onBlur?: () => void;
+    /**
+        Función que se ejecuta cuando se cambia el texto en el input.
+    */
+    onChangeText?: (text: string) => void;
+} & Omit<TextInputProps, 'ref' | 'onChangeText' | 'onFocus' | 'onBlur' | 'onSubmitEditing'>;
+export default Props;

package/dist/libs/login/src/Screen/components/Input/types.js

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

package/dist/libs/login/src/Screen/components/SvgLogoPytech.d.ts

@@ -0,0 +1,4 @@
+declare const _default: import("react").MemoExoticComponent<({ size }: {
+    size?: number;
+}) => import("react").JSX.Element>;
+export default _default;

package/dist/libs/login/src/Screen/components/SvgLogoPytech.js

@@ -0,0 +1,11 @@
+import { memo } from "react";
+import LogoSvg from '../../../../assets/images/logo_letras.svg';
+import LogoSvgDark from '../../../../assets/images/logo_letras_dark.svg';
+import { useApp } from "../../../../../libs/providers/App";
+export default memo(({ size = 200 }) => {
+    const { colorScheme } = useApp();
+    const props = { width: size, height: size };
+    if (colorScheme === 'dark')
+        return <LogoSvgDark {...props}/>;
+    return <LogoSvg {...props}/>;
+});

package/dist/libs/login/src/Screen/components/SvgPytech.d.ts

@@ -0,0 +1,4 @@
+declare const _default: import("react").MemoExoticComponent<({ size }: {
+    size?: number;
+}) => import("react").JSX.Element>;
+export default _default;

package/dist/libs/login/src/Screen/components/SvgPytech.js

@@ -0,0 +1,11 @@
+import { memo } from "react";
+import LoginSvg from '../../../../assets/images/login_letras.svg';
+import LoginSvgDark from '../../../../assets/images/login_letras_dark.svg';
+import { useApp } from "../../../../../libs/providers/App";
+export default memo(({ size = 200 }) => {
+    const { colorScheme } = useApp();
+    const props = { width: size, height: size };
+    if (colorScheme === 'dark')
+        return <LoginSvgDark {...props}/>;
+    return <LoginSvg {...props}/>;
+});

package/dist/libs/login/src/Screen/components/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Input } from './Input';
+export { default as Gradient } from './Gradient';
+export { default as SvgPytech } from './SvgPytech';
+export { default as SvgLogoPytech } from './SvgLogoPytech';

package/dist/libs/login/src/Screen/components/index.js

@@ -0,0 +1,4 @@
+export { default as Input } from './Input';
+export { default as Gradient } from './Gradient';
+export { default as SvgPytech } from './SvgPytech';
+export { default as SvgLogoPytech } from './SvgLogoPytech';

package/dist/libs/login/src/Screen/index.d.ts

@@ -0,0 +1,4 @@
+import Props, { Component } from './types';
+export { Props };
+declare const LogIn: Component;
+export default LogIn;

package/dist/libs/login/src/Screen/index.js

@@ -0,0 +1,59 @@
+import { useApp } from "../../../../libs/providers/App";
+import { memo } from 'react';
+import { StyleSheet, Text, useWindowDimensions, View } from 'react-native';
+import colors from '../constants';
+import { Gradient, Input, SvgLogoPytech, SvgPytech } from './components';
+import Container from './Container';
+const LogIn = memo(({ title, subtitle, iconPage, bottomElements, }) => {
+    const { height } = useWindowDimensions();
+    const { colorScheme } = useApp();
+    const Theme = colors.theme[colorScheme];
+    return (<Container>
+            {iconPage &&
+            <View style={{ marginTop: height * 0.18 }}>
+                    {iconPage}
+                </View>}
+
+            <View style={styles.viewText}>
+                <Text style={[styles.title, { color: Theme.text }]}>{title}</Text>
+                {subtitle && <Text style={[styles.subtitle, { color: Theme.text2 }]}>{subtitle}</Text>}
+            </View>
+            
+            {bottomElements &&
+            <View style={styles.viewBottom}>
+                    {bottomElements}
+                </View>}
+            
+        </Container>);
+});
+LogIn.Input = Input;
+LogIn.Gradient = Gradient;
+LogIn.SvgPytech = SvgPytech;
+LogIn.SvgLogoPytech = SvgLogoPytech;
+export default LogIn;
+const styles = StyleSheet.create({
+    viewText: {
+        marginTop: 32,
+        gap: 16,
+        width: '70%',
+        maxWidth: 400
+    },
+    title: {
+        margin: 'auto',
+        textAlign: 'center',
+        fontSize: 32,
+        fontWeight: 'bold',
+    },
+    subtitle: {
+        margin: 'auto',
+        textAlign: 'center',
+        fontSize: 17,
+    },
+    viewBottom: {
+        width: '80%',
+        maxWidth: 460,
+        display: 'flex',
+        marginTop: 32,
+        gap: 10
+    }
+});

package/dist/libs/login/src/Screen/types.d.ts

@@ -0,0 +1,14 @@
+import { Input, Gradient, SvgPytech, SvgLogoPytech } from './components';
+type Props = {
+    title: string;
+    subtitle?: string;
+    iconPage?: React.ReactNode;
+    bottomElements?: React.ReactNode[] | React.ReactNode;
+};
+export type Component = React.MemoExoticComponent<React.FC<Props>> & {
+    Gradient: typeof Gradient;
+    Input: typeof Input;
+    SvgPytech: typeof SvgPytech;
+    SvgLogoPytech: typeof SvgLogoPytech;
+};
+export default Props;

package/dist/libs/login/src/Screen/types.js

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

package/dist/libs/login/src/constants.d.ts

@@ -0,0 +1,98 @@
+export declare const colors: {
+    theme: {
+        light: {
+            text: string;
+            text2: string;
+            focus: string;
+            backgroundColor: string;
+            backgroundColor2: string;
+            backgroundColorError: string;
+            borderColor: string;
+            borderColor5: string;
+            borderColorError: string;
+            backgroundColorModal2: string;
+        };
+        dark: {
+            text: string;
+            text2: string;
+            focus: string;
+            backgroundColor: string;
+            backgroundColor2: string;
+            backgroundColorError: string;
+            borderColor: string;
+            borderColor5: string;
+            borderColorError: string;
+            backgroundColorModal2: string;
+        };
+    };
+    perfil: {
+        default: {
+            dark: string;
+            light: string;
+        };
+        rojo: {
+            dark: string;
+            light: string;
+        };
+        amarillo: {
+            dark: string;
+            light: string;
+        };
+        azul_oscuro: {
+            dark: string;
+            light: string;
+        };
+        naranja: {
+            dark: string;
+            light: string;
+        };
+        marron_claro: {
+            dark: string;
+            light: string;
+        };
+        verde_agua: {
+            dark: string;
+            light: string;
+        };
+        marron_oscuro: {
+            dark: string;
+            light: string;
+        };
+        rosa: {
+            dark: string;
+            light: string;
+        };
+        azul_claro: {
+            dark: string;
+            light: string;
+        };
+        violeta: {
+            dark: string;
+            light: string;
+        };
+        celeste_oscuro: {
+            dark: string;
+            light: string;
+        };
+        gris: {
+            dark: string;
+            light: string;
+        };
+        celeste_claro: {
+            dark: string;
+            light: string;
+        };
+        verde_oscuro: {
+            dark: string;
+            light: string;
+        };
+        verde_claro: {
+            dark: string;
+            light: string;
+        };
+    };
+};
+export type ColorSchemeType = 'light' | 'dark';
+export type ThemeType = typeof colors['theme']['light'];
+export type PerfilColorType = keyof typeof colors['perfil'];
+export default colors;

package/dist/libs/login/src/constants.js

@@ -0,0 +1,48 @@
+import colorsLib from "../../../libs/constants/colors";
+export const colors = {
+    theme: {
+        light: {
+            text: 'hsl(0, 0%, 0%)',
+            text2: 'hsl(0, 0%, 10%)',
+            focus: 'hsl(208, 100%, 43.70%)',
+            backgroundColor: 'hsl(0, 0%, 100%)',
+            backgroundColor2: 'hsl(0, 0%, 100%)',
+            backgroundColorError: 'hsl(351, 100%, 97.50%)',
+            borderColor: 'rgba(150, 150, 150, 1)',
+            borderColor5: 'rgba(150, 150, 150, 0.5)',
+            borderColorError: 'hsl(0, 100%, 44.50%)',
+            backgroundColorModal2: colorsLib.light.backgroundColorModal2
+        },
+        dark: {
+            text: 'hsl(0, 0%, 100%)',
+            text2: 'hsl(0, 0%, 90%)',
+            focus: 'hsl(208, 100%, 43.70%)',
+            backgroundColor: 'hsl(240, 3.40%, 11.40%)',
+            backgroundColor2: 'hsl(240, 2.60%, 14.90%)',
+            backgroundColorError: 'hsl(0, 100%, 20%)',
+            borderColor: 'rgba(150, 150, 150, 1)',
+            borderColor5: 'rgba(150, 150, 150, 0.5)',
+            borderColorError: 'hsl(358, 100%, 59.40%)',
+            backgroundColorModal2: colorsLib.dark.backgroundColorModal2
+        },
+    },
+    perfil: {
+        default: { dark: '#7580ba', light: '#b1c6e4' },
+        rojo: { dark: '#b12309', light: '#ff856a' },
+        amarillo: { dark: '#c97c00', light: '#ffe535' },
+        azul_oscuro: { dark: '#0f236d', light: '#6a7ec9' },
+        naranja: { dark: '#9c4d00', light: '#ffba53' },
+        marron_claro: { dark: '#75582e', light: '#e4c79d' },
+        verde_agua: { dark: '#105951', light: '#80c3ba' },
+        marron_oscuro: { dark: '#4f2a00', light: '#aa855a' },
+        rosa: { dark: '#892466', light: '#f08bcc' },
+        azul_claro: { dark: '#334696', light: '#9eb1ff' },
+        violeta: { dark: '#482d76', light: '#ac90d9' },
+        celeste_oscuro: { dark: '#005095', light: '#6dbfff' },
+        gris: { dark: '#445255', light: '#b0bec1' },
+        celeste_claro: { dark: '#237286', light: '#98e7fb' },
+        verde_oscuro: { dark: '#215b1d', light: '#8ac487' },
+        verde_claro: { dark: '#4b5f13', light: '#bbce82' }
+    }
+};
+export default colors;

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

@@ -0,0 +1 @@
+export { default } from './src/components/PageWrapper';

package/dist/libs/page/index.js

@@ -0,0 +1 @@
+export { default } from './src/components/PageWrapper';

package/dist/libs/page/src/components/Page/index.android.d.ts

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

package/dist/libs/page/src/components/Page/index.android.js

@@ -0,0 +1,11 @@
+import React, { memo } from 'react';
+import { KeyboardAvoidingView, ScrollView } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+export default memo(({ children, style }) => {
+    const { bottom, top } = useSafeAreaInsets();
+    return (<KeyboardAvoidingView style={{ flex: 1 }} behavior={'height'} keyboardVerticalOffset={bottom + top}>
+            <ScrollView contentContainerStyle={[{ flexGrow: 1 }, style]}>
+                {children}
+            </ScrollView>
+        </KeyboardAvoidingView>);
+});

package/dist/libs/page/src/components/Page/index.d.ts

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

package/dist/libs/page/src/components/Page/index.js

@@ -0,0 +1,7 @@
+import React, { memo } from 'react';
+import { Platform, ScrollView } from 'react-native';
+export default memo(({ children, style }) => {
+    return (<ScrollView style={{ flex: 1 }} automaticallyAdjustKeyboardInsets={true} contentContainerStyle={style} showsVerticalScrollIndicator={Platform.OS === 'web' ? false : undefined}>
+            {children}
+        </ScrollView>);
+});

package/dist/libs/page/src/components/PageWrapper/index.d.ts

@@ -0,0 +1,6 @@
+import { Component } from './types';
+/**
+    Crea una Página con ScrollView.
+*/
+declare const PageComponent: Component;
+export default PageComponent;