garganurag893 / react-native-phone-number-input

React Native component for phone number.
MIT License
372 stars 212 forks source link

Country selection modal will fill the whole screen when input is disabled twice #149

Open ubugnu opened 11 months ago

ubugnu commented 11 months ago

A reproducible example is available here: https://snack.expo.dev/m-ZUgTDqu

The code:

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
        disabled={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%"
  }
});

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.

ubugnu commented 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%"
  }
});
manojkumarboppisetti commented 3 months ago

@ubugnu textInputProps={{ editable: !disabled }} is disabling the textinput but aren't you able to select the country always? isn't it an unexpected behaviour.