@teamnhz/rn-ui-toolkit 1.0.0

package/dist/components/HProgressSteps/index.js

@@ -0,0 +1,102 @@
+import React from 'react';
+import { View, Text, StyleSheet, Dimensions } from 'react-native';
+const { width } = Dimensions.get('window');
+// A placeholder for the Colors object, as it's not provided.
+// You should replace this with your actual Colors import.
+const Colors = {
+    primaryColor: '#4F80E1',
+    white: '#FFFFFF',
+    borderGrey: '#B0B0B0',
+};
+/**
+ * A reusable horizontal progress steps component for React Native.
+ * It displays a series of circles connected by lines to represent steps.
+ * The active and completed steps have different styling.
+ *
+ * @param {Array<string>} steps - An array of strings representing the step titles.
+ * @param {number} currentStep - The index of the currently active step (0-indexed).
+ * @param {string} [activeStepColor] - Color for the active step circle. Defaults to Colors.primaryColor.
+ * @param {string} [completedStepColor] - Color for completed steps. Defaults to Colors.primaryColor.
+ * @param {string} [defaultStepColor] - Color for incomplete steps. Defaults to Colors.borderGrey.
+ * @param {number} [stepSize=30] - Diameter of the step circles.
+ */
+const HProgressSteps = ({ steps, currentStep, activeStepColor = Colors.primaryColor, completedStepColor = Colors.primaryColor, defaultStepColor = Colors.borderGrey, stepSize = 30, }) => {
+    return (React.createElement(View, { style: styles.container }, steps.map((step, index) => {
+        // Determine the style for each step based on its index
+        const isCompleted = index < currentStep;
+        const isActive = index === currentStep;
+        const isLastStep = index === steps.length - 1;
+        // Apply dynamic styles for circles
+        const circleStyle = {
+            width: stepSize,
+            height: stepSize,
+            borderRadius: stepSize / 2,
+            backgroundColor: isCompleted ? completedStepColor : (isActive ? Colors.white : defaultStepColor),
+            justifyContent: 'center',
+            alignItems: 'center',
+            borderWidth: 2,
+            borderColor: isCompleted || isActive ? activeStepColor : defaultStepColor,
+        };
+        // Apply dynamic styles for lines
+        const lineStyle = {
+            flex: 1,
+            height: 2,
+            backgroundColor: isCompleted ? completedStepColor : defaultStepColor,
+        };
+        return (React.createElement(React.Fragment, { key: index },
+            React.createElement(View, { style: styles.stepContainer },
+                React.createElement(View, { style: [circleStyle] },
+                    React.createElement(Text, { style: styles.stepText }, index + 1)),
+                React.createElement(Text, { style: [styles.label, isActive && styles.activeLabel] }, step)),
+            !isLastStep && React.createElement(View, { style: lineStyle })));
+    })));
+};
+export default HProgressSteps;
+const styles = StyleSheet.create({
+    appContainer: {
+        flex: 1,
+        backgroundColor: '#fff',
+        alignItems: 'center',
+        justifyContent: 'flex-start',
+        paddingTop: 50,
+    },
+    header: {
+        fontSize: 24,
+        fontWeight: 'bold',
+        marginBottom: 40,
+    },
+    stepsWrapper: {
+        width: width * 0.9,
+        paddingHorizontal: 10,
+        marginBottom: 40,
+    },
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+    },
+    stepContainer: {
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    activeStepBorder: {
+        borderColor: '#4F80E1',
+        borderWidth: 2,
+        backgroundColor: 'white',
+    },
+    stepText: {
+        color: 'white',
+        fontSize: 16,
+        fontWeight: 'bold',
+    },
+    label: {
+        marginTop: 8,
+        textAlign: 'center',
+        fontSize: 14,
+        color: '#888',
+    },
+    activeLabel: {
+        fontWeight: 'bold',
+        color: Colors.primaryColor,
+    },
+});

package/dist/components/HStack/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ViewStyle, FlexStyle } from 'react-native';
+interface StackProps {
+    children: React.ReactNode;
+    spacing?: number;
+    style?: ViewStyle;
+    wrap?: FlexStyle['flexWrap'];
+}
+declare const HStack: React.FC<StackProps>;
+export default HStack;

package/dist/components/HStack/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+const HStack = ({ children, spacing = 8, style, wrap = 'nowrap' }) => {
+    const validChildren = React.Children.toArray(children);
+    return (React.createElement(View, { style: [styles.row, { flexWrap: wrap }, style] }, validChildren.map((child, index) => (React.createElement(View, { key: index, style: { marginRight: index !== validChildren.length - 1 ? spacing : 0 } }, child)))));
+};
+export default HStack;
+const styles = StyleSheet.create({
+    row: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+});

package/dist/components/HorizontalFlatList/index.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { FlatListProps } from "react-native";
+interface HorizontalFlatListProps<ItemT> extends Omit<FlatListProps<ItemT>, "horizontal" | "renderItem"> {
+    spacing?: number;
+    renderItem: ({ item }: {
+        item: ItemT;
+    }) => React.ReactNode;
+}
+declare const HorizontalFlatList: <ItemT>({ spacing, renderItem, ...props }: HorizontalFlatListProps<ItemT>) => React.JSX.Element;
+export default HorizontalFlatList;

package/dist/components/HorizontalFlatList/index.js

@@ -0,0 +1,14 @@
+import React from "react";
+import { FlatList, View, StyleSheet } from "react-native";
+const HorizontalFlatList = ({ spacing = 10, renderItem, ...props }) => {
+    return (React.createElement(FlatList, { ...props, horizontal: true, showsHorizontalScrollIndicator: props.showsHorizontalScrollIndicator, keyExtractor: (item, index) => item.id?.toString() || index.toString(), renderItem: ({ item, index }) => (React.createElement(View, { style: [
+                styles.box,
+                { marginRight: index === (props.data?.length ?? 0) - 1 ? 0 : spacing },
+            ] }, renderItem({ item }))) }));
+};
+const styles = StyleSheet.create({
+    box: {
+        flex: 1
+    },
+});
+export default HorizontalFlatList;

package/dist/components/Image/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+declare const Image: ({ ...props }: {
+    [x: string]: any;
+}) => React.JSX.Element;
+export default Image;

package/dist/components/Image/index.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import FastImage from 'react-native-fast-image';
+const Image = ({ ...props }) => {
+    return React.createElement(FastImage, { ...props });
+};
+export default Image;

package/dist/components/ImagePicker/index.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+type Props = {
+    mediaType: "photo" | "video";
+    isMultiSelect?: boolean;
+    onSuccess: (data: any) => void;
+    visible: boolean;
+    onClose: () => void;
+};
+declare const ImagePicker: React.FC<Props>;
+export default ImagePicker;

package/dist/components/ImagePicker/index.js

@@ -0,0 +1,109 @@
+import React, { useCallback } from "react";
+import { View, Text, TouchableOpacity, StyleSheet, Image, Alert } from "react-native";
+import { BottomSheet, Dividers } from "../index";
+import { launchCamera, launchImageLibrary } from "react-native-image-picker";
+import ImageCropPicker from "react-native-image-crop-picker";
+import { Colors, Images, Scale, Typography } from "../../styles";
+const ImagePicker = ({ mediaType, isMultiSelect = false, onSuccess, visible, onClose, }) => {
+    const onComplete = useCallback((data) => {
+        onSuccess(data);
+        onClose();
+    }, [onSuccess, onClose]);
+    const onCamera = () => {
+        if (mediaType === "photo") {
+            if (isMultiSelect) {
+                ImageCropPicker.openCamera({ mediaType: "photo" })
+                    .then((response) => onComplete([response]))
+                    .catch(() => { });
+            }
+            else {
+                ImageCropPicker.openCamera({ mediaType: "photo" })
+                    .then((response) => ImageCropPicker.openCropper({
+                    path: response?.path,
+                    width: response?.width,
+                    height: response?.height,
+                    mediaType: "photo",
+                    freeStyleCropEnabled: true,
+                }).then(onComplete))
+                    .catch(() => { });
+            }
+        }
+        else {
+            launchCamera({ mediaType: "video" }, (response) => {
+                if (response?.assets) {
+                    onComplete({
+                        path: response.assets[0]?.uri,
+                        duration: response.assets[0]?.duration,
+                    });
+                }
+            });
+        }
+    };
+    const onGallery = () => {
+        if (mediaType === "photo") {
+            if (isMultiSelect) {
+                ImageCropPicker.openPicker({ mediaType: "photo", multiple: true, maxFiles: 5 })
+                    .then((images) => {
+                    if (images.length > 5) {
+                        Alert.alert("Limit Exceeded", "You can only select up to 5 images.");
+                    }
+                    else {
+                        onComplete(images);
+                    }
+                })
+                    .catch(() => { });
+            }
+            else {
+                ImageCropPicker.openPicker({ mediaType: "photo" })
+                    .then((response) => ImageCropPicker.openCropper({
+                    path: response?.path,
+                    width: response?.width,
+                    height: response?.height,
+                    mediaType: "photo",
+                    freeStyleCropEnabled: true,
+                }).then(onComplete))
+                    .catch(() => { });
+            }
+        }
+        else {
+            launchImageLibrary({ mediaType: "video" }, (result) => {
+                if (result?.assets) {
+                    onComplete({
+                        path: result.assets[0]?.uri,
+                        duration: result.assets[0]?.duration,
+                    });
+                }
+            });
+        }
+    };
+    return (React.createElement(BottomSheet, { visible: visible, onClose: onClose, height: 210 },
+        React.createElement(View, { style: styles.container },
+            React.createElement(TouchableOpacity, { style: styles.row, onPress: onCamera },
+                React.createElement(Image, { source: Images.video_icon, style: styles.icon }),
+                React.createElement(Text, { style: styles.text }, "Camera")),
+            React.createElement(Dividers, { small: true }),
+            React.createElement(TouchableOpacity, { style: styles.row, onPress: onGallery },
+                React.createElement(Image, { source: Images.image_icon, style: styles.icon }),
+                React.createElement(Text, { style: styles.text }, "Gallery")),
+            React.createElement(Dividers, { small: true }),
+            React.createElement(TouchableOpacity, { style: styles.row, onPress: onClose },
+                React.createElement(Image, { source: Images.image_icon, style: styles.icon }),
+                React.createElement(Text, { style: styles.text }, "Cancel")))));
+};
+export default ImagePicker;
+const styles = StyleSheet.create({
+    container: { flex: 1, padding: 16 },
+    row: {
+        flexDirection: "row",
+        alignItems: "center",
+        // paddingVertical: 12,
+    },
+    text: { ...Typography.style.standardU(), color: Colors.black },
+    separator: { height: 1, backgroundColor: Colors.borderGrey, marginVertical: 8 },
+    icon: {
+        width: Scale.moderateScale(20),
+        height: Scale.moderateScale(20),
+        marginRight: 10,
+        tintColor: Colors.darkBlue,
+    },
+});

package/dist/components/Input/index.d.ts

@@ -0,0 +1,26 @@
+import React from "react";
+import { TextInputProps, ImageSourcePropType } from "react-native";
+import { InputType } from "../../utils/regex";
+interface InputProps extends TextInputProps {
+    intlType?: string;
+    textKey?: string;
+    leftIcon?: ImageSourcePropType;
+    rightIcon?: ImageSourcePropType;
+    onLeftIconPress?: () => void;
+    onRightIconPress?: () => void;
+    type?: InputType;
+    disabled?: boolean;
+    /** error message from parent (Formik, RHF, Zod, etc.) */
+    error?: string | boolean;
+    value?: string;
+    customRegex?: RegExp;
+    customErrorMessage?: string;
+    onChangeText?: (text: string) => void;
+    onValidation?: (errorObj: {
+        type: InputType;
+        hasError: boolean;
+        message?: string;
+    }) => void;
+}
+declare const Input: React.FC<InputProps>;
+export default Input;

package/dist/components/Input/index.js

@@ -0,0 +1,118 @@
+import React, { useState, useCallback, useEffect } from "react";
+import { View, TextInput, StyleSheet, Image, TouchableOpacity, Text, } from "react-native";
+import { useTranslation } from "react-i18next";
+import { Colors, Typography, Scale, Images } from "../../styles";
+import { defaultRegex } from "../../utils/regex";
+import { messages } from "../../constants/messages";
+const Input = ({ intlType, textKey, placeholder, leftIcon, rightIcon, onLeftIconPress, onRightIconPress, style, type = "text", disabled = false, error, value = "", customRegex, customErrorMessage, onChangeText, onValidation, onBlur: restOnBlur, onFocus: restOnFocus, ...rest }) => {
+    const { t } = useTranslation();
+    const [secureText, setSecureText] = useState(type === "password");
+    const [internalError, setInternalError] = useState(null);
+    const [wasBlurred, setWasBlurred] = useState(false);
+    const [isFocused, setIsFocused] = useState(false);
+    const translatedPlaceholder = intlType && textKey ? String(t(textKey, { ns: intlType, value })) : placeholder;
+    const keyboardType = type === "email" ? "email-address" : type === "number" ? "numeric" : "default";
+    // internal validator (non-Formik, non-RHF)
+    const validateInternal = useCallback((text) => {
+        if (!wasBlurred)
+            return;
+        const regexToUse = customRegex ?? defaultRegex[type];
+        const fallbackMsg = messages.invalid[type] || "Invalid input";
+        const msg = customErrorMessage || fallbackMsg;
+        if (text === "" || !regexToUse.test(text)) {
+            setInternalError(msg);
+            onValidation?.({ type, hasError: true, message: msg });
+        }
+        else {
+            setInternalError(null);
+            onValidation?.({ type, hasError: false });
+        }
+    }, [wasBlurred, type, customRegex, customErrorMessage, onValidation]);
+    useEffect(() => {
+        if (!customRegex)
+            return;
+        if (internalError && value && customRegex.test(value)) {
+            setInternalError(null);
+            onValidation?.({ type, hasError: false });
+        }
+    }, [value]);
+    const handleChangeText = (text) => {
+        onChangeText?.(text);
+        if (wasBlurred)
+            validateInternal(text);
+    };
+    const handleFocus = (e) => {
+        setIsFocused(true);
+        restOnFocus?.(e);
+    };
+    const handleBlur = (e) => {
+        setIsFocused(false);
+        if (!wasBlurred)
+            setWasBlurred(true);
+        validateInternal(value || "");
+        restOnBlur?.(e);
+    };
+    // Decide which error to show: external error (Formik/RHF/etc) > internal error
+    const rawError = (typeof error === "string" ? error : undefined) ?? internalError ?? null;
+    const showError = (() => {
+        if (!rawError)
+            return null;
+        return wasBlurred && !isFocused ? rawError : null;
+    })();
+    return (React.createElement(View, { style: { marginBottom: 10 } },
+        React.createElement(View, { style: [
+                styles.container,
+                disabled && styles.disabled,
+                !!showError && styles.errorBorder,
+                style,
+            ] },
+            leftIcon && (React.createElement(TouchableOpacity, { onPress: onLeftIconPress, disabled: !onLeftIconPress, style: styles.iconWrapper },
+                React.createElement(Image, { source: leftIcon, style: styles.icon, resizeMode: "contain" }))),
+            React.createElement(TextInput, { style: [styles.input, disabled && styles.disabledText], placeholder: translatedPlaceholder, placeholderTextColor: Colors.textGrey, editable: !disabled, secureTextEntry: secureText, keyboardType: keyboardType, value: value, onChangeText: handleChangeText, onFocus: handleFocus, onBlur: handleBlur, ...rest }),
+            type === "password" ? (React.createElement(TouchableOpacity, { onPress: () => setSecureText(!secureText), style: styles.iconWrapper },
+                React.createElement(Image, { source: secureText ? Images.Eyeoff : Images.Eyeon, style: styles.icon, resizeMode: "contain" }))) : (rightIcon && (React.createElement(TouchableOpacity, { onPress: onRightIconPress, disabled: !onRightIconPress, style: styles.iconWrapper },
+                React.createElement(Image, { source: rightIcon, style: styles.icon, resizeMode: "contain" }))))),
+        showError && React.createElement(Text, { style: styles.errorText }, showError)));
+};
+export default Input;
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: "row",
+        alignItems: "center",
+        borderRadius: 5,
+        borderWidth: 1,
+        borderColor: Colors.primaryColor,
+        backgroundColor: Colors.white,
+        height: Scale.moderateScale(50),
+        paddingHorizontal: Scale.moderateScale(10),
+    },
+    input: {
+        flex: 1,
+        ...Typography.style.standardU(),
+        textTransform: "none",
+        color: Colors.textColor,
+    },
+    iconWrapper: {
+        padding: Scale.moderateScale(5),
+    },
+    icon: {
+        width: Scale.moderateScale(20),
+        height: Scale.moderateScale(20),
+        tintColor: Colors.primaryColor,
+    },
+    disabled: {
+        backgroundColor: Colors.lightGrey,
+        borderColor: Colors.borderGrey,
+    },
+    disabledText: {
+        color: Colors.disabledGrey,
+    },
+    errorBorder: {
+        borderColor: Colors.dangerRed,
+    },
+    errorText: {
+        color: Colors.dangerRed,
+        fontSize: Scale.moderateScale(12),
+        marginTop: 3,
+    },
+});

package/dist/components/Modal/index.d.ts

@@ -0,0 +1,9 @@
+import React, { ReactNode } from 'react';
+import { ModalProps } from 'react-native-modal';
+type AppModalProps = Partial<ModalProps> & {
+    children: ReactNode;
+    closing: () => void;
+    bkO?: number;
+};
+declare const Modals: ({ children, closing, bkO, ...props }: AppModalProps) => React.JSX.Element;
+export default Modals;

package/dist/components/Modal/index.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import Modal from 'react-native-modal';
+// Base Modal Component customized for app needs
+const Modals = ({ children, closing, bkO = 0.5, ...props }) => (React.createElement(Modal, { backdropOpacity: bkO, animationInTiming: 400, animationOutTiming: 400, backdropTransitionOutTiming: 0, swipeDirection: ['down', 'left', 'right', 'up'], onSwipeComplete: closing, onBackdropPress: closing, onBackButtonPress: closing, ...props }, children));
+export default Modals;

package/dist/components/MyStatusBar/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ColorValue } from 'react-native';
+interface MyStatusBarProps {
+    backgroundColor?: ColorValue;
+    barStyle?: 'default' | 'light-content' | 'dark-content';
+}
+declare const MyStatusBar: React.FC<MyStatusBarProps>;
+export default MyStatusBar;

package/dist/components/MyStatusBar/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { StatusBar, SafeAreaView, Platform, StyleSheet, } from 'react-native';
+const MyStatusBar = ({ backgroundColor = '#fff', barStyle = 'default', }) => {
+    return (React.createElement(SafeAreaView, { style: [styles.safeArea, { backgroundColor }] },
+        React.createElement(StatusBar, { barStyle: barStyle, backgroundColor: Platform.OS === 'android' ? backgroundColor : undefined, translucent: false })));
+};
+const styles = StyleSheet.create({
+    safeArea: {
+        backgroundColor: '#fff',
+        // height: Platform.OS === 'android' ? StatusBar.currentHeight : undefined,
+    },
+});
+export default MyStatusBar;

package/dist/components/ProgressBar/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface ProgressBarProps {
+    progress: number;
+    activeColor?: string;
+    inActiveColor?: string;
+    containerStyle?: any;
+}
+declare const ProgressBar: React.FC<ProgressBarProps>;
+export default ProgressBar;

package/dist/components/ProgressBar/index.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { View, StyleSheet, Dimensions } from 'react-native';
+import { Colors, Scale } from '../../styles';
+const { width } = Dimensions.get('window');
+const ProgressBar = ({ progress, activeColor = Colors.primaryColor, inActiveColor = Colors.disabledGrey, containerStyle }) => {
+    return (React.createElement(View, { style: [
+            styles.container, containerStyle,
+            { backgroundColor: inActiveColor },
+        ] },
+        React.createElement(View, { style: [
+                styles.progress,
+                { width: `${progress * 100}%`, backgroundColor: activeColor },
+            ] })));
+};
+const styles = StyleSheet.create({
+    container: {
+        height: Scale.moderateScale(18),
+        width: width,
+        borderRadius: 10,
+        overflow: 'hidden',
+    },
+    progress: {
+        height: '100%',
+    },
+});
+export default ProgressBar;

package/dist/components/RadioButton/index.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { StyleProp, ViewStyle, TextStyle } from 'react-native';
+interface AppRadioButtonProps {
+    label?: string;
+    intlType?: string;
+    selected: boolean;
+    onSelect: () => void;
+    disabled?: boolean;
+    size?: number;
+    color?: string;
+    containerStyle?: StyleProp<ViewStyle>;
+    outerStyle?: StyleProp<ViewStyle>;
+    innerStyle?: StyleProp<ViewStyle>;
+    labelStyle?: StyleProp<TextStyle>;
+    renderLabel?: () => React.ReactNode;
+}
+declare const RadioButton: React.FC<AppRadioButtonProps>;
+export default RadioButton;

package/dist/components/RadioButton/index.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, } from 'react-native';
+import { useTranslation } from 'react-i18next';
+import { Colors } from '../../styles';
+const RadioButton = ({ label, intlType, selected, onSelect, disabled = false, size = 20, color = Colors.checkedColor, containerStyle, outerStyle, innerStyle, labelStyle, renderLabel, }) => {
+    const { t } = useTranslation();
+    const getLabel = () => {
+        if (!label)
+            return '';
+        if (intlType) {
+            const translated = t(label, { ns: intlType });
+            if (translated !== label)
+                return translated;
+        }
+        return label;
+    };
+    return (React.createElement(TouchableOpacity, { style: [styles.container, containerStyle], onPress: onSelect, disabled: disabled },
+        React.createElement(View, { style: [
+                {
+                    width: size,
+                    height: size,
+                    borderRadius: size / 2,
+                    borderWidth: 1,
+                    borderColor: color,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    marginRight: 10,
+                },
+                outerStyle,
+            ] }, selected && (React.createElement(View, { style: [
+                {
+                    width: size / 2,
+                    height: size / 2,
+                    borderRadius: size / 4,
+                    backgroundColor: color,
+                },
+                innerStyle,
+            ] }))),
+        renderLabel
+            ? renderLabel()
+            : label
+                ? React.createElement(Text, { style: [styles.label, labelStyle] }, getLabel())
+                : null));
+};
+const styles = StyleSheet.create({
+    container: { flexDirection: 'row', alignItems: 'center' },
+    label: { fontSize: 14, color: '#000' },
+});
+export default RadioButton;

package/dist/components/ScrolledContainer/index.d.ts

@@ -0,0 +1,13 @@
+import React, { ReactNode } from 'react';
+import { ViewStyle } from 'react-native';
+type ScrolledContainerProps = {
+    children: ReactNode;
+    containerStyle?: ViewStyle;
+    safeEdgesTop?: boolean;
+    safeEdgesBottom?: boolean;
+    addPaddingTop?: boolean;
+    scrollEnabled?: boolean;
+    keyboardShouldPersistTaps?: 'always' | 'handled' | 'never';
+};
+declare const ScrolledContainer: ({ containerStyle, children, safeEdgesTop, safeEdgesBottom, addPaddingTop, scrollEnabled, keyboardShouldPersistTaps, }: ScrolledContainerProps) => React.JSX.Element;
+export default ScrolledContainer;

package/dist/components/ScrolledContainer/index.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { StyleSheet, Platform } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { Colors, Scale } from '../../styles';
+import { ScrollView } from 'react-native';
+const ScrolledContainer = ({ containerStyle, children, safeEdgesTop, safeEdgesBottom, addPaddingTop, scrollEnabled = true, keyboardShouldPersistTaps = 'handled', }) => {
+    const edges = ['left', 'right'];
+    if (safeEdgesTop)
+        edges.push('top');
+    if (safeEdgesBottom)
+        edges.push('bottom');
+    return (React.createElement(SafeAreaView, { edges: edges, style: styles.globalSafeAreaStyle },
+        React.createElement(ScrollView, { contentContainerStyle: [
+                styles.screen,
+                addPaddingTop && { paddingTop: Scale?.moderateScale(50) },
+                containerStyle,
+            ], showsVerticalScrollIndicator: false, scrollEnabled: scrollEnabled, keyboardShouldPersistTaps: keyboardShouldPersistTaps }, children)));
+};
+export default ScrolledContainer;
+const styles = StyleSheet.create({
+    globalSafeAreaStyle: {
+        flex: 1,
+        backgroundColor: Colors.background,
+        paddingBottom: Platform.OS === 'android' ? Scale?.moderateScale(10) : 0,
+    },
+    screen: {
+        flexGrow: 1, // makes ScrollView expand & scroll
+        paddingTop: Scale?.moderateScale(20),
+    },
+});

package/dist/components/ShouldRender/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare const ShouldRender: ({ children, shouldRender, }: {
+    children: React.ReactNode;
+    shouldRender: boolean | undefined;
+}) => React.JSX.Element;
+export default ShouldRender;

package/dist/components/ShouldRender/index.js

@@ -0,0 +1,5 @@
+import React from 'react';
+const ShouldRender = ({ children, shouldRender, }) => {
+    return shouldRender ? React.createElement(React.Fragment, null, children) : null;
+};
+export default ShouldRender;

package/dist/components/Spinner/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ViewStyle, ActivityIndicatorProps } from 'react-native';
+interface AppSpinnerProps extends ActivityIndicatorProps {
+    loaderStyle?: ViewStyle;
+    size?: 'small' | 'large';
+}
+declare const Spinner: React.FC<AppSpinnerProps>;
+export default Spinner;