Open ubugnu opened 11 months ago
A fix would be to make the react native text input disabled instead.
import { SafeAreaView, StyleSheet, Button } from 'react-native';
import {useState} from "react";
import PhoneInput from "react-native-phone-number-input";
export default function App() {
const [disabled, setDisabled] = useState(false);
return (
<SafeAreaView style={styles.container}>
<PhoneInput
textInputProps={{ editable: !disabled }}
containerStyle={styles.phone}/>
<Button
title={disabled ? "Enable" : "Disable"}
onPress={() => setDisabled(prev => !prev)} />
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#ecf0f1',
padding: 8,
},
phone: {
width: "100%"
}
});
@ubugnu textInputProps={{ editable: !disabled }}
is disabling the textinput but aren't you able to select the country always? isn't it an unexpected behaviour.
A reproducible example is available here: https://snack.expo.dev/m-ZUgTDqu
The code:
To reproduce the error: click on the disable button, the first time, we already remark that the country modal appears at the bottom of the screen, if you re-enable then re-disable the input, then it is worse, the country selection modal will hide the whole screen, even worse, it cannot be dismissed.