'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,
},
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
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 |