Replaced game alert by paper dialog

src/components/Dialogs/AlertDialog.js

@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 import {Button, Dialog, Paragraph, Portal} from 'react-native-paper';
+import i18n from "i18n-js";
 
 type Props = {
     visible: boolean,
@@ -23,7 +24,7 @@ class AlertDialog extends React.PureComponent<Props> {
                         <Paragraph>{this.props.message}</Paragraph>
                     </Dialog.Content>
                     <Dialog.Actions>
-                        <Button onPress={this.props.onDismiss}>OK</Button>
+                        <Button onPress={this.props.onDismiss}>{i18n.t("dialog.ok")}</Button>
                     </Dialog.Actions>
                 </Dialog>
             </Portal>

src/components/Dialogs/OptionsDialog.js

@@ -0,0 +1,56 @@
+// @flow
+
+import * as React from 'react';
+import {Button, Dialog, Paragraph, Portal} from 'react-native-paper';
+import {FlatList} from "react-native";
+
+export type OptionsDialogButton = {
+    title: string,
+    onPress: () => void,
+}
+
+type Props = {
+    visible: boolean,
+    title: string,
+    message: string,
+    buttons: Array<OptionsDialogButton>,
+    onDismiss: () => void,
+}
+
+class OptionsDialog extends React.PureComponent<Props> {
+
+    getButtonRender = ({item}: { item: OptionsDialogButton }) => {
+        return <Button
+            onPress={item.onPress}>
+            {item.title}
+        </Button>;
+    }
+
+    keyExtractor = (item: OptionsDialogButton) => item.title;
+
+    render() {
+        return (
+            <Portal>
+                <Dialog
+                    visible={this.props.visible}
+                    onDismiss={this.props.onDismiss}>
+                    <Dialog.Title>{this.props.title}</Dialog.Title>
+                    <Dialog.Content>
+                        <Paragraph>{this.props.message}</Paragraph>
+                    </Dialog.Content>
+                    <Dialog.Actions>
+                        <FlatList
+                            data={this.props.buttons}
+                            renderItem={this.getButtonRender}
+                            keyExtractor={this.keyExtractor}
+                            horizontal={true}
+                            inverted={true}
+                        />
+                    </Dialog.Actions>
+                </Dialog>
+            </Portal>
+        );
+    }
+}
+
+export default OptionsDialog;

src/screens/Game/screens/GameMainScreen.js

@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from 'react';
-import {Alert, View} from 'react-native';
+import {View} from 'react-native';
 import {IconButton, Text, withTheme} from 'react-native-paper';
 import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
 import GameLogic from "../logic/GameLogic";
@@ -12,6 +12,8 @@ import i18n from "i18n-js";
 import MaterialHeaderButtons, {Item} from "../../../components/Overrides/CustomHeaderButton";
 import {StackNavigationProp} from "@react-navigation/stack";
 import type {CustomTheme} from "../../../managers/ThemeManager";
+import type {OptionsDialogButton} from "../../../components/Dialogs/OptionsDialog";
+import OptionsDialog from "../../../components/Dialogs/OptionsDialog";
 
 type Props = {
     navigation: StackNavigationProp,
@@ -24,6 +26,12 @@ type State = {
     gameTime: number,
     gameScore: number,
     gameLevel: number,
+
+    dialogVisible: boolean,
+    dialogTitle: string,
+    dialogMessage: string,
+    dialogButtons: Array<OptionsDialogButton>,
+    onDialogDismiss: () => void,
 }
 
 class GameMainScreen extends React.Component<Props, State> {
@@ -39,6 +47,11 @@ class GameMainScreen extends React.Component<Props, State> {
             gameTime: 0,
             gameScore: 0,
             gameLevel: 0,
+            dialogVisible: false,
+            dialogTitle: "",
+            dialogMessage: "",
+            dialogButtons: [],
+            onDialogDismiss: () => {},
         };
         this.props.navigation.addListener('blur', this.onScreenBlur);
         this.props.navigation.addListener('focus', this.onScreenFocus);
@@ -120,43 +133,77 @@ class GameMainScreen extends React.Component<Props, State> {
             this.showPausePopup();
     }
 
+    onDialogDismiss = () => this.setState({dialogVisible: false});
+
     showPausePopup = () => {
-        Alert.alert(
+        const onDismiss = () => {
-            i18n.t("screens.game.pause"),
+            this.togglePause();
-            i18n.t("screens.game.pauseMessage"),
+            this.onDialogDismiss();
-            [
+        };
-                {text: i18n.t("screens.game.restart.text"), onPress: this.showRestartConfirm},
+        this.setState({
-                {text: i18n.t("screens.game.resume"), onPress: this.togglePause},
+            dialogVisible: true,
+            dialogTitle: i18n.t("screens.game.pause"),
+            dialogMessage: i18n.t("screens.game.pauseMessage"),
+            dialogButtons: [
+                {
+                    title:  i18n.t("screens.game.restart.text"),
+                    onPress: this.showRestartConfirm
+                },
+                {
+                    title:  i18n.t("screens.game.resume"),
+                    onPress: onDismiss
+                }
             ],
-            {cancelable: false},
+            onDialogDismiss: onDismiss,
-        );
+        });
     }
 
     showRestartConfirm = () => {
-        Alert.alert(
+        this.setState({
-            i18n.t("screens.game.restart.confirm"),
+            dialogVisible: true,
-            i18n.t("screens.game.restart.confirmMessage"),
+            dialogTitle: i18n.t("screens.game.restart.confirm"),
-            [
+            dialogMessage: i18n.t("screens.game.restart.confirmMessage"),
-                {text: i18n.t("screens.game.restart.confirmNo"), onPress: this.showPausePopup},
+            dialogButtons: [
-                {text: i18n.t("screens.game.restart.confirmYes"), onPress: this.startGame},
+                {
+                    title:  i18n.t("screens.game.restart.confirmYes"),
+                    onPress: () => {
+                        this.onDialogDismiss();
+                        this.startGame();
+                    }
+                },
+                {
+                    title:  i18n.t("screens.game.restart.confirmNo"),
+                    onPress: this.showPausePopup
+                }
             ],
-            {cancelable: false},
+            onDialogDismiss: this.showPausePopup,
-        );
+        });
     }
 
     showGameOverConfirm() {
         let message = i18n.t("screens.game.gameOver.score") + this.state.gameScore + '\n';
         message += i18n.t("screens.game.gameOver.level") + this.state.gameLevel + '\n';
         message += i18n.t("screens.game.gameOver.time") + this.getFormattedTime(this.state.gameTime) + '\n';
-        Alert.alert(
+        const onDismiss = () => {
-            i18n.t("screens.game.gameOver.text"),
+            this.onDialogDismiss();
-            message,
+            this.startGame();
-            [
+        };
-                {text: i18n.t("screens.game.gameOver.exit"), onPress: () => this.props.navigation.goBack()},
+        this.setState({
-                {text: i18n.t("screens.game.restart.text"), onPress: this.startGame},
+            dialogVisible: true,
+            dialogTitle: i18n.t("screens.game.gameOver.text"),
+            dialogMessage: message,
+            dialogButtons: [
+                {
+                    title:  i18n.t("screens.game.gameOver.exit"),
+                    onPress: () => this.props.navigation.goBack()
+                },
+                {
+                    title:  i18n.t("screens.game.resume"),
+                    onPress: onDismiss
+                }
             ],
-            {cancelable: false},
+            onDialogDismiss: onDismiss,
-        );
+        });
     }
 
     startGame = () => {
@@ -281,6 +328,13 @@ class GameMainScreen extends React.Component<Props, State> {
                         color={colors.tetrisScore}
                     />
                 </View>
+                <OptionsDialog
+                    visible={this.state.dialogVisible}
+                    title={this.state.dialogTitle}
+                    message={this.state.dialogMessage}
+                    buttons={this.state.dialogButtons}
+                    onDismiss={this.state.onDialogDismiss}
+                />
             </View>
         );
     }