'How to override react-phone-number-input style?

How can i override the style of the react-phone-number-input component using react-native-phone-number-input ?

i tried containerStyle to edit the container style:

<PhoneInput
      containerStyle={{ backgroundColor: 'black' }}
      onChange={value => updateFormData('phoneNumber', value)}
      defaultValue={defaultValue}
      placeholder="Enter Phone Number"
      defaultCode="US"
      keyboardType="phone-pad"
      withDarkTheme
      withShadow
      autoFocus
    />

but how to edit the input style with this style :

    labelStyle: {
    fontFamily: 'calibri',
    color: '#fff',
    fontSize: Fonts.sizes.title2
  },
  textInputStyle: {
    color: '#fff',
    fontFamily: 'calibri',
    fontSize: Fonts.sizes.header,
    borderBottomWidth: 1,
    borderBottomColor: 'rgba(255,255,255,0.3)',
    marginBottom: 20,
  },

phone input



Solution 1:[1]

you may use the inputStyle props

<PhoneInput
      containerStyle={{ backgroundColor: 'black' }}
      onChange={value => updateFormData('phoneNumber', value)}
      defaultValue={defaultValue}
      placeholder="Enter Phone Number"
      defaultCode="US"
      keyboardType="phone-pad"
      withDarkTheme
      withShadow
      autoFocus
      textInputStyle={textInputStyle }
    />

Solution 2:[2]

Use this one as per required:

According to the https://github.com/bl00mber/react-phone-input-2#style , you can pass in class names and inline styles as props to each of the elements. It would look something like:

<PhoneInput
  ...
  containerClass="my-container-class"
  inputClass="my-input-class"
  containerStyle={{
    border: "10px solid black"
  }}
  inputStyle={{
    background: "lightblue"
  }}
/>

Here is my https://github.com/garganurag893/react-native-phone-number-input/blob/master/example/App.tsx

react-native

https://www.npmjs.com/package/react-native-phone-input

Solution 3:[3]

this can really help !!!

<PhoneInput
                    ref={this.phoneInput}
                    defaultValue={this.state.value}
                    defaultCode="FR"
                    onChangeText={(text) => {
                        thenter code hereis.state.value===text;
                    }}
                    onChangeFormattedText={(text) => {
                        this.state.formattedValue===text;
                    }}
                    withDarkTheme
                    withShadow
                    keyboardType="phone-pad"
                    containerStyle={{borderRadius:20,backgroundColor: '#463859',}}
                    textInputStyle={{color:"#ffffff"}}
                    codeTextStyle={{color:"#ffffff"}}
                    flagButtonStyle={{color:"#ffffff"}}
                    textContainerStyle=`enter code here`{{backgroundColor:'#463859',borderRadius:20,color:"#ffffff",padding:0}}
                    placeholder="Numéro de téléphone"
                    phoneInputContainer={true}
                    textInputProps={{placeholderTextColor:"#ffffff"}}
                    
                />

Solution 4:[4]

For me, I figured the textInputStyle property has a padding which hides the text input when I give it container a fixed height.

textInputStyle:{
    padding: 0
}

Solution 5:[5]

textInputStyle={{fontSize:height/60}}

check it it works for me .

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2
Solution 3 iheb ben hamada
Solution 4 MosesAyo
Solution 5 Suraj Rao