Function App

Sample/src/App.tsx:60–191

()

});

export default function App() {
  const insets = useSafeAreaInsets();

  const [showDialog, setShowDialog] = useState(false);
  const [showConfirm, setShowConfirm] = useState(false);
  const [showProgress, setShowProgress] = useState(false);

  const openDialog = (show: boolean) => {
    setShowDialog(show);
  };

  const openConfirm = (show: boolean) => {
    setShowConfirm(show);
  };

  const openProgress = () => {
    setShowProgress(true);

    setTimeout(() => {
      setShowProgress(false);
    }, 4000);
  };

  const optionYes = () => {
    openConfirm(false);

    // Yes, this is a workaround :(
    // Why? See this https://github.com/facebook/react-native/issues/10471
    setTimeout(() => {
      Alert.alert('The YES Button touched!');
    }, 300);
  };

  const optionNo = () => {
    openConfirm(false);

    // Yes, this is a workaround :(
    // Why? See this https://github.com/facebook/react-native/issues/10471
    setTimeout(() => {
      Alert.alert('The NO Button touched!');
    }, 300);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.welcomeText}>
        Welcome to React Native Simple Dialogs!
      </Text>
      <Text style={styles.exampleText}>Examples</Text>
      <Text style={styles.instructionsText}>
        To get started, touch on the buttons
      </Text>

      <Button onPress={() => openDialog(true)} title="Custom Dialog" />

      <View style={{height: 40}} />

      <Button onPress={() => openConfirm(true)} title="Confirm Dialog" />