rn-phone-input-field
Version:
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
71 lines (70 loc) • 1.89 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var react_native_1 = require("react-native");
// Color constants for better maintainability and consistency
var COLORS = {
LIGHT: {
border: '#323436',
background: '#FAFAFB',
text: '#000000',
},
DARK: {
border: '#DDDDDE',
background: '#1B1D20',
text: '#FFFFFF',
},
};
// Base styles that don't depend on theme
var BASE_STYLES = react_native_1.StyleSheet.create({
flexRow: {
flexDirection: 'row',
alignItems: 'center',
},
ft28: {
fontSize: 28,
},
width75: {
width: '75%',
},
});
var createThemedStyles = function (isDark) {
var colors = isDark ? COLORS.DARK : COLORS.LIGHT;
return react_native_1.StyleSheet.create({
container: {
flexDirection: 'row',
alignItems: 'center',
borderWidth: 1,
borderColor: colors.border,
borderRadius: 10,
paddingVertical: 8,
paddingHorizontal: 22,
flexShrink: 1,
backgroundColor: colors.background,
},
ft16: {
fontSize: 16,
color: colors.text,
},
});
};
// Cache styles to prevent recreation
var styleCache = new Map();
var styles = function (isDark) {
// Check cache first
var cachedStyles = styleCache.get(isDark);
if (cachedStyles) {
return cachedStyles;
}
// Create and cache themed styles
var themedStyles = createThemedStyles(isDark);
var combinedStyles = {
container: themedStyles.container,
flexRow: BASE_STYLES.flexRow,
ft28: BASE_STYLES.ft28,
ft16: themedStyles.ft16,
width75: BASE_STYLES.width75,
};
styleCache.set(isDark, combinedStyles);
return combinedStyles;
};
exports.default = styles;