Amirul93

PhoneInput.tsx

Apr 12th, 2021
558
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, {useMemo} from 'react';
  2. import {
  3.   Pressable,
  4.   StyleProp,
  5.   StyleSheet,
  6.   Text,
  7.   View,
  8.   ViewStyle,
  9. } from 'react-native';
  10. import Icon from 'react-native-vector-icons/Ionicons';
  11. import Theme from '../../utils/theme';
  12. import {TextInput} from 'react-native-gesture-handler';
  13. import FlagIcon from '../FlagIcon';
  14. import {CountryData} from '../../models/CountryData';
  15.  
  16. type Props = {
  17.   style?: StyleProp<ViewStyle>;
  18.   onChangeText?: (text: string) => void;
  19.   onTogglePickerModal?: () => void;
  20.   country: CountryData;
  21. };
  22.  
  23. export const PhoneInput: React.FunctionComponent<Props> = ({
  24.   style,
  25.   onChangeText,
  26.   onTogglePickerModal,
  27.   country,
  28. }) => {
  29.   console.log('PhoneInput is rendered');
  30.  
  31.   return (
  32.     <View style={[styles.container, style]}>
  33.       <Pressable
  34.         android_ripple={{color: Theme.colors.gray}}
  35.         onPress={onTogglePickerModal}>
  36.         <View
  37.           style={{
  38.             flexDirection: 'row',
  39.             paddingHorizontal: Theme.spacing.padding,
  40.             flex: 1,
  41.           }}>
  42.           <View style={{justifyContent: 'center'}}>
  43.             <FlagIcon name={country.flag} size={25} />
  44.           </View>
  45.  
  46.           <View style={{justifyContent: 'center', marginLeft: 5}}>
  47.             <Icon name="caret-down" color={Theme.colors.black} />
  48.           </View>
  49.         </View>
  50.       </Pressable>
  51.       <View style={styles.divider} />
  52.       <View
  53.         style={{
  54.           flexDirection: 'row',
  55.           paddingHorizontal: Theme.spacing.padding,
  56.           flex: 4,
  57.           alignItems: 'center',
  58.         }}>
  59.         <Text style={styles.input}>{country.code}</Text>
  60.  
  61.         <TextInput
  62.           keyboardType="numeric"
  63.           placeholder="0323456789"
  64.           placeholderTextColor={Theme.colors.gray}
  65.           autoFocus={true}
  66.           maxLength={12}
  67.           onChangeText={onChangeText}
  68.           multiline={false}
  69.           style={[styles.input, {flex: 1, paddingTop: 0, paddingBottom: 0}]}
  70.         />
  71.       </View>
  72.     </View>
  73.   );
  74. };
  75.  
  76. const styles = StyleSheet.create({
  77.   container: {
  78.     display: 'flex',
  79.     flexDirection: 'row',
  80.     width: '100%',
  81.     height: 50,
  82.     backgroundColor: Theme.colors.white,
  83.     borderRadius: 10,
  84.     alignItems: 'center',
  85.   },
  86.   divider: {
  87.     height: '70%',
  88.     width: 2,
  89.     backgroundColor: '#F3F3F3',
  90.   },
  91.   input: {
  92.     ...Theme.fonts.h6,
  93.     color: Theme.colors.black,
  94.   },
  95. });
  96.  
RAW Paste Data

Adblocker detected! Please consider disabling it...

We've detected AdBlock Plus or some other adblocking software preventing Pastebin.com from fully loading.

We don't have any obnoxious sound, or popup ads, we actively block these annoying types of ads!

Please add Pastebin.com to your ad blocker whitelist or disable your adblocking software.

×