rn-phone-input-field/dist/main/country-picker/styles/picker.style.js

A React Native phone number input component built from scratch, featuring a text input for number entry, a custom dropdown for selecting country codes, and validation logic using regex or country-specific rules. It supports formatting, localization, and s

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.customBorder = exports.countryPickerStyles = exports.usePickerStyles = void 0;
var react_native_1 = require("react-native");
var react_1 = require("react");
// Constants for colors and dimensions
var COLORS = {
    dark: {
        text: '#F8F8F8',
        background: '#000000',
        searchText: '#FFFFFF',
    },
    light: {
        text: '#1B1D20',
        background: '#FFFFFF',
        searchText: '#000000',
    },
};
var DIMENSIONS = {
    padding: {
        horizontal: 20,
        vertical: 16,
    },
    fontSize: {
        small: 16,
        medium: 18,
        large: 22,
    },
    icon: {
        size: 48,
    },
};
var pickerStyles = function (isDark) {
    return react_native_1.StyleSheet.create({
        eachContainer: {
            flexDirection: 'row',
            gap: 10,
            justifyContent: 'space-between',
            alignItems: 'center',
        },
        eachTextContainer: {
            color: isDark ? COLORS.dark.text : COLORS.light.text,
            fontSize: DIMENSIONS.fontSize.medium,
        },
        eachText: {
            fontSize: DIMENSIONS.fontSize.large,
        },
        searchInput: {
            flexGrow: 1,
            fontSize: DIMENSIONS.fontSize.small,
            color: isDark ? COLORS.dark.searchText : COLORS.light.searchText,
        },
        flatListContainer: {
            paddingTop: 8,
            paddingBottom: 80,
        },
        bgWhite: {
            flex: 1,
            backgroundColor: isDark
                ? COLORS.dark.background
                : COLORS.light.background,
        },
        flexRow: {
            flexDirection: 'row',
            alignItems: 'center',
            gap: 10,
        },
        iconButton: {
            height: DIMENSIONS.icon.size,
            width: DIMENSIONS.icon.size,
            padding: 0,
            borderRadius: 500,
            alignItems: 'center',
            justifyContent: 'center',
            minWidth: 0,
        },
        emptyContainer: {
            padding: DIMENSIONS.padding.vertical,
            alignItems: 'center',
        },
        emptyText: {
            fontSize: DIMENSIONS.fontSize.small,
            fontWeight: '500',
            lineHeight: 24,
            textAlign: 'center',
            color: isDark ? COLORS.dark.text : COLORS.light.text,
        },
    });
};
var customBorder = function (index, isDark) {
    return react_native_1.StyleSheet.create({
        border: {
            paddingTop: index === 0 ? 0 : DIMENSIONS.padding.vertical,
            paddingRight: DIMENSIONS.padding.horizontal,
            paddingBottom: DIMENSIONS.padding.vertical,
            paddingLeft: DIMENSIONS.padding.horizontal,
            borderTopWidth: index === 0 ? 0 : 1,
            borderTopColor: index === 0 ? '' : "rgba(".concat(isDark ? '255,255,255' : '0,0,0', ",0.2)"),
        },
    });
};
exports.customBorder = customBorder;
var countryPickerStyles = react_native_1.StyleSheet.create({
    flex: { flex: 1 },
    mb40: {
        marginBottom: -40,
    },
});
exports.countryPickerStyles = countryPickerStyles;
// Memoized hook for styles
var usePickerStyles = function (isDark) {
    return (0, react_1.useMemo)(function () { return pickerStyles(isDark); }, [isDark]);
};
exports.usePickerStyles = usePickerStyles;